Client:
Personal Project
Duration:
3.5 weeks (12.2021)
Type:
Feature Add for Existing App (iOS)
My Role:
UX Design
Interaction Design
Motion Design
Contributions:
User Interface Design
User Experience Design
T H E P R O J E C T
Enable users of the Streaks habit tracker app on iOS to allow them to increase the available amount of tasks beyond the twelve that were originally allowed. Applying real-world research into the addition of task count without increasing it and maintaining the same functionality. While keeping the new features as close as possible to the same interface design as the Streaks app.
Target User: Streaks App Users
Challenges
Can I increase tasks slots without simply just tacking on more available slots?
Solutions
Look into different methods of consolidation and grouping for other types of information. Discover how users might approach increases in the number of responsibilities they have in everyday life.
Is there a way to apply the addition of tasks while increasing productivity functionality?
Look into how productivity is handled for people who are having trouble maintaining habits and research real-world solutions for how to solve this problem.
How do I create a system that will maintain the integrity of the user and interface design?
Create all assets from scratch to see how they fit within the design and break down how every feature and function to ensure consistency.
T H E P R O B L E M
Life is Hard. Everything Sucks!
The Challenges of Sticking to Habits
I think it's fair to say, that everyone at some point in time has had trouble sticking to a habit that they want to do or at least know is good for them.
If this sounds like you, don't worry TOO much because there are about 64% of others who kind of are in the same boat as you are (I am one of them too - sometimes).
How Do You Stick To This Crap?
Developing Good (Or Bad, I Guess) Habits
Most of us are generally trying to improve ourselves - get a better job, get in shape, or anything that makes us happy. You accomplish that by simply sticking to something until you reach your goal.
The struggle of doing the thing(s) that will incrementally improve your life is being able to stick to your habits.
Doing Well For Yourself Is Cool
Analyzing Popularity In Self Improvement
It's absolutely no surprise that the self-improvement market was $11.6 billion in 2019 and is forecasted to grow to $14.0 billion by 2025. Within this market, you will find these self-improvement tools and experts filling the scene.
There isn't a "go-to" self-improvement solution that works for everyone but researching specific data, like how many of what app sold or how many YouTube views a person has - you can probably make the assumption of what person or product is delivering results.
Insight #1
People Have a Hard Time
It's pretty clear that most people have a hard time sticking to their goals. It's not an insult, it's just a fact. If people were good at doing what was good for them, we would be living in an ideal world and the self improvement market wouldn't be an $11 billion dollar industry.
Result: People need and want help in improving their ability to stick to their good habits. Adding a feature for a habit tracker that increases tracking capabilities is likely a desirable undertaking.
Insight #2
If There's a Solution, Then...
If self-help gurus and enthusiasts are everywhere and plenty, then there's probably a high demand for their help. And if they're offering targeted solutions, then it must mean there are people having targeted problems.
Result: If there are so many solutions and methods to the singular single problem of sticking to a habit to reach a goal - then creating another solution based on proven research may prove useful.
Insight #3
Skipping Initial User Research
While I generally believe that user research is invaluable and indispensable in most cases, seeing as this is a personal project - I'm going to forgo some of it in favor of big numbers and trust that popular content has value.
Result: Look for the most widely-accepted thoughts or practices in the self-improvement field to inform my design decisions. Additional research was from user reviews and comments from certain select websites or forums.
R E A S O N I N G
More Real Estate Please
Personal Pain Points As a User
One of the reasons I decided to do this personal project is because I love this app (not sponsored lol) for maintaining habits and tracking my progress.
Outside of that, the app did function a little bit differently when it was still in the 6.0 versions. There simply wasn't enough room for all the habits that I was trying to maintain and track.
Tap and Hold These Circles - Voila
How the Streaks App Functions
At a basic level, Streaks is a habit tracker that has many customizable functions that allow you to meet your personal goals. You finish a task, you log it completed, and it says good job (through a satisfying sound)!
However, there are many other wonderful, under-the-hood options that come in a minimalistic interfaced package. I even think the task count is purposely simplistic because trying to do too much can lead to analysis paralysis.
How Streaks App Tasks were in Version 6.0
When I started this project there were only two pages of tasks that you could utilize a page-flipping solution. As I write this, in January 2022 after taking a large UX break since early 2021, there has been a 7.0 update by the developers that fixed this pain point.
Since July 2021, their update now allows you to create 4 pages of tasks (24 total). So since I'm late to the party and you don't have a time machine - I've created a prototype giving you the 6.0 experience to test out. --->
I Kind Of Wanted The Practice
Breaking Down Interaction For Learning
Since I had taken a break for a while and since I was a bit rusty, I wanted to make sure I could still properly use Adobe XD. Along with breaking down the assets, I also tried to make sure that every page was visibly accessible in some way.
Overall, it was an extremely beneficial process to undertake because it did help me understand app development from another point of view and taught me how to apply new designs.
R E S E A R C H
Listen To What The Gurus Are Saying
Looking To James Clear For Advice
James Clear is the best-selling author of the book "Atomic Habits" with over 5-million copies sold worldwide. So it's fair to say that he probably has a good grasp on how to stick to and develop habits.
Some information that I researched and was applicable to implementing in Streaks were the concepts of "Habit Stacking" and "Identity-based Habits". There were a lot of other concepts that were great for increasing productivity but didn't apply to the Streaks habit-tracking functions.
Stacks On Stacks On Stacks (Habits)
How to Execute a Habit Stacking Feature
Habit Stacking is essentially building new habits though utilizing already existing habits by linking them both. As James Clear puts it, the habit stacking formula is:
After/Before [CURRENT HABIT], I will [NEW HABIT].
No, Not You Tyler Durden
Identity-Based Habits Make You Be Who You Want
As James Clear states about identity-based habits:
"The key to building lasting habits is focusing on creating a new identity first. Your current behaviors are simply a reflection of your current identity. To change your behavior for good, you need to start believing new things about yourself. You need to build identity-based habits."
If I want to be a fight club leader, I need to build those types of behaviors, like starting fights. I didn't have a clear picture of how to translate this, but grouping together tasks would make sense to me.
S O L U T I O N S
Going From Function to Interface
Figuring Out What Makes Visual and Sequential Sense
I needed to ensure the groupings would make sense to both Streaks users and the app itself. The visual design of Streaks is distinct in that you select one primary color and the rest of the app uses black & white at different opacities.
There are also no angular icons, only rounded corners for buttons and circles for most icon selections. I had to (or wanted to) come up with something that would work with these requirements.
Feature: Streaks Task Stacks
Translating the Habit Stacking Method
Originally, you could complete only one task, so I wanted a sensible development of adding more tasks based on habit-forming research. It functions exactly the same as normal tasks but after you finish one, then you can proceed to your next setup task.
I made it so you can create up to 3 tasks to stack, as I didn't want to allow users to stack an absurd amount that's unfeasible to finish. Your Streak Count (seen below the icon) is managed by completing your entire string of tasks, rather than each individual task.
Feature: Streaks Task Groups
Consolidating Similar Types of Tasks
Just like with any collection of things you might have, you will want to organize them by similarity. I made the Streaks Task Groups very basic - it's just a collection of similar tasks that are housed in a single task icon.
How and when you choose to complete your tasks will be up to you and each task has its own individual counter and data that you can view. It was a bit hard to decide if you were able to tell on the page indicators if a task was complete or not but chose to omit it for various reasons.
Differences Between the Two Options
Required Progression vs. Picking & Choosing
With the habit stacking concept, you MUST finish one task before you can move on to the next, this will give you a barrier to "completing" the task in your habit tracker.
So there is a required element in that type of grouping of tasks, while identity-based tasks groups are a little bit more free form for you to choose based on whatever you think your identity might be (it's just normal grouping).
T E S T I N G
They're Users, But Not Really Users...
Testing the App with Non-Streaks Using People
As this was a personal project, I didn't put user research or testing in the capacity that I would normally prioritize it. I still did user testing to ensure that everything made sense, but the people that I tested my prototype with were not Streaks users.
Although undesirable, testing still provided valuable because after demonstrating how the app previously worked, it gave them an outlook for feedback on my created features. Then I was able to ask questions or how progression was for them or if they did track their habits, would it be useful to them.
Streaks Stacks Task Creation
Streaks Groups Task Creation
You Never Know Till You Ask
Finding General Consensus With Visual Cues
During my iterating, I did find a lot of good feedback from user research in testing visual language when trying to see if certain indicators were understandable. Even though no one used Streaks, they all owned smartphones and knew how to navigate them.
I had various concepts that may have worked but in the end, I did end up sticking with the normal, tried-and-true circular page indicators. Not because it looked the best but because the people I asked all agreed that it was easiest to identify its use.
Making It As Grandma Used To
Creating Every Single Asset From Scratch
To ensure that I made something that was representative of Streaks's design, I thought it was important to learn every aspect of the app - so broke everything down from the smallest piece.
I looked at how each page functioned and re-created all the assets in Adobe XD. This was helpful to me in learning how the design worked in both the functional and visual sense and allowed me to practice creating a pattern library.
R E F L E C T I O N S
Lessons Learned
I Would've Tested With Real Users
I don't feel as though I made any significant discoveries since I was unable to test with real Streaks users. Every bit of information I got felt like they were more validations of my own thoughts, rather than genuine insights from others that I could apply to my design.
In the future, I want to pursue user research and testing a little bit more heavily and even start posting my questions online for personal projects, instead of being concerned about what people might think.
Previous Lessons Applied
Starting With A Robust Pattern and Asset Library
There were far too many times in the past when I started designing and creating haphazardly. And by that, I mean, not naming my files properly and not creating a design system from the get-go. People might not be able to see the difference that it makes in the final product, but it is a huge boost to my productivity and organization.
Since I had recreated all the assets from scratch, I was able to practice building a library and system that worked for me. And it saved me A LOT of time. Just by creating and categorizing my components, I could easily change states and designs when needed.
Final Thoughts
Enjoyable Experience in Learning Multiple Things
This little side project really helped me learn how to navigate and design an app from the ground up. Creating everything from scratch gave me additional practice in visual design and Adobe Illustrator. When I did design other's work in the past, it generally might have been with the aid of a UI Kit, such as Apple's. This time, by creating everything, I could really take a look at what was under the hood.
Completely dissecting an app was a perfect way to learn because I had to put everything back together. And since I fiddled with a lot of the app, I had an opportunity to get a deeper understanding of where things went and would sometimes even discover why a certain choice was made by accident. There were also a lot of steps I wish I would've taken when conceptualizing my ideas, like deciding beforehand on the architecture of task group creation, then getting to the visuals, not the other way around.
Overall, I enjoyed making this and am glad to be back in UX Design.
S P E C I A L T H A N K S
YOU (the reader!) for taking the time to go through this case study. If you have any feedback on what I've done or just want to talk shop, please feel free to reach out to me.
Shout Outs
Various Family (User Research)
Jaime Escalera (User Research)
Alex Milan (User Research)
Amber Poe (User Research)
Brandon Marr (Design Advice Friend and User Research)
