CAFFE YOGA REDESIGN
ABOUT
CAFFE YOGA is a yoga studio in Tustin, CA. Its website needs redesign in the navigation bar, information accessibility, user friendly, and UI section.
PROJECT REVIEW
-
Problem
Caffe Yoga’s website has lack some important information.
-
Solution
Focus on improving site navigation and user-friendly interface to increase user trust and engagement.
RESEARCH GOALS
-
Clean, non-confusing online version.
-
Decrease site confusion and frustration
-
Easy navigation with a visually clear schedule.
PROJECT TIMELINE
Project Duration
8 Weeks 15+ Screen
Tools Used
-
Figma
-
Adobe Photoshop
-
Adobe Illustrator
-
Marvel
-
Miro
-
Google form
-
Google Doc
-
Excel
DESIGN PROCESS: Research/ Design/ Test
-
Research (Conducting user research/ Heuristic evaluation/ Survey/ User interviews/ competitive analysis Defining Problem/ Persona/ Context Scenario/ Key path Scenario/ Storyboard & Sketching/ Task flow/ User flow): (Week 1 to 4)
-
Prototype/ Design (Site map/ low-Fi/Mid-Fi Wireframe/ Interface design with the prototype) (Week 5 to 7)
-
Test/Iteration (testing the app with various types of usability tests and iteration it many times with users’ feedback) (Week 7-8)
RESEARCH PROCESS
Emphasize
-
Heuristic Evaluation
-
Empathy Map
-
Persona
-
User Stories
-
User Journey Map
Design
-
Problem Statement
-
Hypothesis Statement
-
Value Proposition
Ideate
-
Competitive analysis
-
Sketch
-
User Flow
-
Story boarding
-
IA
Prototype
-
Wire-frame
-
Low-Fi Prototype
-
Mock-up
-
Hi-Fi Prototype
Test
-
Usability Test
SURVEY QUESTIONS AND STATISTICS (35 USERS FILLED OUT THIS SURVEY)
The survey was divided into two parts: part one contains 7 questions and part 2 contains 8 questions. Part two was more detailed and directed to yoga and needed to be filled with yogis or those who like to be.
Survey/ Part One
Survey/ Part Two
AFFINITY DIAGRAM
20 USERS PARTICIPATED IN THIS INTERVIEW
Card Sorting
Heuristic Evaluation
Visibility of system status
​
By opening this part of the home page, there was a video icon and a circle around it, which made a confusing situation about the next step.
Match between the system and the real world
​
It was difficult to make a connection between the words and the icons that the website uses to describe. For example, it used a bell icon to “become a Caffe Yogi” or a briefcase icon for “class schedule”
User control and freedom
​
There were no undo or back buttons when I entered the wrong page or returned.
Consistency and standards
​
Different pages follow different rules, colors, and even titles.
Error prevention
​
When I clicked to schedule a class, the website did not double-check with me and it directly goes to the page and scheduled it.
Aesthetic and minimalist design
​
There were much useless text boxes and in my point of view no aesthetic in the websites’ colors and icons. Also, I could not find minimalism on this website.
Help and documentation
​
This website does not have any help center but a part for contact which does not work.
Competitive Analysis
User Problem
Users were overwhelmed with lots of information and it was difficult to find their direction. They need a direct path to assist them in finding what they exactly were looking for at the moment they opened the website.
Solution
Designing a categorized navigation bar and a specific vivid part for searching and browsing through the website is one of the best solutions.
Also, redesigning the path of each navigation and each page could give wide and specific ideas to the users and not let them to lost in the website for finding their class pieces of information or a yoga structure.
User Persona
Empathy Map
SAYS
I want a nearby yoga class with an option to visit each class virtually through their website.
Think
-
How to save time
-
How to access and visit details of each class online.
-
How to reserve and register without going to the location.
Does
Search a lot in Googles and ask friends for a great yoga class near her new location.
Feel
-
Tired of searching a yoga class with a good website to cover all class and studio information
-
Depressed because of staying at home during her maternity and needs to do some meditation in a group class.
Task &User Flow
Low-Fi Wireframes
Hi-Fi Wireframe
.png)