Project:
Grow With the Flow Dedicated app and Responsive Website
Role:
Research Designer, Visual Designer, Interactive Designer
Duration:
Summer 2022 July - September
Project Vision
To create a dedicated app and responsive website that will help aid users who experience anxiety and stress.
Challenges
1) Add a feature to track habits and create reminders.
2) Add a feature for guided meditation and other videos.
3) Add a feature for communicating and meeting up with others.
User Research & Understanding
I interviewed a sample of five participants when conducting research for this project.
Anxiety/Stress Apps
Using apps to alleviate anxiety and stress in your life is common, and 45% of participants I interviewed agreed. They stated that they use at least one app to help with their anxiety and stress.
Deeper Understanding
Mental health overall is becoming more talked about and important. 75% of the participants agreed that needing certain features like guided meditation, tracking habits, and communication was important to their mental health.
Meet The Users
Primary
Name:
Riley
Age:
35
Family:
Wife, son
Occupation:
Surgeon
Riley is a mother who works full time, who needs to be able to be in the moment and enjoy their time with friends and family, because when things don't go as planned or there are last minute changes they get anxious.
Secondary
Name:
Shawn
Age:
35
Family:
Wife, son
Occupation:
Truck Driver
Shawn is a busy student who works full time, who wants to be able to make new friends, because the idea of meeting new people makes them anxious.
Site Map
Starting off with a site map allowed me to have a quick layout of how the websites information will be organized.
Dedicated App
Paper/Digital Wireframes
(Dedicated App)
The goal throughout this process was to create as many ideas as possible based off of the research done. It was also to try and create a clean and clear cut design that users could use easily.
Paper/Digital Wireframes
(Responsive Website)
The goal throughout this process was to create as many ideas as possible based off of the research done. It was also to try and create a clean and clear cut design that users could use easily.
Low-Fidelity Prototype
(Dedicated App)
This prototype shows how the grow with the flow app would function.
Low-Fidelity Prototype
(Responsive Website)
This prototype shows the different possible features and how the responsive website would function.
Usability Study & Findings
For this project an un moderated usability study was conducted to figure out if the usability of the app was quick, simple, and easy to use.
Round 1
-
Users thought the picture gallery on the front page didn't fit the rest of the website design.
-
Users thought that some of the pages with the videos seemed too crowded.
-
Users thought the layout of some pages were too boxy.
Round 2
-
The users found that the layout was easy to follow and not too crowded.
-
The pictures were easy to see and understand.
-
The information was nicely organized
Challenge One
The goal for the first challenge was to incorporate a way for the user to track habits. this was done by adding feature where you can add habits or create your own. Where you are able to manage the perimeters of the habit and set reminders as well.
Challenge Two
It was very important to add a feature for guided meditation, workouts, and guided breathing techniques. this was done by adding a video section.
Challenge Three
An important feature to add was a feature for connecting with others. I came up with a way to create events and join them, chat rooms, and a way to add friends on the app and website.
High-Fidelity Prototype
(Dedicated App)
The goal throughout this process was to create as many ideas as possible based off of the research done. It was also to try and create a clean and clear cut design that users could use easily.
High-Fidelity Prototype
(Laptop Website) (Mobile Website)
The goal throughout this process was to create as many ideas as possible based off of the research done. It was also to try and create a clean and clear cut design that users could use easily.
Accessibility Considerations
1
The use of properly labeled buttons, the overall consistency of the app, and responsive website having a good information hierarchy is how I considered the use of screen readers in my design.
2
Making sure that there is a contrast in colors and text size throughout the app and responsive website was used to make it more accessible.
Style Guide
Takeaways
I learned so much from this project! I loved exploring different animation styles while prototyping within the website and i enjoyed designing from the dedicated app first to the responsive website. It was interesting designing for different platforms. I can't wait to implement what I have learned from this project into future projects going forward.
Contact Me!
Searching for a designer that shows passion in their work? Interested in working together? I'd love to hear from you!
haleyz1@hotmail.com | Tel: (414) 336-8711