Recently, I wanted to try my hand at a redesign project and while purchasing some new protein powder I decided to choose Huel’s ‘How to you use powder’ page on its mobile site.
Initial impression
After looking over the lengthly page I could immediately see several issues that would affect the usability and level of user engagement:
- Users have to scan though copious amounts of text to find what section applies to their needs so the page’s contents should be displayed.
- More imagery or videos would help break up the text & raise engagement.
- The tables should be displayed vertically, saving users from having to side scroll or turn their phone horizontal.
- The text’s accent colour is barely visible against the white background which causes issues with accessibility for visually impaired users.
I wanted to get some feedback from potential users to see if their views would validate my observations and if there was anything else that stood out to them. To do this I spoke to 4 different friends of mine that I felt fitted Huel’s target audience. I sent them the page to view on their phone and they commented back to me over the loudspeaker.
4 potentional users I interviewed
Emily
- Age: 23
- Status: In relationship
- Occupation: Session musician / waitress
- Lifestyle: Fairly busy lifestyle. Sometimes finishes work late and skips her dinner. Trying to lose weight so she often goes to the gym.
- Hueligan?: Hasn’t heard of Huel but thinks it's an amazing idea.
Abe
- Age: 34
- Status: In relationship
- Occupation: Software developer
- Lifestyle: Very busy work / life balance. Not very calorie conscious but cares about what and how much he consumes.
- Hueligan?: Has heard of Huel but never used it before.
Rachel
- Age: 28
- Status: Single
- Occupation: Recruitment
- Lifestyle: Busy lifestyle, doesn’t always eat lunch because she forgets, also is trying to lose weight.
- Hueligan?: Heard of Huel but has only ever tried the on-the-go drink in supermarket. Thinks the hot’n’savory flavours are an interesting USP that competitors haven’t thought of.
Bart
- Age: 43
- Status: In a relationship
- Occupation: Bus driver
- Lifestyle: Has long work shifts, big gym goer. Very conscious of his personal nutrition.
- Hueligan?: Used Huel for several months before pandemic, now he just uses protein shakes.
User feedback
Emily
- The page is lengthy and should have some text removed in parts.
- There should be more pictures or diagrams.
- Maybe some of the sections should have videos instead of text.
Abe
- The page is so long that there needs to be a contents so users can view all the sections of the page first.
- Definitely needs more images and videos.
- The graphs could be vertical so you don’t have to scroll sideways.
Rachel
- The page needs to be broken up with more images.
- The page needs to be more interactive, for instance the calories calculator could be live on the page rather then a link to another site.
- The photos could be more relevant to the information in the text.
Bart
- The page needs to be condensed. Only relevant info should be shown.
- The page needs more imagery or videos to explain complex parts like all the measurements for calories.
Improvements
Contents List
I added a contents list to the top of the page so users can now click on the section they are interested in and it will direct them there. This eliminates the issue of users scrolling through lengthy text to find the info they need.
Original
Redesign
Accordion
Another way of presenting and directing a user to relevant contents could be to use an accordion like below. This could be more engaging for users as it feels more interactive. In addition, an accordion will allow users to still see the contents list which isn’t possible with the first option.
Improved graphs
The graphs before were hard to read and required the user to side scroll or turn their phone horizontal. Now that the graphs are vertical it's easier for users to view. Use of zebra lines further increases the legibility of text.
Using images for Seth and Melanie helps break up the text and adds a more human touch to the information presented.
Original
Redesign
Relevant Imagery & larger headings
Using more relevant imagery helps break up the text blocks which will increase user engagement. Below, you can see images of the different ‘flavour boosts’ added into that sub section and also a video related to the section about cooking with Huel.
The image of the deconstructed new shaker also helps the new users get a better understanding of the product which helps builds trust.
The use of larger bold headings also improves the spacing and increases legibility.
Original
Redesign
Original
Redesign
Original
Redesign
Accessibility
A great way of improving accessibility would be to give the option of allowing users to listen to an audio recording of the text. This is aimed toward users that may have visual impairments. Displaying the duration of the recording helps them decide on whether to listen or just read instead.
Back to contents button
I wanted to add a waasdach section. The underline was added to help reinforce that its a button. The grey line beneath also helps visually break up the text sections for the user.
FAB
I changed the FAB help/chat icon from a question mark to a more informal material design chat icon with text to further reinforce purpose. I also added a slight shadow and blur as this is currently in-trend with FABs.
Original
Redesign
Summary
All the above adjustments and usability improvements help solve the issues & pain points raised by the potential users that critiqued the pages.
I believe the improvements will raise the engagement and usability of the page but most importantly, as the page is geared toward new users, it will help push the retention of newly subscribed customers. These changes could also appeal & help build trust with potential customers that are just browsing inquisitively.
Beneath is the prototype I have produced that shows all the above changes & demonstrates the contents navigation and ‘back to contents’ buttons.