Manager dashboard
Subscription-based fitness website
UI/UX Designer and Developer
Wireframing, prototyping, visual design, front-end development
2023
Challenge
With a limited amount of time in her schedule, Katy Estes wanted to provide workouts, videos demonstrations and wellness resources to a wider range of customers. She proposed a subscription-based e-commerce site where customers could leverage her expertise to improve their well being.
Hypothesis
A subscription-based website with valuable resources will enable Katy to reach more people and provide a passive revenue source.
Process
Gather requirements
Discussed with the customer, what she was hoping to achieve and what content she wanted to provide users.
Wireframe potential solutions
Working in low-fidelity wireframes, I was able to quickly provide designs to the customer and get feedback. This allowed me to work rapidly to create a basic design and user flow.
Prototype
Once the wireframes were to a point where we felt confident about the basic design, I created high-fidelity interactive prototypes that demonstrated the visual design and interactivity of the website.
Visual design
I designed each of the primary screens in Figma to provide the customer with a finished design including branding, color and typography.
Develop
Working locally, I developed the subscription-based e-commerce site with WordPress, PHP, Sass and JavaScript.
Test
Once the website was near completion, quality assurance testing was completing to discover any potential bugs and resolve them.
Train
Prior to deployment of the new website, I trained the customer on how to maintain the website’s content within WordPress.
Deploy
Once the blog site passed all QA tests and any outstanding requests were completed, it was deployed to the production site.
Deliverables
Wireframes and prototypes
Wireframes enabled the customer and I to begin our conversation about the website design. Once the wireframes were finalized, I created low-fidelity prototypes to demonstrate interactions and user flow.
Visual design
Working in Figma, I created screens for each of the primary pages of the website. These were informed by the wireframes and prototypes created previously.
A subscription-based e-commerce website
Once the visual design was established with feedback from the customer, I developed the website with PHP, SASS and JavaScript using WordPress and WooCommerce.
Outcome
The customer was extremely pleased with the design and functionality of the website. Through training the customer on how to manage the website content and track subscriptions, she has the confidence necessary to maintain the website into the future.
The subscription-based site has already gained several subscribers and we are hoping to pick up many more through marketing and word of mouth.
I absolutely loved working with Ian. He is very professional and did a great job keeping me on track to finish my new website. His final creation was better than what I could have imagined!
