User interface | user experience | Visual development

Introduction

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. ScribeTrack created a desktop application designed to keep track of all of your subscription fees on websites, apps, memberships & services. However, this desktop application is not mobile friendly and therefore creates a drift from those who are more prone to using mobile devices. Adding a mobile-friendly version of their service would significantly increase ScribeTrack's market reach and add more potential users, creating more business and traffic.

As the sole designer for this project, I was responsible for all aspects for the creation of ScribeTrack. This included creating the brand name and visuals, as well as conducting research, developing, prototyping and user testing.

*Please note that this is a concept project.

Research & Discovery

User Research

I did two types of research to learn about the space and my target audience. For secondary research, I learned about the rise of mobile users, as well statistics on the average number of subscriptions a typical person had.

In order to validate what I learned in secondary research and connect it with ScribeTrack's goals, I recruited 5 people to interview with the following criteria:

• Subscribed to at least 2 or more services

• Aged 25+

• Owned and used a mobile device daily

In these interviews, I learned about people's billing habits when it came to paying for their subscriptions (auto-pay versus manual-pay), as well as why people had the subscriptions they had. Financial concerns and cutting down on useless subscriptions was also a subject that was brought up and how keeping track of their billing could help them become more financially responsible.

Key Findings

Some of the common themes that came up during my interview sessions included:

Having multiple subscriptions:

Interviewees were asked approximately how many subscriptions they think they had off the top of their head, and then were asked what those subscriptions were for. A majority of them had 3-4 subscriptions that were all pertained to streaming entertainment such as Netflix and Spotify, which seemed to be the popular category. Five out of five proclaimed that they were subscribed to multiple streaming platforms just to gain access to different types of entertainment. Interviewees expressed that since many companies are coming out with their own streaming services, it's hard to not be tempted to subscribe to another service just to get access to premium/ad-free content. For example, services like Disney+ and AppleTV create their own content that will never be aired on TV, and will require a subscription in order to watch.

Financial responsibility

Many interviewees also mentioned that having a lot of auto-billed subscriptions can pile up and start to take a toll on your monthly bills when you're not paying attention. Two interviewees were on the younger age spectrum and expressed that it's a bit of a hassle trying to organize how many things they're subscribed to and that seeing an amount for total spent each month may help them cut down on subscriptions they don't use. Due to auto-pay, interviewees generally don't think of how much they're spending monthly.

Hassle of canceling:

When asked about how they feel about canceling a subscription they potentially no longer want to be subscribed to, one user exclaimed that it was annoying because some of the companies they have memberships to require them to call over the phone in order to cancel. This makes it extremely inconvenient especially when it's easier to be able to cancel on your own online. Due to this, they've admitted to just continuing the subscription because they never have time to call to cancel.

User Flow

In order to understand how a user of our service (specifically a returning user) would navigate the application, I mapped out potential user flows/red routes that a user may take. Viewing this allowed me to figure out what functions are needed and anything I can do to simplify their journey to help them reach the end goal with the product.

Designing & Ideating

Sketches

With the brand and user research completed, I started the design process with paper sketches to quickly map out how I wanted the application to function. These rough sketches allowed me to jot down vital functions, as well as an idea of how I would like my screens to look. These would come to life digitally in the next step as my low-fidelity prototypes.

Visual Identity

Branding Identity & Design

For this product, I decided a straightforward name would be perfect as it's a tool that should be openly understood by young and old aged users. A wordmark logo was created, along with a monogram for smaller spaces. Blues and forest greens were popular in the competition and space, as well as in financial applications. Wanting to add a quirky, casual element to the brand, a monochromatic blue-hued purple palette (dubbed blurple) was used for the branding palette to stand out from the competition.

The brand's ultimate goal is to create an easy way for users to track their subscriptions and provide comfort in knowing they have parts of their financial lives in hand. We want our users to feel like we at ScribeTrack care about their financial well-being, but not in a corporate way like a bank or financial institution. We want to invoke trust and care into our brand, like a friend who wants to help them save money. With this, brand attributes were selected to help ScribeTrack stay true to its identity:

Trustworthy | Caring | Friendly | Casual

Low Fidelity Wireframes

Translating my paper sketches to digital wireframes allowed me to make better design decisions and to create a more seamless experience for the application. In this stage, I was allowed to see my sketches come to life and figure out what parts of the design could introduce the brand visual elements I had previously created.

User Testing

To validate my first round of designs, I did a round of usability testing with my low-fidelity mockups. I recruited 5 participants to navigate through the screens of a static prototype and tasked them with simple requests such as adding a new subscription to their dashboard, or canceling a subscription using the function in the app. A portion of my testing was remote, with the participant screen-sharing so I could monitor their actions and the rest were moderated in-person.

As I made observations with how the participants reacted to the functions presented, I would use these notes to further refine the screens. Some recommendations included:

• Adding a profile photo addition in the onboarding process (as the dashboard profile had a photo, but did not show where/how it was added).

• Changing "Reports" to "Summary" to make it more intuitive what that page was for. 

• Making the notifications section more noticeable and less hidden.

Some other suggestions were cosmetic, and were not taken into consideration due to the color-less nature of low-fidelity wireframes. Aside from this, the next step was to evaluate the top recommendations that could improve the user's experience and figure out if they would add value to the next round of prototypes.

Final Prototyping

User Interface

After taking recommendations from my user testing sessions, it was time to create high fidelity mockups and start implementing ScribeTrack's visual identity. The high-fidelity screens were built out using Sketch.

An additional round of usability testing was held with an additional 5 participants before the refined, final look presented here.

Final Reflection

ScribeTrack was an interesting project that allowed me to take an existing product and create an extension of it that could better serve their customer base. While the mock desktop application wireframes was given to me, the mobile application interface was completely made from scratch to best benefit the mobile user.

While designing, I tried to keep in mind familiarity as I wanted the application to be intuitive enough that anyone could use it. This meant pulling in familiar patterns, UI principles and more. My user testing helped validate this as no one had real trouble navigating my prototypes. This project taught me that I didn't need to be completely innovative and re-invent the wheel, and that sometimes implementing common patterns is a good thing if it means the user is successful with your product!

The next steps for ScribeTrack would be to add additional functions that could also benefit our target users. The competitor's analysis that was conducted in the process showed us what was in the product space and how our product could provide even more market reach with more capabilities.