UX | UI | Visual: Vitagene Re-Design



Vitagene is a new class of a health and wellness company, combining expertise in genomics, data analytics, and digital health to provide health-conscious consumers access to the latest scientific research in wellness and nutrition and to translate these insights into direct results. I was hired by Vitagene to re-design and help re-brand Vitagene's B2C (consumer-facing) website.



My Role

Ideation, Sketching, Copywriting, User Interface Design, Visual Design, Graphic Design

PROBLEM

Visitors who came to Vitagene's website were unable to navigate and understand the Vitagene website. Because of the lack of proper navigation and message on the website, consumers were unable to discover what Vitagene could offer them, leading to limited conversions. The goal was to create a higher demand for Vitagene's products and subsequently increase the number of conversions.

SOLUTION

I re-designed the Vitagene website to guide the user along a logical path toward conversion. This consisted of a complete overhaul of the structure of the website's information architecture, a brand new interface, and a more inviting look and feel. To achieve a friendlier and more consumer-friendly feel to the homepage, I created a brand guide and designed an icon set for Vitagene to use on its consumer pages.




Approaching the Problem


I worked with the Vitagene team to identify the user experience problems within the website and to help guide Vitagene toward a clearer value proposition. The one question we tried to answer was, "What is the one thing we want to communicate at the first impression?" To answer this question, we completed market research and competitive analysis to help visualize various product experiences in a concrete manner. The following were the focal design problems of the Vitagene website.



  1. Keep brand consistent

    Vitagene's website visible problems included an overwhelming amount of information on the homepage, an inconsistent look and feel, and a missing call-to-action. These problems all stemmed from the root problem of Vitagene not understanding it's own identity. As a result, the website had become a mish mash of design experiments; design decisions on the previous website had not been purposeful, leading to confusion and eventual abandonment by users. See below for screenshots of the Vitagene website before my re-design.

  2. Don't overload user

    The copy needed a complete overhaul. Through the user research completed, we saw that there was confusion regarding the various scientific terms used on the website, as well as frustration and boredom from the overuse of plain text. Using simpler language to convey ideas to the user is more effective than using new, scientific phrases that the user doesn't understand; users would frequently lose interest before learning about what exactly Vitagene was about.

  3. Clean visuals and imagery

    A clean, friendly brand and design creates space for the user to explore the website at their own pace; a wider net is also cast to convert and retain users. Part of user experience is to create a positive experience for users, and visual design is a component of that, especially in a space with several competitors already.


  4. User flows & Solving Design Problems


    After initial research, I created a user flow to map out how the website should be laid out to help users gain understanding of what Vitagene was offering and create an easier path to conversion.





    Two things I focused on in this flow were:

    • Keep content streamlined across the different pages to allow the user to flow through the website in logical, easy manner.

    • The ultimate goal is to convert users and receive payment; to achieve that, guiding the user through Vitagene's science education shows value early on.


    • Branding & Visual Design


      To maintain consistency on the Vitagene website, I created a brand guide and icon set for the website. I wanted to create a sense of friendliness and warmth, paired with professionalism and expertise.





      Icon Set





      The Solution





        Vitagene     Date: September 2015
        Software used: Photoshop, Sketch
        Services: User Experience, Information Architecture, User Interface Design, Visual Design, Graphic Design