Stretching as easy as 1-2-3
introducing Stretch It Out...
Home Page Design Choices + Best Practices
But How?
The Framework
Following a design process or framework is key to ensuring that the user is kept at the center of the design. It is a process that has no end.
Each product iteration is just a continuation of solving a problem for the user.
Competitive Audit + Best In Class
We looked at over 50 websites to learn a little more about what kind of stretching websites were out there. Who were the best in class?
How were these websites sharing content and knowledge about stretching? What were some user needs and trends in the market?
Audit Take-A-Ways
- We were inspired by Yoga International and Movewell when creating our Category and Profile pages because of the way they displayed their content.
- Our overlay filter is a feature that you can also see on Zillow.com.
- Websites like Peloton and Fitbit set the tone for trends in the health and fitness space.
Social Listening + Data Analysis
This desk research reveals what people are thinking and saying about stretching and the benefits of stretching. This data is used to validate
the importance of this project and how beneficial it will be for future users.
Direct quote from Harvard Health Publishing:
Google Forms Survey : 156 Responses
The survey is a great tool to use for field research because it is a low effort and low cost way to receive feedback and insights.
It helps to define who your user is and what the user would like to see from the product.
Survey Take-A-Ways
Personas
Through our survey we were able to identify two types of personas that would represent our target audience. They would help keep
the project on track by always keeping the user, their needs, wants and pain points, at the center of the design.
User Journey
The user journey helps identify the user’s needs to create features that will enhance the user experience. The session is done to analyze
what users like Amy and Peter will feel while completing tasks within the product.
Defining Key Performance Indicators + Most Viable Product (MVP)
Using Miro, we were able to conduct the KPI and MVP session to identify what would be measure our success from the business
side and what could be completed with developers based on the time allotted for the project.
Flow Chart
Flow Charts are used to help designers and developers figure out how the user will complete a task. This helps to see the
path the user must go through and how those pages will be designed and developed.
Information Architecture - Sitemap
With the MVP defined, the sitemap helps to see the pages needed and to understand where they lead to. It's time to kick off the design!
Hand Drawn Sketches
Sketching is a quick and cost effective way to design with a simple piece of paper and a sharpie. Here you can be creative
with your ideas on what the product should look like but with an understanding of our target audience and their needs.
Wireframes
Wireframes in black and white to outline the product and features.
Designed in collaboration with my partner, Milica Stojic
We tested our wireframes and implemented
our user feedback to finalize the wireframes.
Find a Stretch Flow Prototype
Here we see our final wireframes put together in a "Find a Stretch" flow prototype
Moodboard
Moodboards are used to create the look and feel of the design. We add color, we get inspired by images
and we determine button styles, icons and fonts in this process.
Color Theory : Green
We used color theory to decide what colors to incorporate in the design.
We went with accents of green because green is the color of nature, balance and harmony.
Greens are energizing and give a sense of renewal.
UI Exploration on Home Page Wireframe
As we tested our wireframes we also started to test how our moodboard could be applied to our wireframes.
We explored a couple of options and we ultimately went with the last one.
Mockup User Testing
Here we are able to see how the user maneuvers inside the product. The user provides feedback on what
they see and tests the features included in the design.
Iterations
We went through 10 rounds of testing and we learned that users kept experiencing pain points within some areas.
After each testing session we would go back and design new versions based on user feedback.
Category Page Pivot
User testing showed that the human anatomy image was confusing or that users did not know anything was further down the page.
It was also getting lost next to the other categories. We iterated on this feedback and came up with a new version that took into account both personas.
Hi - Fi Onboarding Mock Ups + Forms Best Practices
Hi-Fi Final Mockups
Designed in collaboration with my partner, Milica Stojic
Carousel IXD
3-5 items in a carousel following UX best practices
Overlay IXD
The time filter in the overlay for Amy who wants
to go directly to 5 minute neck stretches.
Slide In IXD
A preference page was a must so Amy could choose between levels, time and how often she wanted her daily reminders.
Click IXD
Visual feedback of the system status so the
user is clear to move on to the next task.
User Flows with Annotations
Design System Manager
The DSM is used to catalog colors, typography, components and icons in the design.
Inspect Files In Figma
Now it's even easier to hand off files with the Inspect tool in Figma.
The CSS is at your fingertips and exporting assets right from your source file.
Development Work In Progress
Here we see what web development has started to build from the hand off files delivered.
Next Steps
Now that we have completed our Stretch It Out MVP, we will be finding more ways to get people stretching on a daily basis.
Here are a few ideas for Stretch It Out 2.0.
- An events page so that we can start holding master classes with influencers who would like to host sessions on our platform.
- A proper anatomy page that talks about the muscles and ligaments in your body and how to properly stretch each of them.
- Designing and building out the Stretch It Out APP
Thanks for reading! Stay tuned for more exciting projects coming soon.
Please reach out with any questions to mvelez0223@gmail.com. Have a great day!
