Mobile-First Responsive Design
Mobile-First Responsive Design
Mobile-First Responsive Design
Project Planning
Project Background
For this capstone project, I’ve chosen to create a responsive web design for an existing local business named "GoBeyo(u)nd". They focus on providing spiritual guidance through classes, one-on-one sessions, and live experiences.
Project Background
For this capstone project, I’ve chosen to create a responsive web design for an existing local business named "GoBeyo(u)nd". They focus on providing spiritual guidance through classes, one-on-one sessions, and live experiences.
Project Details
This is a capstone project for the course UX Academy, not a commercial project.
Project Details
This is a capstone project for the course UX Academy, not a commercial project.
Role
Role
UX/UI Designer with support from mentor (DesignLab Project)
UX/UI Designer with support from mentor (DesignLab Project)
Project Type
Project Type
Responsive Web Design
Responsive Web Design
Timeline
Timeline
August 2025
August 2025
Industry
Industry
Astrology and Spiritual Guidance
Tools Used
Tools Used
Figma, Canva, Zoom, Calendly
Figma, Canva, Zoom, Calendly
The Problem
Currently the business has multiple singular landing pages for events and classes, and a small site that is incomplete, thus clients are unable to book, pay, and/or sign up all in one site.
The Problem
Currently the business has multiple singular landing pages for events and classes, and a small site that is incomplete, thus clients are unable to book, pay, and/or sign up all in one site.
Research
Competitor Analysis
I compared the features, strengths, and weaknesses of the 3 top spiritual guidance services sites. Soul II Soul, Good Vibes Reiki Healing, SonicBeing.
To view full competitive analysis click on "Download" button below.
This analysis shows me that there are many sites where you can get everything in one in terms of spiritual guidance/services- booking, paying, and signing up to events. However these sites lack a robust user experience and are outdated. While these three competitors do have solid mobile sites overall, it is important that my design can further enhance the interaction with the user and site by providing an intuitive mobile user experience.
Competitor Analysis
I compared the features, strengths, and weaknesses of the 3 top spiritual guidance services sites. Soul II Soul, Good Vibes Reiki Healing, SonicBeing.
To view full competitive analysis click on "Download" button below.
This analysis shows me that there are many sites where you can get everything in one in terms of spiritual guidance/services- booking, paying, and signing up to events. However these sites lack a robust user experience and are outdated. While these three competitors do have solid mobile sites overall, it is important that my design can further enhance the interaction with the user and site by providing an intuitive mobile user experience.
Competitor Analysis
I compared the features, strengths, and weaknesses of the 3 top spiritual guidance services sites. Soul II Soul, Good Vibes Reiki Healing, SonicBeing.
To view full competitive analysis click on "Download" button below.
This analysis shows me that there are many sites where you can get everything in one in terms of spiritual guidance/services- booking, paying, and signing up to events. However these sites lack a robust user experience and are outdated. While these three competitors do have solid mobile sites overall, it is important that my design can further enhance the interaction with the user and site by providing an intuitive mobile user experience.
User Interviews
User Interviews
Research Goal
Research Goal
We want to learn what users value to see in the site, so that we understand how to improve the user experience.
Method
Method
1 interview with 5 participants via Zoom [30-45 min]
Target Audience: Current clients, passionate about spiritual guidance
Target Audience: Current clients, passionate about spiritual guidance
Results
Results
User Personas
User Personas
Affinity Map
Affinity Map
Prioritization and Roadmapping
Buisness Goal: To grow customer base, by providing a seamless and stress-free experience.
Feature Roadmap
Using a feature set template provided by DesignLab, the following features were mapped out and prioritized per user needs.
Feature Roadmap
Using a feature set template provided by DesignLab, the following features were mapped out and prioritized per user needs.
Feature Roadmap
Using a feature set template provided by DesignLab, the following features were mapped out and prioritized per user needs.
Sitemap
I mapped out how the important pages will be laid out- essentially a blueprint for content organization and user navigation.
Sitemap
I mapped out how the important pages will be laid out- essentially a blueprint for content organization and user navigation.
User Flows
I mapped the primary routes a user would take:
1. Booking a New Session.
2. Signing up for an Event.
3. Purchasing a Course (Online Module).
User Flows
I mapped the primary routes a user would take:
1. Booking a New Session.
2. Signing up for an Event.
3. Purchasing a Course (Online Module).
User Flows
I mapped the primary routes a user would take:
1. Booking a New Session.
2. Signing up for an Event.
3. Purchasing a Course (Online Module).
Wireframes
Low-Fidelity Wireframes
Low-Fidelity Wireframes
For these wireframes I tried to keep it as simple as possible while also being as informative as possible. I’ve focused on home screen, our services page, community forum, contact us page as well as the respective screens for the three task flows I am testing.
Book a New Session
Sign up for Event
Purchase Online Course
For these wireframes I tried to keep it as simple as possible while also being as informative as possible. I’ve focused on home screen, our services page, community forum, contact us page as well as the respective screens for the three task flows I am testing.
Book a New Session
Sign up for Event
Purchase Online Course
Low-Fidelity Testing
Low-Fidelity Testing
To encourage early testing, the following low-fidelity screens were tested in a high-level manner.
Research Goal: Find out how easily users can navigate throughout the wireframes and are able to complete the pre-determined tasks.
Method: 1 Interview 5 participants via Zoom.
Pre-Determined Tasks:
1. Book a New Session.
2. Sign Up for Event.
3. Purchase Online Course
To encourage early testing, the following low-fidelity screens were tested in a high-level manner.
Research Goal: Find out how easily users can navigate throughout the wireframes and are able to complete the pre-determined tasks.
Method: 1 Interview 5 participants via Zoom.
Pre-Determined Tasks:
1. Book a New Session.
2. Sign Up for Event.
3. Purchase Online Course
Low-Fidelity Results
Overall users found this site easy to navigate and intuitive.
The majority of users expressed the need of having access to two of the tasks directly from the hero banner.
Several users suggested having access to all three tasks from the navigation menu.
Several users suggested improving the messaging including verbs used when explaining the processes throughout the entire page- i.e. “Booking Process” and “Wait-list”,
Several users suggested including pop-up messages that provide contextual information explaining certain actions like “discovery call form”.
Low-Fidelity Results
Overall users found this site easy to navigate and intuitive.
The majority of users expressed the need of having access to two of the tasks directly from the hero banner.
Several users suggested having access to all three tasks from the navigation menu.
Several users suggested improving the messaging including verbs used when explaining the processes throughout the entire page- i.e. “Booking Process” and “Wait-list”,
Several users suggested including pop-up messages that provide contextual information explaining certain actions like “discovery call form”.
High-Fidelity Wireframes
High-Fidelity Wireframes
After reviewing the low-fidelity wireframes with users in testing, the following High-fidelity wireframes were created.
After reviewing the low-fidelity wireframes with users in testing, the following High-fidelity wireframes were created.
Add A New Feature
Per user feedback, it was important to use real images instead of stock photos.
Add A New Feature
Per user feedback, it was important to use real images instead of stock photos.
Add A New Feature
Per user feedback, it was important to use real images instead of stock photos.
Add A New Feature
It was also important have clear menu access to key tasks.
Add A New Feature
It was also important have clear menu access to key tasks.
Add A New Feature
It was also important have clear menu access to key tasks.
Add A New Feature
Added an explanation/context for discovery call.
Add A New Feature
Added an explanation/context for discovery call.
Add A New Feature
Added an explanation/context for discovery call.
It was important to display events in a concise and easy to read manner, considering many are in a hurry/busy.
It was important to display events in a concise and easy to read manner, considering users needs.
Per user feedback, it was important to provide sufficient information about the courses.
Per user feedback, it was important to provide sufficient information about the courses.
For the desktop version, I wanted to keep the design as similar as the mobile site version as possible to avoid confusion.
For the desktop version, I wanted to keep the design as similar as the mobile site version as possible to avoid confusion.
I also wanted to make sure the desktop version had the discovery call explanation.
I also wanted to make sure the desktop version had the discovery call explanation.
To further optimize the desktop version, I made sure the form was easy to complete in one screen- less steps for users.
To further optimize the desktop version, I made sure the form was easy to complete in one screen- less steps for users.
UI Design
UI Design
UI Design
UI Design
It was important to keep the branding with a color that is associated with astrology and spiritual guidance.
It was important to keep the branding with a color that is associated with astrology and spiritual guidance.
The UI design also needed to be clean and minimalist, creating a serene vibe for users.
The UI design also needed to be clean and minimalist, creating a serene vibe for users.
I wanted to assure that no stock images were used, and instead use real images of brand owner.
I wanted to assure that no stock images were used, and instead use real images of brand owner.
It was important to keep the branding with a color that is associated with astrology and spiritual guidance.
It was important to keep the branding with a color that is associated with astrology and spiritual guidance.
The UI design also needed to be clean and minimalist, creating a serene vibe for users.
The UI design also needed to be clean and minimalist, creating a serene vibe for users.
I wanted to assure that no stock images were used, and instead use real images of brand owner.
I wanted to assure that no stock images were used, and instead use real images of brand owner.
Testing & Iterations
UI Design
Usability Testing [High-Fidelity Prototype]
Usability Testing [High-Fidelity Prototype]
Research Goal: Find out how easily users can navigate throughout the wireframes and are able to complete the pre-determined tasks.
Method: 1 Interview 6 participants via Zoom.
Pre-Determined Tasks:
1. Book a New Session
2. Sign up for Event
3. Purchase Online Course
Usability Testing Results
Usability Testing Results
Revisions
Revisions
Add A New Feature
Revision 1:
Added visual signifiers to hero banner carrousel.
Add A New Feature
Revision 1:
Added visual signifiers to hero banner carrousel.
Add A New Feature
Revision 1:
Added visual signifiers to hero banner carrousel.
Add A New Feature
Revision 2:
Added approximate time ranges for response times on confirmation pages.
Add A New Feature
Revision 2:
Added approximate time ranges for response times on confirmation pages.
Add A New Feature
Revision 2:
Added approximate time ranges for response times on confirmation pages.
Add A New Feature
Revision 3:
Provided course breakdown in the course detail pages.
Add A New Feature
Revision 3:
Provided course breakdown in the course detail pages.
Add A New Feature
Revision 3:
Provided course breakdown in the course detail pages.
Prototype
Below is the interactive prototype which includes the three main tasks tested.
Prototype
Below is the interactive prototype which includes the three main tasks tested.
Prototype
Below is the interactive prototype which includes the three main tasks tested.
Final Reflection
Lessons Learned:
1. It’s okay to not do every single need your user wants or has.
2. Users want a stress-free experience when it comes to mobile sites.
3. Trust your instinct for prioritizing features, especially when it comes to working with existing businesses.
Future Opportunities:
1. Add notifications for users.
2. Conduct a card sorting exercise to target audience (min. 30 participants)
3. Implement downloadable certificates for course completion.
Final Reflection
Lessons Learned:
1. It’s okay to not do every single need your user wants or has.
2. Users want a stress-free experience when it comes to mobile sites.
3. Trust your instinct for prioritizing features, especially when it comes to working with existing businesses.
Future Opportunities:
1. Add notifications for users.
2. Conduct a card sorting exercise to target audience (min. 30 participants)
3. Implement downloadable certificates for course completion.
Ready to Achieve Your Goals?
I’ll help you reach new heights and stay ahead of competitors.
Ready to Achieve Your Goals?
I’ll help you reach new heights and stay ahead of competitors.
Ready to Achieve Your Goals?
I’ll help you reach new heights and stay ahead of competitors.