Tanae' Burton
  • home
  • illustrations/abstracts
  • Still Lifes
  • Logos/Commissions/Posters
  • Life Drawing
  • app prototypes/reports
  • Fan Art
  • ACTUALii
  • Digital Legacy Condensed Report
  • Hydracy Redesign
  • Infographics

Hydracy Page Redesign

The Hydracy brand is centered around health and wellness; specifically focusing on hydration and maintaining healthy habits. The company offers an array of water bottles, health information, and powdered supplements. The site is designed to display all of their products while conveying a welcoming introduction into a lifestyle that can seem intimidating. However, the compilation of images and text seem, at points, unnecessarily repetitive and insincere. On this page I will display the original site and my updated take on it's design.

Challenge

After reviewing the site I noticed that the lack of authentic photos of the products made the company seem illegitimate. This lead me to do some research into the site's web presence and reviews from users. From the research I found multiple Amazon pages and an Instagram page for the company. The site was real but lacked authenticity. The product pages also had repetitive information and unnecessary text which increased navigation time.

The overall challenge was to simplify design, decrease navigation times, and use real product photos.

My Toolbox/Process

Research

Picture

User Research

Picture

Brainstorm

Picture

Prototyping

Picture

Plan

Picture

Data Analyzation

Picture

Design Principles

When looking at the website I felt it needed a small lift in appearance to make it more modern to match the competitors from my research. I comprised design principles to help form a design plan.
Picture

Competitive Analysis

Goals

  • To get a better understanding of the market
  • To see what works and what doesn’t
  • To improve design process
  • ​To know strengths and weaknesses of the competition​
Picture
Picture

Requirements

 Cart
 - Cart icon
Log in
 - User icon
Product selection
 - Color selection, Product suggestions, Product image, Size selection, Availability.
​
Add to cart 
 - Add to cart button, option to add more items to order
Customer reviews
 -Stars that indicate ratings
Product info
 - Product dimensions, Product materials, FAQ's ​

Product Image/Information

Original

Picture

Updated
Made in Adobe XD​

Picture

My thought process-​Product Image/Information

  • Declutter
  • Simplify
  • Streamline
  • Aid Navigation
Declutter-
I felt the text/images on the page was crammed and caused a lot of chaos when trying to pick out helpful information. To fix this I minimized the text and created more of a balance between the text and white space.
Simplify-
I wanted to modernize the look a bit so I changed the font and added subtle design elements. The original design was very large and in your face, similar to old infomercials. I shrunk some of the elements so it would be easier on the eyes of the viewer. I also wanted the user to be able to see if an item is in stock prior to going to the cart.
Streamline-
In the original design the site offers you the option of adding on an additional item to their purchase. However, there are multiple forms of each product varying in color, size, and accessories. To fix this I provided the option to click through related items in the Frequently Purchased Together section (previously known as the Upgrade section.)
Aid Navigation-
To help users be aware of clicked paths I utilized the Breadcrumb technique to show viewers previous viewed pages and provide the ability to easily return to them.

Product dynamics, reviews, & helpful information 

Original - Mobile

Picture
Picture
Picture
Picture

Updated - Mobile full page
Made in Adobe XD

Picture
The Reviews side of the dropdown menu (Provides a brief glimpse of the reviews) with an option to click on the "Full View" that would display the additional reviews.
Picture

​My thought process

  • Condense 
  • Organize
  • Images
Condense-
The original design had a lot of repetitive information which could cause mistrust amongst users. I eliminated the unnecessary text and focused on the main points that, at a quick glance, would convey as much information as possible.
Organize-
The original page was really long full of content that the user had to scroll through. I organized it all into a dropdown menu so the user could focus on the information important to their current visit.
Images-
The images in the original page seems inauthentic. The models in the photos would seem as if they were holding the products but it was obvious that they were regular stock photos with the product photoshopped in. In my redesign, I used a photo with a off-brand water bottle and inserted a note in my report suggesting that the real photos of the products be used on the site.

*Examples of the inauthentic photos
Picture
Picture

Limitations and Future work

This was a solo project so I had to rely heavily on my own market/company research; which could potentially minimize the design perspective. I didn't have real photos of models holding the product so I had to add notes to explain that the stock photos used were stand-ins for the actual product. I also didn't have time to make a full hi-fi prototype and flesh out all of the page assets. In the future I would work with a team of diverse talents and purchase the product ahead of time to take authentic photos. I'd also dedicate more time to the prototyping phase.

Reception

I received great feedback on the prototype. Standout remarks were, "The design was very clean and easy to understand. It would have been nice to have more of the assets flushed out for the prototype. Great use of information architecture." Overall, I was pleased with how the end product turned out and look forward to potentially improving it in the future.

Prototype Links

IPhone X, XS, 11 Pro -  https://xd.adobe.com/view/781e33e1-d1b4-4869-bbd3-8ae1b2154117-2d4d/
IPad Pro - https://xd.adobe.com/view/54fb656a-6451-4b61-aae5-5c52c62355ef-01a8/
​Web 1920 - https://xd.adobe.com/view/1312647c-559b-4f20-b9be-871042a60392-4641/
​
*Edit: Since the redesign of this page the company has added one photo of a model using one of the company's products.
Proudly powered by Weebly
  • home
  • illustrations/abstracts
  • Still Lifes
  • Logos/Commissions/Posters
  • Life Drawing
  • app prototypes/reports
  • Fan Art
  • ACTUALii
  • Digital Legacy Condensed Report
  • Hydracy Redesign
  • Infographics