gradient.png

Reimagining Popular Apps

As an avid user of productivity and entertainment apps, I've often found myself wanting a more friendly experience than what was available. So I tapped into my product background to rethink two of the most popular categories of daily personal management tools for general consumers.

Expense Tracker

A widely used utility, expense trackers help users keep track of their finances. Their aim is to make people more financially responsible by letting them monitor and budget all expenses. Some apps even go above and beyond the basics and keep tally of user investments.

Reason for Rethinking

I've used quite a few expense trackers and found most to be focused on logging information. While all had reports of some kind, none explored expense trends beyond a surface level. This didn't help my goal to discover and modify my spending habits in a meaningful way, which was my goal for using such apps. Another challenge I faced was staying motivated to record my expenses beyond a point. This had me thinking if others were facing the same problem. I decided to find out.

Goal for this Redesign

During my research, I came to understand that the target market had a more holistic view of expense tracing. For them, the ultimate goal was to be financially responsible. This meant creating a product that would provide them with the tools to achieve that—be that through detailed analytics, or intelligent suggestions, or even a product that encourages continued usage. On a personal level, my goal was to create a product I would enjoy to use.

Target Audience

I interviewed four of my friends with varying financial backgrounds to understand if and how they manage their money. These were qualitative discussions to identify their fundamental money goals. Based on inputs, I compiled the below personas:

Designing the Product

As the adage goes, the first impression is often the last. This guided my creation of the home screen. It had to be simple and engaging for casual users, yet versatile to appeal to pro users. One way of doing this was to avoid a menu and instead design widgets that were accessible on the home screen itself, with each widget adding a layer of relevant information to the user. Moreover, I used bright colours and depth to create a visual hierarchy that adds to the unique aesthetic of the overall product.

expense-dashboard.png

Monthly spend budget.

Available bank balance.

A visual breakdown of the expense categories for easy comparison.

Summary of today's expenses. It also shows payment reminders that the user sets up.

Gamifying the process to encourage users to use the app regularly.

A clear depiction of the user's expenditure for the month.

The subtle blend of design simplicity and easily accessible pro-features continues throughout the app. Below are examples of the three most frequent screens users interact with. Each shows small touches that provide useful context to their data.

Expense View

Expenses are compiled by merchant and synced with the user's bank. The user also gets a quick comparison of their usual spending habits, with the ability to set a monthly spend limit.

Expense Entry

This screen was deliberately kept simple for benefit of novice users. It can be invoked from most screens of the app, making it highly accessible.

Smart Search

Search plays an important role in data-rich apps. This screen unlocks some of that power with relevant suggestions, e.g. popular locations, activities, and more.

Visualizing with a Timeline

This calendar is designed to help users better understand how their expenses are distributed over time.

The deeper the shade of red, the more users have spend on that day. When shown to beta testers, one of them commented he found it to be a nice way to correlate spending habits with the days of the week.

Users can tap on a date to see a list of all expenses / income in full detail. This fluidic navigation was meant to mimic a calendar app, where users get a clear idea about their events (in this case expenses).

expense-4.jpeg
expense-3.jpeg

Diving into Analytics

One of the pain points three of the four interviewees stated was their inability to gain a meaningful insight from their expenses. This meant that an expense timeline was not enough, there was a need for richer analysis a various places in the app.

It starts with a detailed overview on the types of expenses users have made and a helpful month-wise calendar to show how those expenses are distributed. Users can further access a graph that provides spending trends over time (which was a direct idea by one of the interviewees). Another example is that of saving trends, which lets users visualize whether they are on track to meet their savings goals.

expense-8.jpeg
expense-icon-1.png
expense-icon-2.png
expense-icon-3.png

Personalization

An important aspect of user engagement involves personalizing the app's experience. Apart from customizable expense categories (and related graphics), I decided to add a visual uniqueness, in the form of a dynamic app icon.

 

While the icon consists of a diagonal pill over a rounded square, the design represents a bank note rolled into a cylinder. Whatever is the primary currency of the app, will automatically reflects on the icon (a few examples are shown here). Of course, users can select any currency to be displayed on the icon.

Gamification

Staying encouraged to use the app was a big focus of one of the interviews. I tired to solve this by gamifying the app. Each activity that users perform is converted into a comparative score or an achievement badge (with multiple level-ups). This is coupled with regular push notifications to stay on track.

shield-crown.png
shield-bank.png
shield-flower.png
mail-hero-inbox.png

Email Manager

While most consumers recall messaging services when think of communication, emailing is a much more essential mode of interaction. It is the default choice for work communication, sharing large files, creating events, as well as receiving communication from most businesses.

Reason for Rethinking

I am an active user of Apple's first-party Mail app, and I love its no-frills experience. The only problem I have had with it is (what was probably engineered by design) that it is too simplistic in certain respects, chiefly email search and organization. I tried other solutions but they were either on par with Apple Mail or were too complex to be worth the switch (which came at the usability cost of app integration). This prompted me to find out if there is place for a new product here.

Research Behind this Redesign

I interviewed five individuals, in a combination of family, friends and colleagues, with an open mind and blank slate. I wanted to understand what friction people experience while using email services (web or app) and identify any patterns. If I had to create a product it had to offer some concrete benefits over the competition, or else it would become just another nifty app, but nothing else.

Key Findings

From my research, I found three key concerns. While two issues were related to their platform of choice, one very surprising problem cropped up that would later become a crucial feature during the ideation and design phases of this project.

findings-icon-search.png

Searching for a very specific email or attachment is not the easiest experience.

findings-icon-bulk.png

There is no easy tool to bulk manage emails on a mobile phone.

findings-icon-unread.png

Too many unwanted emails to deal with, leading to several being left unread.

Designing the Solution

While this may seem like a straightforward application, with little in the way of a unique interface, I still wanted to create a unique experience. My two goals for it were: to have a relatively simple design (without compromising on features) and have enough in the way of offerings to make the switching cost worth it to users.

I started with a mood board (shown above) for inspiration and a general feel of the product. In it, there are two notable graphics of particular interest. The first image (top left) became the base for the app's theme—green, silver and black. The second image (bottom centre) of a speaker with a panel of knobs, inspired the controls of the home screen interface (more details on this panel are given in the next section).

Control Panel

To reduce the complexity of the app, I didn't want to use a hamburger menu. This meant that I had to think of another method of navigation and control. But I didn't want it to be obtrusive, by taking up too much space. This is where the mood board speaker came as an inspiration. I came up with the control panel. It condensed all functions of the app into one row of controls. The four bubbles to the right cover all features that would otherwise require a slide-out menu, while the search button to the left is deliberately elongated to give the impression of a traditional textbox.

mail-header.jpeg
1 of 5

Mail Search

Tapping the search field opens this screen. But unlike typical mail searches, this provides users with fine grain control. A number of buttons below the search bar lets users narrow their queries based on date, mailbox, what type of attachment a mail has and more.

Besides this, quick access options, such as frequent contacts and upcoming calendar events, aim to minimize friction involved in getting to the desired email.

Inspiration was taken from the Microsoft Outlook's search tab, which closely resembled the features I wanted to add.

mail-read.jpeg

Emailing Experience

Central to the success of any product lies the experience of its core function.

Thus, reading and composing emails was of utmost importance during the design phase of this project. I decided not to stray from the conventional layout in the industry.

What I did uniquely was to place the email thread around the contacts rather than the subject. This let me add ability to let users quickly access all related conversations by the same contact with one tap.

A small but useful touch I added was to highlight the most relevant buttons in these screens, i.e. reply and attach.

mail-compose.jpeg
mail-cleanup.jpeg

Overcoming Email Overload

Among the interviewees was my father, who had an inbox with over 1,200 unread emails. During my interview with him, I tried to understand how any why his mailbox ended up as such. The major insight I got was that it was simply easier for him to ignore those emails than deal with them.

This gave rise to the idea of Cleanup. While an unsubscribe prompt has been implemented by Apple in their iOS and macOS platforms, there is no bulk option on the market.

This feature identifies senders whom users ignore (by not reading their messages or directly deleting the same) and offers as simple option to unsubscribe from all of them in one tap and no form to visit.

But even if users unsubscribe from future emails, they may still be left with their past messages. The second and third sections of cleanup let users deal with such emails, thus reducing the clutter.

Putting Everything Together

banner-ui-showcase.jpeg

UI Design Showcase
 

banner-brand.jpeg

Brand & Logo Design