.png)
Subs' Umbrella: Case study | Branding | Product Design
Mobile app development and creating a Branding, Visual/UI system for the company.
APR - MAY 2023 | PRODUCT / VUSUAL / UX-UI DESIGNER
A company has a product that keeps track of all of users' subscription fees, but they didn’t have a mobile version of their website. The problem for me was creating a mobile app for tracking subscriptions. And finally, I developed an app that allows anyone to get a comprehensive view of their spending on subscriptions and control them.
In the process of creating this product, I implemented these types of projects
-
Industry Leaders Research and Secondary Research
-
User Research and Research Reports
-
Sketches, Wireframes, User flows, Information Architecture
-
Prototypes, User-testing, and the Final Product.
I used pens and paper as well as Figma in the Design stage of product development.
Introduction
Often people have problems keeping track of spending for all the services they subscribe to. So, money is often deducted when people forget to turn off an unwanted subscription.
Our company already has a desktop-app website that helps people control their spending. And we decided to create a mobile app as well, because it will contribute to increased control over charges and significantly increase our market reach.
I led the project and worked on all aspects of the app, including its UI and UX design.
Research
Industry Leaders' & Secondary Research
Based on data from the Industry Leaders Analysis and Secondary Research we know that dashboards are a powerful way to keep track of important information, including financial information such as subscriptions. Due to that, people get the opportunity to control their spending on subscriptions at any time.
Therefore, key points in the process of creating a dashboard are (they’re also reflected in the Research Synthesis):
-
Users will expect to see information about their current status, any urgent information, warnings or alerts about spending.
-
As a designer, I should always start with a high-level overview and provide easy paths for my users to increase the level of granularity. This is especially important because attention is a limited resource.
Interviews
In order to study the needs of potential users, I used the main criteria of them (provided by the Project Manager) and conducted a design screening survey to find our target audience to participate in a user research survey, interview and testing.
Main Criteria of Target Audience:
-
Over 30 years of age
-
They use phone and desktop equally
-
Middle class
-
Trying to be more budget-conscious
After I found our target audiences for user research, I started to design questionnaires to understand the following questions:
-
How to design the most effective dashboard for a mobile app?
-
How to design the most intuitive interface?
Affinity Mapping
The information I received from user interviews allowed me to create Affinity Map (page 4) and determine 5 main areas that are important for users who control their subscriptions charges:
-
Key Subscription Problems
-
Ways of Organizing Subscriptions Info
-
How to Track Subscriptions charges
-
Notifications Findings
-
Main Features that Subscriptions App Should Have
Ideation
MVP & User Stories
Using the project manager’s requirements, Affinity Mapping synthesis, and the User's hat to make a main solution, I wrote the main user stories that served as the basis for the future MVP:
1. As a current user, I want to see all of my subscriptions in one place so that I can get a comprehensive view of my spending on subscriptions
2. As a returning user, I want to unsubscribe from a subscription so that I can reduce needless spending
3. As a consumer, I want to be notified if any of my subscriptions are about to be auto-renewed so that I can make a decision about if I want to renew the subscription and continue spending money.
The MVP was defined as the following:
-
Signing Up
-
Connecting Bank’s Account
-
Subscriptions View
-
Unsubscribing
-
Setting a notification
At this point, the main tasks for the app were identified.
Then, I went back to review the information I had gathered while studying industry leaders. Early investigation of these apps allowed me to focus on the nuances of building the information architecture for my app.
Sitemap & User flows
Once the key app sections were defined, I started to create a detailed Sitemap to serve as the guidance to design user flows:
Sitemap
Now the user flows have become obvious:
User flow 1: Signing Up
Scenario 1: a first time user wants to register, connect their bank account and see their subscriptions
Scenario 2: a current user wants to sign in and see their subscriptions
User flow 2: Subscriptions View
Scenario 1: a current user wants to sign in and see their subscriptions dashboard
User flow 3: Unsubscribing
Scenario 1: a current user wants to unsubscribe from a useless subscription
User flow 3: Setting a notification
Scenario 1: a current user wants to set a notification of their auto-renewing subscription so they can make a decision about if they want to renew it or not
Sketches & Wireframes
And... I have tried to visualize all my collected conclusions and selected thoughts :)
It was a little difficult for me to remember several important things at the same time:
e.g., the solution must combine the financial actions, so the user agreement must be included. Also, it was my first attempt at drawing the process of connecting a bank account.
_edited.png)
However, during a call with a project mentor, I discovered that the sketches of my app include complex functions for a bank account. Reviewing the project requirements helped me recognize that the main goal for the app is users' interaction with subscriptions, not with a bank account.
​
So, I remembered it when built wireframes for user testing.
.png)
When I asked users to go through tasks in the First Round of User Testing, they took it very seriously. Despite the fact that the app was received with great enthusiasm, a number of shortcomings were identified.
The most critical of them are:
-
Non-intuitive way to set a notification with a required action for an auto-renewing subscription
-
The user does not feel data safety entering banking data
Prototyping
Since my goal for that moment was to create high-fidelity wireframes, I needed to clarify the direction of the app's visual style that respect to the brand attributes.
Creating Style Guide
Based on the information provided by the project manager, “Brand personality — a trusted friend who is helping users save money”.
Brand attributes:
-
Trustworthy
-
Caring
-
Friendly
-
Casual
Testing
After thorough work on improving usability problems, inaccuracies, and mistakes in UI, I presented high-fidelity wireframes for the Second Round of User Research:
However, the results of the Second Round of User Research showed me that the iterations of the app are not finished yet.
I found 6 critical issues and 10 major ones!
The main directions of them are:
-
Lack of intuitiveness in UI elements
-
Wrong choice of colors
-
User overload, visual noise
… I was surprised but still interested in that! :)
Final Designs
At this stage, I was able to implement the findings from the second round of testing into my designs.
Also, I had a call with the project mentor, and this additional review allowed me to polish some of the nuances in the UX/UI of my app.
Thus, the significant changes are:
Redesign:
-
Adding a subscription manually page
-
Settings page
-
Notifications settings page
-
Expenses statistics visualization UI card
Created:
-
Expenses Report page
-
Tool tips
.png)
Conclusion
Creating a Subscriptions Dashboard was a completely new problem for me. Because the financial area was the main one for this project, and I had not worked with it before. So, choosing this particular project was a personal challenge for me and a great achievement when I finally completed it!
It's also important to me that:
1. I determined the basic nuances of creating an analytical dashboard because in the future I would also be interested in designing them.
2. I have learned the features of user interaction with dashboards and now I can apply the accumulated knowledge in other projects.
3. I found a way out of the difficult situation (in my opinion) with the choice of colors. Now I have more skills in working with that, and I'm very happy about it.
Undoubtedly, I was pleased with the results of the testing sessions. And, suddenly, I was pleased with how many usability issues were found in user testing sessions. After all, this is the efficient way I can improve my design skills, right? :)
To see the final prototype click here
.png)