SunFit321
Redesigning a responsive website for a health and wellness program.
My Role: UI/UX Designer
Project Type: Responsive Redesign
Toolbox: Figma, WordPress, Google Forms
Timeline: October 2022 - January 2023
Overview
Background
SunFit 321 is an active lifestyle that was started by Dr. Reuben Chen. This program introduces three powerful Sunrider products to help customers reach their optimal health and wellness goals.
Problem
The current website is fitness focused, very outdated, and in need of a serious revamp.
Solution
Conduct UX Research and design a new responsive website that is product focused, more interesting, and is easy for customers to use.
The previous websites
very outdated —>
<— fitness focused
Research
I began my research by studying all the current SunFit 321 content and interviewing customers who have used the program and products in order to fully understand the lifestyle. Analysis of Sunfit321 competitors helped me to understand what other health and wellness companies prioritize. I surveyed 21 respondents about their thoughts on nutritional wellness and what would encourage them to purchase wellness products online.
Findings
Other health and wellness companies prioritize tips from licensed doctors, informational videos, and extensive product information.
Although most respondents (76.2%) have not participated in a nutritional wellness program, most (85.7%) have purchased nutritional wellness products and would be willing to participate in a program that utilizes their favorite products.
Most concerns centered around lack of information and personalization.
Business Goal
Design a product focused website to drive product sales!
Target Customers
Individuals who are looking to lose weight and achieve their health and wellness goals.
Personas
During my research, I was able to analyze and identify two primary user groups and connect their needs, frustrations, and motivations.
User Group 1 | The Health Enthusiast
Ex. Someone who is well versed in the health and wellness space and already has experience participating in health related programs.
Goal - Maintain current physique, compete with friends
User Group 2 | The Wellness Beginner
Ex. Someone who has not prioritized their health in the past and is looking to change their lifestyle.
Goal - Lose 15 lbs and feel better overall
Key Takeaways
The current SunFit321 website is underutilized primarily because of unclear instructions, lack of information, and out of date UX/UI. Users are often discouraged from participating in the SunFit321 program because they do not understand how it works and what is in the products, resulting in dissatisfied customers. Although both users have specific end goals, they share common frustrations and needs.
Frustrations (lack of the following) | Needs (the following)
Product explanation + Ingredients
Benefits
Personalization
Convenience
Doctor’s Advice
Product Development
I created this sitemap keeping in mind the research insights. I incorporated only the most important features such as a page dedicated to product details, and ensured that the website was simple and easy for users to understand and find the information they need.
This user flow depicts how someone might explore the SunFit321 website. The end goal is always for the user to go to the Sunrider ecommerce page so that they can ultimately purchase the SunFit321 products and participate in the lifestyle.
I created my low fidelity wireframe sketches in order to visualize my thoughts for the new website. I wanted to make sure these quick designs were highly simple and functional. Creating these sketches helped me explore different design patterns and layouts that would optimize the user experience from the homepage to the ecommerce page.
Team Collaboration
I met with the Sunrider Marketing Team to present the vision and ideas that I had for the new SunFit 321 website. I delegated tasks to the team to help me with different aspects of the SunFit 321 project ~
The copywriters will help develop the content for the website and fillable PDF
The photography team will conduct the product photoshoots for the site images
The video team will create the SunFit 321 informational video
The graphic design team will edit photos, create visual material, and provide the design system
The IT team will set up the company WordPress account
The legal department will review the final website to ensure compliance and suitability for publication
Below are some product photoshoot images that I helped create —
Design System
Wireframes
WordPress was the company’s chosen website builder for SunFit321, so it was my responsibility to research and discover the capabilities of this tool. Keeping in mind the WordPress capabilities, I generated the following low fidelity wireframes.
Using the resources provided by my team, I created the first draft high fidelity mockups of SunFit 321 with WordPress. I encountered many difficulties achieving the original designs I had intended to make, but it taught me how to troubleshoot, readjust, and allowed me to discover other effective layouts for the website.
Usability Testing
I met with five different users (3 who are familiar with SunFit 321 and 2 who are not) and asked them to explore the website and give me their feedback. I specifically asked for their thoughts on the look and feel, how easy/difficult it is to understand the program, and ultimately, how easily they could purchase the products. After collecting the results, I concluded that the look and feel needed to be lighter, the amount of pages can be reduced, and the responsiveness could use some improvement.
I redesigned the high fidelity wireframes with the new findings and created the following Final Prototype.
Reflections
This was my first real world UI/UX Design project and I am very pleased with the results. I found this project to be equal parts challenging, exciting, and fulfilling. Although the project itself and functionality requirements were not extensive, I still enjoyed getting to conduct a thorough UX research and design process. After completing this project, I learned that there are so many small details, steps, and logistics that are included in the making of a website. I encountered many difficulties and redirections throughout the project and ended up having to constantly rethink strategies and follow up with iterations.I am so happy to be the lead designer of a project that not only will help my company reach their business goals, but also to promote health and wellness.
Thank you! :)