Let’s see what’s under the hood..

When first visiting the landing page of betterLife, I was greeted with an overload of information and visuals. I conducted a heuristic evaluation to gain a better understanding of what could be improved for the website. Some major concerns have been highlighted and listed as seen below:

 Understanding the User

To create an effective landing page for users, I conducted interviews with 4 individuals to identify their shopping patterns and preference to purchasing vitamins and supplements online. This gave useful insight on how I can improve the website to tailor it for a better shopping experience. Here are some key takeaways from the interviews:

 Meet and Greet

Now that we have a better understanding of who the users are, let me introduce you to Philip. He is a health conscious gym-goer who likes to stay in shape and makes sure to get the appropriate nutrients for his body. Philip will be the persona that we get acquainted with as I come up with solutions to create a better experience when visiting a supplement website.

 Lo-fi Wireframe

This is an early version of a low-fidelity wireframe that depicts a general idea of what the landing page will look like. As you can see, I have already removed unnecessary clutter to make way for a simplified navigation bar and an area to browse popular and featured products. The navigation bar was created from a card sorting activity done by the 4 interviewees. The original site has numerous amounts of brands and categories that it was causing too much confusion and uneasiness for users. By conducting a card sort, the interviewees were able to narrow them down to four categories.

Hi-Fi Wireframe

Ta-da! After making some revisions, here we have the high-fidelity wireframe for the new and improved landing page. At the top, you’ll see the search feature combined with the navigation bar as well as having a cart and signup/login call to action button. If you scroll down, I also changed “Popular” to “Customer Like” to give customers like Philip suggestions and options to try out different products. Now that Philip isn’t overwhelmed with information and knows where everything is, he is happy to say that betterLife will be his better option for online vitamin and supplement shopping.

 Reflection and Next Steps

Having too much information can be detrimental to one’s website and can even deter visitors away. By pursuing this route, I was able to offer clarity and organization so that current and future users can navigate more easily. Going over low and high fidelity wireframes also helps generate more ideas to improve the landing page as well. It’s as if you’re looking at them in different angles to see if there is a flaw or an opportunity.

These reflections will continue to be of use when going into next steps: