Improving my prototype
By: Anna Rátkai
Tags: UX Design, Process, Ux Process, Prototyping, Important

Improving my prototype

Being a UX designer in progress means that I’m constantly learning. Mostly from my own mistakes. Which sounds scary, but actually is extremely rewarding, if you have the right mindset.

In this article I’m going to share how I learn, how I find my mistakes, make peace with them and then learn how to eliminate them. Let’s see the example of my first prototype for my REKO project (that I’m currently working on).

Step 1: Build the prototype:

My purpose was to build a super simple prototype to test the structure and IA of the app. I wanted to see if I managed to capture the right mental model, if people understand where to find what. I technically just hooked up some wireframes together and added some extra frames to show very basic interaction. My purpose was not to create a fully functional prototype, or test UI elements. Well, UX newbie plans and then the first user test happens.

Step 2: User test

When I was satisfied with my prototype I decided to user test it. Soon I had to realize that my plan to test only the structure is not a viable option. Because the prototype was not fully responsive and there were some confusing UI elements (see down on the picture) the users got distracted. I was not able to test the structure exclusively because the execution had an impact on how the users navigated.

Step 3: Finding problems

After the user tests I analyzed the results and drew the conclusion that the structure was understandable, they had no problem finding the information, although some UI elements and lack of interaction confused them and delayed the completion of the tasks. HOWEVER I have to note here that the test users were not REKO users. That is an important aspect because ordering through REKO Facebook is a different mental model than ordering from an ecommerce like process that I decided to use. My test users are familiar with the e-commerce model, and as they are not using REKO, this experience was not conusing for them. In the future I’m going to test my prototype on REKO users so I will have appropriate feedback if the mental model is correct or not. But first I decided to clean up the prototype first and correct the major mistakes so the next test users can truly focus on the structure. That is why I decided to focus on:

Better button labeling

Interaction feedback and error messages

Consumer cart experience

Producer selling experience.

Reflection: A Lean UX-er now would just tear her hair out saying “why would you spend time on building something when you are not even sure if it’s going to work”. I understand. I was even conflicted myself. My answer is: fun and learning. Because I just started to enjoy using Figma, applying more advanced features (I’m talking about variants and instances, so it is still very basic but super advanced compared to my skills I started with) which also makes work much faster. So why not create a better prototype in a short time and get better better feedback and have fun and learn new things in the meanwhile?

Step 4: Iteration

In order to improve my prototype I had to learn best practices, take a look at other products and how those solve the problems I encountered. That is why I spent a great deal of time learning about cart solutions and layouts, filtering best practices, button labeling principles, error message placement and visual appearance, etc… Here is how I improved my prototype:

Consumer cart experience — version1

Customer cart experience v1

Issues

~No visual feedback when the button is clicked — “Did I add it?”

~Cart is scrolling — even though there is a dot appearing after adding an item it is not detectable because it is not visible.

~In the cart there is no option to edit the order

~Success page — shows for 1.5sec, there is no option to dismiss, maybe it is too short.

Consumer cart experience — version2

Solutions:

~Added interaction to change the amount of tomatoes

~Button state changes when clicked — it tells the customer that the item is added

~Cart is fixed on top — the dot is noticeable when the item is added

~Cart is overlay — more “light” experience

~ It is possible to edit cart before sending

~ Success message — appears as a toastbar on the bottom of the screen