Mobile Application Design

7/3/2022- 8/10/22

I worked on this project as a lead designer and product manager.

Main areas of responsibility included:

• - Content Research

• - Heuristic analysis

• - Application Design

• - Preliminary Sketches

• - Lo-fidelity Prototyping (basic flow and interactions)

• - Design Guide Creation

• - Hi-fidelity Prototyping and Mock Up

Summary:

It’s hard to keep track of all the products and services that we subscribe to each month. All we see is money deducted from our accounts for services that we might not even need or want anymore. A company has a product that keeps track of all of your subscription fees on websites, apps, services, etc. over the years. This company has only launched a desktop-only website that is not mobile-friendly and now needs to create a mobile version of its product that can be used by a broader audience. Right now the company only benefits from desktop users but they know that adding a mobile-friendly version of their product will significantly increase their market reach (with more than half of potential users on mobile devices). This will ultimately result in more users and more business.

Moving Through Design:

This is where I started my User Flows. I wanted to make sure the user could perform most of their actions in the shortest amount of time. But because I kept the design scope small there was the map came out pretty condensed, distilled down to what is necessary for this functioning application.

From there I created a Style guide, marking out the fonts, colors and design aesthetics I found appealing and contributed to delightful experience. I found a cool UI template online and while I did not use anything from it directly, I thought the use of contrasting colors and simple shapes was very pleasant and I wanted that to inspire my design. But before I got into the details I needed to hammer out the basics of the app and that is where I came up with the low fidelity design.

This design is simple but it captured all of the main screens I needed for the application. I wanted the user to be able to have clear and segmented areas to perform their desired actions. This proved to be a good tactic as I performed my first round of user testing. there was positive reception to this initial design but there were some draw backs that came forward.

The user was successfully able to navigate my requests. However there seemed to be a sticking point in terms of where the user would be directed when drilling into the notifications. This was true for the majority of the testers and I believe this is because there was no real indication of where the user would go if they clicked within that area of the dashboard. Additionally, there was an area for notifications within the menu tab that brought them to the dashboard. This may be too many ways of linking to the same information and could have been the reason for the confusion.

My remedy for this may be trying to understand how to successfully convey notifications to the user so they are able to clearly understand what their next move should be within the application. For example, is the app simply notifying them of a status? And if so, then there should not really be any further action. On the flip side, if the user has a payment that is past due of an auto renewal coming, there are actions that may be needed. I need to work on clearly defining what this path look like for the user.

after getting this feedback I proceeded to create the high fidelity design. I kept with the idea of high contrast colors to the background and I really enjoyed creating animations and glow effects that seemed to delight the user during the second round of testing. the design may be simple but it is clean. and during the second round of testing this seemed to be the biggest win in terms of design.