A website redesign for Aletha Health
My Role
- UX Design: Sketching, Interaction Design, Prototyping
Project Context
- June 2023
- Design Project
- Team: Solo
Tools
- Figma
- Adobe Illustrator
- Adobe Photoshop
Project Overview
Aletha Health is a wellness and technology company that specializes in creating innovative tools and devices to optimize physical well-being. They are best known for their product, The Mark, a percussive therapy device that provides deep muscle treatment and recovery. I took on the responsibility of redesigning their existing website for desktop, mobile, and tablet.
The Challenge
The current website of Aletha Health suffers from a lack of distinct brand identity and an outdated design that results in a diminished user experience. They want to establish credibility and stand out amongst competitors, such as Therabody, HyperIce, and Pso-Rite.
How might we improve the user experience and brand recognition by redesigning the Aletha Health website?
Design Process
Research
In the research phase, I conducted competitor analysis to identify industry best practices, areas for differentiation, and opportunities to improve the user experience compared to competitors. This analysis includes evaluating usability, visual design, content strategy, and overall user journey.
Direct Competitors
Assessing industry competitors, I gained insights into the current landscape of other businesses.
With a focus on gaining a deeper understanding of the client’s needs and objectives, I engaged in insightful discussions and collaborative sessions to assess the strengths and weaknesses of their website. To gain a comprehensive understanding of the current issues and potential, I conducted interviews with the development team, delving into their perspectives, technical considerations, and challenges faced during the development process.
Research findings:
- A smooth and seamless transition is essential when transitioning from browsing the website to the checkout process.
- Incorporating people within imagery elevates engagement levels and enhances its captivating appeal.
- Effective storytelling creates emotional engagement and deeper connections with the audience, leading to memorable brand experiences.
Define
Based on the insights gathered from the research, I identified the most critical issues and transformed them into prioritized project goals.
- Improve Visual Engagement: Incorporate people within imagery strategically to increase engagement levels and captivate users. Use relevant and appealing visuals that resonate with the target audience, creating an emotional connection and fostering a more compelling user experience.
- Enhance Checkout Process: Streamline the transition from browsing the website to the checkout process, ensuring a smooth and seamless experience for users. Focus on simplifying the steps, reducing friction, and optimizing the user flow to maximize conversion rates.
- Craft Compelling Storytelling: Implement effective storytelling techniques to create emotional engagement and deeper connections with the website’s audience. Develop a coherent narrative that aligns with the brand identity and resonates with users, enabling them to connect with the brand on a more meaningful level.
Ideate
Aletha Health’s brand guide includes the logo, imagery, and typography. Through a meticulous examination of the brand guide, website, and close collaboration with the team, I diligently pieced together the essential elements to define Aletha Health’s unique brand identity:
Aletha Health is an innovative and forward-thinking brand that focuses on muscle enhancement, physical therapy, and muscle relaxation tools. Committed to enabling individuals to unlock their full physical potential and achieve optimal performance, Aletha Health offers cutting-edge products that facilitate muscle development, expedite recovery, and promote relaxation. The brand identity is defined by a seamless fusion of strength, flexibility, and vitality, ensuring a comprehensive approach to holistic wellness.
Drawing inspiration from the physical product manual, I curated a vibrant and invigorating color palette that infuses the brand with a sense of energy and enthusiasm.
I sketched a comprehensive wireframe outlining the essential sections and strategized the information hierarchy before diving into the Figma design process.
Design
My design decisions for the website prototype focused on functionality, aesthetics, and user experience. I carefully selected visual elements to create a cohesive and engaging interface, while the color palette was chosen to evoke excitement and friendliness. Typography was optimized for readability and hierarchy, enabling easy content scanning.
Through user-centric design principles, I prioritized simplicity, consistency, and accessibility to deliver a visually captivating and seamless browsing experience aligned with the brand’s goals and values. I developed the prototype in Figma.
Design Iterations
Color Palette: The drastic switch from the original blue and black to vibrant summer colors was too extreme, clashing with the established platform and branding. So, I reverted to blue and black, adding complementary accent colors to highlight the founder’s book.
Checkout Process: To solve the checkout flow, I created a seamless transition from cart to checkout, all within the same interface, as seen below:
Product Bundles: I crafted three product bundles targeting specific muscle weaknesses, offering solutions through bundled packages. This underscores the intentional product design, which is meant to complement one another.
Book Page: I added a new page for the book Aletha sells on their website, featuring the founder’s backstory to establish emotion and credibility.
Mobile Versions: Each desktop view was transformed into a mobile version with compatible capabilities for the screen width.
Shop All Experience: I adjusted the shop all page to include more imagery with skin to draw in more attention, thanks to the recent photoshoot! I took away the product filters, as its not needed now with only 4 products. It would be handy to keep for future iterations when the company expands its product line. Also, I summarized each product page by highlighting three essential details: its purpose, benefits, and recommendations. This helps ensure that important information is easily accessible, even for those who may not explore the page further.
Blog: I redesigned the blog page, improving navigation and aesthetics, for a more engaging and valuable user experience on the website.
Story Page: I crafted a brand story page to enhance company recognition and showcase their accomplishments.
Key design decisions:
- Nav Bar: The navigation bar is composed of “Shop, Learn, Story, and Contact” to best condense and organize the information on the website. This new structure highlights the primary action of shopping, provides easy access to educational resources, showcases the brand’s story, and ensures seamless contact options, streamlining the user journey and aligning with their needs and interests.
- Learn Pages: Introducing the learn pages, such as “Body Pain 101,” enhances the customer experience by providing valuable insights into the origins of body pain, all rooted in science-backed principles of physical therapy. These informative resources not only empower users with a deeper understanding but also underscore the meticulous research and purpose that have gone into designing the products, making them even more valuable to those who may not have previously recognized their depth and expertise.
- Shop Page: The shop page serves as an enhanced product page with the ability to add products straight to cart, in effect, replacing the store page, which creates a more seamless user experience.
Email Templates:
Additionally, I created email templates that matched the website’s new branding and design, aiming to provide a consistent and visually appealing experience for users.
Learnings
- Rushing to the high fidelity stage might be tempting, but most of the work is everything that happens before that step.
- Design can never be an isolated process. Product & Business teams can give great insight into the features you’re working on. Be sure to involve them.
Next Steps
- Await team decision on development stage and iterate from there if needed.
- Conduct usability testing with high fidelity prototype to get feedback on the website’s visual design and hierarchy.
