High-Fidelity

Ethique - High-Fidelity Protoype and User Testing

High-Fidelity Mockups:

Before developing a hi-fi prototype, I created hi-fi mockups of my wireframe screens in tablet, mobile, and desktop.

High-Fidelity Prototype:

After developing the stylistic design of the app through these mock-ups, I created a high-fidelity prototype. I focused on highlighting the most important sections of my app, using my visual design guide to create a uniform experience for the user.

High-Fidelity Edits:

After watching my peers engage with my high-fidelity prototypes, I decided to make some adjustments to my design. These adjustments focused on:

Reconsidering the home page of the app, and thinking about how I might make it less busy.
Adjusting a couple of stylistic elements, such as adding more of an inner shadow to the search bar.
Increasing the contrast of text in the ‘profile’ tab.
Making brand ratings immediately visible on the category page.
Adding a search phrase in the search bar.

The main changes are included on the pages below:

User Testing:

Using ‘UserTesting.com’, I tested my prototypes on three users.

I wanted them to focus on finding a brand, learning about it, and bookmarking it - the main parts of the app. I also included a couple of ‘subtasks’ as they completed the main task. These subtasks focused on understanding whether the users understood the basic navigational features of the app and icons.

Overall, all my users had a positive review of my prototype.

- all of my users found my prototype very easy to navigate, with intuitive icons and highly accessible features. - they were able to complete the main task and subtasks.
-one user was a little bit confused about the wording of my first task and wasn’t confident about the task, but completed it nonetheless. This was more a problem with my phrasing rather than my design.

Interestingly, I found that users very intuitively used the ‘bookmark’ button when they were looking at a brand page. I was not expecting this to be such an obvious button. I was also pleased that my users all understood what the bar graphs on the brand page were representing, as I had taken a risk and gone for slightly more minimal markings. However, these design choices caused no issues!

One user suggested that I make the ‘un-bookmark’ function a little bit slower, or add an ‘Are you sure?’ pop-up, so that users can be certain that they want to un-bookmark a brand, which was very helpful feedback.

Final Edits:

Based on my user testing, I decided to make a final adjustment to my design - adding a pop-up to ask users ‘are you sure you want to un-bookmark ‘X brand’?’ before removing the bookmark from the list. I felt this was an important adjustment, which would help account for user errors or mistakes.

Otherwise, I felt that my user testing was successful and I had managed to produce a high-fidelity design that was usable and succeeded in providing quick and legible information on ethical and sustainable production.