StoryLine
Mobile web application designed to help guide and motivate users towards setting realistic and achievable goals.
Problem:
We must learn from our losses so we can capitalize on our wins. Many goal setting applications do not provide an option to allow users to reflect in depth on how they are feeling through their achievement process. Our mission is to offer this feature through a user friendly dashboard to enhance overall goal success.
Summary:
Our mission was to create a goal setting application that would set us apart by providing a unique and personalized experience for our users. StoryLine offers the freedom to reflect, earn badges, share journey’s with friends and family, as well as save accomplished goals to always look back on.
My Role: UX/UI Designer
Team: 3 designers & 3 web developers
Project Timeline: 3 week sprint
(Prototype created on Figma)
(GIF created on CloudApp & Keynote)
Framework
Our framework guided us forward throughout the design process and required us to put our users at the front of every decision. We followed a Lean UX strategy and used Design thinking (IBM) methodologies to help us identify the right problems in order to create the right solutions for every task.
1. Learn Phase
We observed, learned and conducted research to find inspiration before creating our product.
Social Listening
We explored social media, observed what motivates people and researched why people tend to fail after setting goals for themselves.
We found that procrastination tends to be one of the main reasons why people fail. Our goal is to keep our users engaged.
@joerosado - Destroying procrastination is 3rd on his list of things a person owes to themselves.
@starter_inc - Procrastinating is 2nd on their list of self-sabotaging signs.
(Twitter)
Competitive Audit
We reviewed over 15 websites and applications to see what worked and what didn’t work well in the market. Some of the sites we looked into were similar to goal setting however we also took inspiration from different types of services including Acorns, Chase and more.
Bottom navigation (3-5 items) follows best practice to avoid overwhelming the user.
Drop down to include goal categories could be better displayed through a chip button system for easier readability for users.
Clean look and feel with color theory to express wellness levels and a weekly graph to give a visual of how your feeling on a particular day.
Strong value proposition in hero and limiting choices in global navigation to prevent cognitive load (Hicks Law).
Law of Common Region best practice - Background of elements for each week help define that common region for users.
Survey
A low effort and cost efficient way of obtaining a large amount of information from our target group of people.
We received 154 responses in 48 hours and received valuable input:
On a scale of 1 to 5 (1 being never, 5 being always) only 34% of our surveyors reflect on their goals.
46% of our surveyors would like access to a digital product that will track their goals and 41% would be open to the idea.
63% of our surveyors lose focus when trying to achieve their goals.
(Created in Google Forms & Keynote)
Data Analysis
We looked around for data across the internet that related to our product and found some interesting statistics. This set the tone for the Define phase where we came up with some assumptions.
These quantitative statistics proved there is a need for our service.
80% of the population does not set goals.
(goal setting stat - google)
People who write goals are 50% more likely to achieve than people without goals.
(goalband.co.uk)
Focus Group
We interviewed 8 members to gather insight towards how people think and feel about our service by listening, observing and recording their interactions.
7 out of 8 participants believed they would benefit using our service and 8 out of 8 believed journalizing their own reflections would increase engagement as well as goal achievement stats.
“I have a tendency to start but not finish. Being able to write down my ideas and thoughts could lead me towards sticking to the plan. ”
“There’s so much to do, I can easily forget. Reminders would help but so would having a feature to reflect on my progress.”
2. Define Phase
We were able to identify our goals, objectives and strategy. We also assessed who our product users were and the journey they embark on.
Assumptions
We used a Lean UX approach to shift away from what we believe is required in our product and came up with a few beliefs and expectations based on what we know about our users.
Beginning the Lean UX process
We used our assumptions as a first step guide towards creating a starting point before designing our product.
(Created in Pages by Apple)
Persona
We went back to our desk research and survey data to identify 3 perfect personas for our services. Our personas are an example of what our target audience represents. Chris Holland who is patient but not used to using technology, Louise Travis who is ambitious but tends to become frustrated with multitasking and Nick Miller who is very busy and impatient but has the need to reflect on failures and successes.
(Created in Sketch)
User Journey Session
Taking our personas, we curated a visual representation of our users experience with a group of people that helped identify potential features for our product. No idea is ever a bad idea and every piece of information we gathered became valuable.
Our goal was to showcase how a user may feel through each phase of the goal setting process from start to finish. We wanted to empathize with our users pain points and create a list of features that would assist each user down the funnel of creating and achieving their goal.
(User journey and MVP created in Miro)
MVP (Minimum Viable Product) Session
We conducted an ideation session with our team to identify our KPI’s (Key Performance Indicators) to generate ideas on what features to prioritize for our MVP session with web development.
Goal: Identify our top 3 KPI’s as a team.
How: Each member of our session was given 3 colors and were instructed to place a sticker on each KPI based on priority. (Green = highest priority, black = moderate priority & orange = low priority.)
Takeaway: Goal progress was prioritized above the # of account users. Our group determined that our product would show more success through user activity of the application versus the number of registered users.
Value vs. Effort Matrix
After deciding upon our KPI’s and potential features, we met with our web development team to discuss which chosen features would provide highest value compared to effort. With their help, these features were placed on the chart and prioritized as must have, should have, could have and won’t have.
Sitemap
We created our information architecture to showcase how each page will connect to one another. This is the birds eye overview of our design process.
(Created in Sketch)
UX Strategy
We formulated a set of principles that pushed our ideas towards the design phase. It was the culmination of all of our findings to support our forward thinking.
Our vision of the digital product
Our goal was to transition pain points and negative experience to a positive creation that will keep our users engaged and excited.
(Created in Pages by Apple)
3. Design Phase
We collaborated to create and build our ideas. We welcomed all input and included what we learned and defined into our design process making many iterations along the way to find the right solutions to our problem.
Hand Drawn Sketches
A great way to save money and time to test early ideas. A quick visual of multiple design concepts.
Wireframes
The blueprint to our design process. We tested, iterated and tested again many times over until we created the best digitized screen for each page. As a team we created over 150 wireframes.
Homepage (Goal Type module) Iteration
Homepage (Goal Achievement module) Iteration
Homepage (Testimonials module) iteration
(Created in Figma)
A couple examples of our final wireframes
Global navigation adheres to best practice of 3-5 items.
Primary CTA to guide users down the funnel of creating a goal.
Carousel best practice from Nielsen Norman - no more than 3-5.
Progress bar to increase user satisfaction and boost respondent engagement.
Luke W. forms best practice - 1 column field with left aligned text.
Mood Board
Our visual style. Purple and turquoise became a theme throughout our mock ups as these two colors create a feeling of power, elegance, wealth, good luck and creativity. Perfect motivation for accomplishing your goals.
(Created in Figma)
Mock Ups
High fidelity designs that showcase visual elements such as typography and color.
Homepage mock up accessibility and colorblindness decisions (9 versions)
(Created in Figma)
Color, typography and hierarchy transition from wireframe to mock up (homepage)
(Created in Figma)
Final Mockups
A birds eye view of our final screens for StoryLine.
Prototype
Style Guide
Used to create consistency throughout with all elements of our product.
4. Experiment Phase
After creating our design and implementing our thoughts into a digital flow, we turned our focus towards rapid experimentation and measurement, also known as the “Lean Startup” approach to find the best solution for our product. We were able to manage a lot of this remotely by connecting with others through Zoom calls during the Corona Virus pandemic.
Test Plan
We conducted guerilla testing and identified key tasks for users to perform in order to obtain valuable feedback.
Testing Takeaways
I had our guest user show me how she would create a goal and access the user profile dashboard from the homepage. I noticed a bit of confusion through this process as it wasn’t as seamless as we’d hoped for. This told us we needed to go back and adjust our screen transitions. We add a progress bar to our sequential pages which created a smooth flow.
IXD (Interaction Design)
Micro interaction samples from some of the transitions we created. These were created in Figma when we began to prototype our screens .
Selected state (sequential pages)
We aimed for a smooth transition between screens and after a few different iterations and user feedback, we realized we should remove the extra step of having our users select a category then select a CTA to transition to the next page. Adding a selected state and removing the CTA created a seamless transition between pages.
Selected state (profile)
Selecting a daily task from the profile page needed more visual appeal than just an ordinary filled chip. We wanted to include a checkmark that would “pop” once the daily task chip was selected so we added shadow to this effect.
Carousel (homepage)
We wanted to showcase our testimonials on the homepage but we didn’t want to crowd the module. Creating a carousel and sticking with Nielsen Normans best practice of no more than 3-5 testimonials was our best approach.
(Created in Figma)
5. Iterate Phase
The most important step in creating our digital product. It allowed us to continue to obtain feedback which was critical when making improvements to our almost completed design.
User Testing
We gathered family, friends and volunteers in person and remote to test our application. We gave them a couple of tasks to complete and we watched, listened and recorded their interactions as they explored our design.
Task: Create a goal from the homepage (6 users)
Results: 6/6 were able to create a goal and access their dashboard.
Task: Obtain feedback on homepage layout
Results: We decided to change the design of two modules within the homepage which created a better flow and understanding for our users to create a goal.
Task: Obtain feedback on all screens from volunteer user
Result: Our original theme began to be questioned. We wanted our users to create goals that would become their unique story. Our original concept was to include a library of goal stories in the user profile however our design direction was a bit confusing and overwhelmed some users. We then knew we needed to change some of our design tactics.
The Pivot…
The user profile began to take on a lot of criticism on how the design would look if we included a library feature and treated goals as books & stories. It began to overwhelm some users because achieving goals are already challenging enough and this could become a “melting pot.” We decided to change our design with 3 days left during the sprint which turned out to be a great success thanks to user testing
6. Launch Phase
Our design was now complete and ready for the development team.
Hand off w/ development
We organized a google drive folder and sent our development team a hand off sheet that included links to all of our projects assets. We then met with our team and walked them through each link to ensure accessibility.
Flows
Visual representation of the different pathways a user can take.
Flow
Completing a daily task.
(Created in Overflow)
Product with Code
Our web development team sent us some visuals of the design with code.
