Bep

What did I know about UX design when I started working on this pet project (pun very much intended)? That captivating visuals make all the difference, that people won’t read tiny text on mobile, that the designer comes up with all the solutions. Surely, I did not know enough.

Bep was born in the summer of 2021 when I enrolled in the infamous Google UX course. I only lasted 3 modules, as the randomness of design prompts and lack of objective criticism made me realise everyone was essentially putting effort (or not) into products with little real life relevance. I abandoned my little project only to revisit it later when I felt more equipped to apply what I had learned from my mentors.

Project background:

To design a niche market product, making it usable and fun. While doing preliminary research on pet food shops and delivery services, I found the need to differentiate from competitors by creating a subscription-based service. This is still a mostly uncharted territory!

Problem:

How do I make finding and ordering the preferred subscription plan an easier experience than going to a store to pick out the items?

Goal:

To enable pet owners to set up a subscription for a chosen plan (e.g. adult dog). Worry- and effort-free.

Methodology:

survey + follow-up informal chats
moderated and unmoderated usability tests (UsabilityHub, Maze, Figma)

Getting to know the user:

Pet owners increasingly buy food for their darlings online. It’s convenient, fast, automated to an extent, and possibly cheaper than going to brick & mortar shops.

Saving time by storing previous shopping lists and receipts on an electronic device was found to be more important than checking out physical products on shelf, although both online and offline shoppers agreed on liking sales (who doesn’t).

Pain points:

• Do you trust subscription-based services?
  
• Do you buy pet food often?
  
• Are you loyal to a particular brand (e.g. organic, locally sourced?)
  
• Do you know the products you buy?
  
• And the most critical point to answer: Is setting up a subscription a hassle?
  

Users:

On an important note: at this stage I was considering this project quite holistically, thus accounting for both the user (automatisation, easy search, retaining previous order information) and business (easy delivery, e-commerce compliance) sides. Opting for a subscription rather than individual products is a win-win for both.

Still at the empathising stage, I drew storyboards illustrating the user experience. 

Prototyping and testing:

I created a few versions of low fidelity prototypes, as those were tested the most extensively.

Below you can see the very first low-fidelity prototype. My biggest jump between 2021 and 2022 was simplification that resulted from a better understanding of biases and cognitive load. With the form changing, the idea behind Bep stayed consistent.

Next up are some revised, cleaner screens.


Here are some UsabilityHub heatmaps.



Some interesting findings at this stage were as follows:

1. semantics were a serious obstruction, I cannot talk about a formula when I mean pet food plan (…so I ended up taking a short UX writing course);
   
2. being introduced to the app in a state where the user technically already has an account was slightly confusing;
   
3. all primary buttons and toggles have been clicked!
   

Taking those into consideration, I made a version 3 which was a bridge into high-fidelity prototyping:


This stage was a huge step-up from the early wireframes. I added an onboarding, ensured clarity of the language, provided more target text than just placeholders, picked out consistent iconography. I also A/B tested screens which used pictures of animals for categories, but icons ended up performing better.

Finally, I tested my high-fidelity designs.


The results here were quite interesting in comparison with a thinking aloud in-person test. The path I set up in Maze was obvious to me (of course I am biased, I have been looking at it way too long) and it seemed too simplistic. 7 testers explored around and clicked other buttons and screens. Naturally, the Figma flow does not replicate the intended real-world experience of being onboarded, creating a brand new account and only then taking out a subscription plan. I wanted the checkout screen as an end goal, because ultimately that is what the user would aim to reach in the app. Still, it was great to witness some exploration!

After completing the two tasks, I had my testers answer questions regarding the ease of navigation and potentially surprising/confusing elements. Some of the feedback was:

1. lack of clarity on subscription details;
   
2. it is odd to ask if a given subscription plan is "what I have been looking for" without prompting an actual search first;
   
3. not having a complete list of available products;
   
4. that while aesthetically pleasing, some decisions in the UI seem arbitrary so it needs polishing.
   

End result:

Below you can interact with the updated prototype and see how I have solved some design challenges.

Closing thoughts:

I am aware that Bep would not be easy to translate to a real-world product, due to the complexity of establishing an entire supply chain. An app used to manage subscriptions is not even the end product – the actual pet food is. Still, I enjoyed the exercise, from coming up with a product idea to deciding on the visual style.

Ideally, I would be checking user error and drop-off rates to see how well the Bep app performs, and net promoter score (or similar) to evaluate how the subscription service does. For the purpose of my small project, seeing testers complete their assigned tasks gives me confidence.