Scribe App- UI/UX design for subscriptions
The UI/UX design case study on the mobile application Scribe. Scribe facilitates keeping up with subscriptions.
Overview
About the Project:
Scribe was a desktop-only website that helps keep track of subscription fees on, websites, apps, services, etc. My job was to create a mobile version of the website. Through the app, they are able to view and cancel subscriptions and view their spending report.
My role:
User Research, Visual Design, Prototyping & Testing
Duration:
March 1, 2021 - March 31, 2021
The problem:
Scribe is a company 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 Process
Understanding the context
User Research
Wireframing & Prototyping
User Testing & Evaluation
User Research
Understanding the Context
Given the time constraint of only 90 hours, I first started by creating a research plan so that I could plan how much time I would be spending on each phase. I then conducted a competitive analysis of the top four industry experts to gain insights on how other companies are solving the same issue and devise a solution that creates a competitive advantage.
The questions I set out to answer were:
-
Why do people trust the competitor’s product?
-
Why is their product in the top 5 solutions in the market?
-
What are the steps they follow to provide a solution?
-
What specific features did they design to solve the problem?
-
How do they sustain a competitive advantage over alternative options?
TrueBill
Bobby
Subscription Manager
.png)
Mint
Has the ability to cancel subscriptions for the user. They also give clear instructions for the user on how to cancel a subscription on their own. Most of the time it takes 1-4 steps to complete a flow. They can help lower and negotiate bills for a fee. Users can view their credit score for a fee. Standards are very consistent, users always know where they are on a page. UX writing is very stress-free.
Only used to track subscriptions. Users cannot cancel through the app, but they can add or delete a subscription. A competitive advantage they have is they have fully customizable payment cycles for subscriptions. It only takes one step to view subscriptions and two steps to delete a subscription.
Is almost the same as Bobby but they can store subscriptions on Icloud, they also offer an iPhone widget.
While mint is not in direct competition there are good elements that can be applied to solving our problem. To view upcoming bills it only takes 1 step which is to click on the notification bell, and from here users have the option to mark the bill as paid. There is also a nice comparison between how much is earned and how much is spent.
User Personas:
Understanding the user
I created Personas to represent user groups who will face similar problems. I based the user personas on the information from the company's brief where they outlined the user's behaviors, pain points, and needs.
Information Architecture
User Flows
I needed to identify the main paths users will follow to focus on the experience and needs of the users, so I decided to create user flows. Since the app's main focus is to view subscriptions, cancel subscriptions, and view upcoming subscriptions that are due, these are the flows I focused on.
Wireframing
Iterating User Interface
As I moved on to designing the interface of the application, I wireframed all the UI screens and conducted an initial user testing session.
User Testing & Evaluation
Testing Round 1
As I moved on to designing the interface of the application, I wireframed all the UI screens and conducted an initial user testing session. During the tests, I found 2 major problems and a few minor problems that could be easily fixed.
Testing
-
Once creating the low fidelity prototype, I conducted five guerilla usability tests.
-
I was testing three red routes:
-
viewing all their subscriptions
-
canceling a subscription
-
viewing upcoming subscriptions.
-
All tests were at different locations. Some at home, some at a gym, and after work.
Findings
-
Cancellation Process:
-
They were not sure what the difference was between cancel for me and cancel myself. Some thought canceling would prompt them to call the service or would serve to make a future cancellation.
-
-
Home Page:
-
Most were not aware that the expense history was all of their transactions. They thought it was their subscriptions. Some did not know what the graph stood for.
-
-
Security & Trust:
-
Most of the users wanted security before entering the app. They do not like that anyone could enter the app when there is vital information.
-
Recommendations
-
Cancellation:
-
Before starting the cancellation provide some information between the two options
-
Find better wording
-
Add ? icon to provide more information.
-
-
Home page:
-
Re-design the home page. Most liked the calendar view. That can serve as the home page. Since the graph is already on the results page it can stay there with changes, like adding labels.
-
-
Security & Trust
-
Add a code prior to entering the app.
-
Issues Found
-
Calendar:
-
For the most part users like the calendar but wanted the option to view previous months and upcoming months, so that they were able to plan.
-
Some users did not like the calendar and wanted it to be an option.
-
-
Home Page:
-
A few users felt there was too much going on. They were confused by “recently posted” wording.
-
Some would have preferred the overview to be a reports page. They felt like seeing what was due soon was too soon to view while viewing the app.
-
-
Minor:
-
Unable to discern which was the new reminder in the notification screen.
-
The image at the end of the cancellation process reminded them of Trump.
-
Found it difficult to plan not knowing when they will get paid.
-
Visual Design
Final Solution Prototype
After completing the first round of tests, I changed the wording for canceling a service and recently posted. I also added arrows to the calendar and took away some elements. Users no longer felt the screen had too much information but received mixed reviews for the home screen.
Canceling a Subscription
By changing the wording of the buttons for canceling a service, the confusion from users drastically decreased. Users also seemed very receptive to the help icon.