MagniFi

Case Study

An Application Design for Allowing Users Access to all of their Subscriptions

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.

The Challenge:

In this Application Design, I challenged myself to utilize more of Figma’s functionality, by creating more advanced components, animations and auto layouts. In doing so I wanted to create an easily accessible application that would be clear and concise for the user. In my heuristic research I was able to look at what existing platforms currently do and see what common threads existed across them. I was able to notice that most successful applications had clear navigation and uncluttered content for the user. This really was a big part of my design. Each of the 4 main pages of the application are targeted for a single use, yet they are linked between each other , creating a more cohesive experience.

Overcoming Obstacles:

In order to delve more deeply into this project I needed to take the time to truly think over a solution. Maybe it was paralysis from working on a new project but I had a bit of a delay getting started on the design process. However everything changed when I performed my heuristic analysis. I looked over both web and mobile applications, signing up for their services just to see where there would be possible hang ups.


This proved to be the most valuable way to use my time at this stage. This is mainly due to the fact that I had come across A LOT of issues in other applications. While they may have worked as intended, the on-boarding process for some was very painful. Another hang up I ran into was simply the navigation within the application. While trying to find a way to perform simple tasks, the amount of clicks I needed to perform were far too high for me. And after learning these facts, I wanted to make sure this did not spill over into my design.

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.

▶ High Fidelity - Capstone 2- Subscriptions - Google Chrome 2022-10-13 22-52-33.mp4

Reflection:

In conclusion, I was able to practice more advance features of Figma and put these things I learned into context. Creating an application design from scratch can be difficult to start but once the momentum started to gather I was able to end up with a fun and clean design. I am pretty proud of this work and I look forward to making another dashboard in the future.