AlgaeCal Homepage Redesign

A strong digital presence is key in the highly competitive world of health and wellness and supplement products. This case study is about a journey I took as a designer to reimagine the old website for the only calcium supplement in the world that's clinically supported to INCREASE bone density — Vancouver's
very own, AlgaeCal.

Role

Client

My Responsibilities

Team

UX/UI Designer

AlgaeCal Inc.

- Discovery

- Design research

- User journey refinement

- User interface design 

- Wireframing, prototyping

UX Consultant (my mentor) and a Product Manager

AlgaeCal Homepage Mockup 2.jpg

The Design Challenge

Their website - with a new rebrand. AlgaeCal was planning on redesigning their website. I was given the opportunity to conduct a study / design challenge and reimagine the new homepage to align with AlgaeCal's new brand.
Transforming the homepage to make it align with the companies objectives:

  • Premium and Sophisticated 

  • Approachable

  • Warm and Inviting 

  • Feminine and Caring

Observations (first glance): Aesthetically, the website was information/visual dumping ground that didn't do justice to the brand purpose and the newly proposed premium and sophisticated rebrand. There was no structure to the content.
It definitely amplified confusion rather than coherency, especially to the Baby Boomer and Generation X target demographics.

Noted problems,

  • Rich with information

  • It seems like a very resourceful website on bone health and osteoporosis 

  • Too many CTA's - too many can actually be detrimental

  • The user has to spend some time on the website to be able to navigate comfortably

  • A load of information might remove the focus from the product.

Approach

Identifying critical information to keep/add to the main page and structure the page as I see best. Also, make it easy to understand the company value and facilitate a positive user experience through informative and relevant content to navigate customers in the right direction; and, most importantly, making sure to realign AlgaeCal's business strategy and marketing goals during the process. 

DESIGN THINKING

As a starting point for this case study, I used the Double Diamond process. Design thinking with a proper kick-off allows to define a clear business vision, and I really like the double diamond framework for its structure, clarity and dynamics. At the same time, it allows flexibility and agility in its application.

RESEARCH

Working with the research and data that AlgaeCal already had, I hoped to determine customer pain-points. I conducted a brief competitive analysis to see how AlgaeCal could fit within the health and wellness landscape while keeping in mind the main business strategy and marketing goals. All successful website redesigns include a degree of realignment.

KEY DESIGN CONSIDERATIONS

  • Features: such as search tools, product images, design/layout, etc.

  • Customer experience elements: cart abandonment strategy, customer support, mobile UX, etc.

  • Content marketing tactics: blog topics, content types, etc.

  • Marketing tactics: how are pop-ups, promotions, exclusions displayed

  • Customer reviews: layout, format, where on sitemap?

Exploration and Iteration

VERSION 1

VERSION 2

VERSION 3

Accordions and CTA's - I tried to include the CTA's (from current site) that I thought are important, but I felt like they're still a bit too much on a landing page and probably confuse the user more. 

Need to be purposeful about the journey I want the users to take. 

Having text links to learn more but include the CTA to shop maybe only about x2 times. 

Introducing a reviews/testimonials section with 2-3 as slider might be a good idea. This section would then lead to the reviews page, showcasing all.

Accordions: I may need to show some of the content instead of hiding it, maybe reviews or testimonials?

SHARING PRODUCT REVIEWS

One of the key elements I wanted to highlight was providing product reviews to help shoppers understand more about AlgaeCal products; this will help alleviate any concerns they may have and provide great eCommerce UX. I wanted to take it a step further by offering product reviews and additional information about the reviewers or summarizing them. This step can help make it easier for shoppers to get the full benefit of others’ opinions.

Key Challenges and issues

Iterative design is a methodology that positions your digital experience as a living project that you should regularly tweak and improve upon as you go. The challenge was that we didn't have enough research and data to back my UX choices. The main UX issue was not being able to conduct proper usability testing. I would also have really liked to be part of the user interview research or be able to review the findings. Besides, to ensure users' optimal experience, it would have been beneficial to review any market research, consumer behaviour, and competitive analysis previously conducted by AlgaeCal. With only one usability testing conducted (on the high-fidelity prototype), we didn't have sufficient feedback to push the design further. 

Learnings

Overall, reflecting on this process really helped me extract key points, learnings, as well as blockers that I could eliminate to improve the process next time. Here are some of the lessons learned:​

  • Align website goals with marketing goals.

  • Never start the design process until you get all business requirements.

  • Know the brand's attributes. AlgaeCal had provided a comprehensive brand guideline and company overview that identified and expanded on the company culture, voice, benefits, values, design metrics and target consumer. This information was beneficial and provided a great jumping-off point.

  • Create user personas. By creating the ideal AlgaeCal customers through personas, you'll be able to design the right solutions.

  • Testing gives you a valuable collection of user feedback that you can use to improve your site and to understand what's working 

  • eCommerce design needs to reflect trust and security, where the shoppers feel they can trust, i.e. product reviews.

View next project

arrow next.gif

Instagram

Behance