Improving Pain Points & Eliminating Dark Paths
Who is WeCook?
WeCook is a ready-made-meal delivery service based in Québec. They offer healthy, pre-made meals to those who are looking to save time in the kitchen. Their subscription-based business model allows customers to order between 6 to 22 meals per week, conveniently delivered to their door, stored in the fridge, and ready in 3 minutes.
Deliverables
Getting Started
The Challenge
WeCook is looking to lead the quickly growing ready-to-eat meal service market in Canada. To make this possible, I needed to understand the first-time user response to the company's major touch point -- the website. The challenge would be to identify pain points on the website, and put forward solutions to improve user experience when ordering pre-made meals.
The Process
Business Research
WeCook Meals differentiates itself from its competitors by being...
- Cheaper - the average cost per meal from apps like Uber Eats is $32, while WeCook's subscription model cuts the price by 60% at $12-$13 a meal.
- Customizable - A main driver for young families is the capability of customizing meals to suit the preferences of both parents and children, when ordering the meals online.
- Convenient - WeCook offers fresh and healthy meals with almost no preparation time (just 3 minutes in the microwave!), a distinguishing factor when compared to other leading healthy meal subscription services like Hello Fresh.
Discovering the Pain Points
Usability Studies
I recruited 6 study participants that matched the target audience of WeCook, which includes young professionals and new parents between the ages of 25 to 45. Since the ready-made-meal market is still growing, I wanted to focus on first time users, as WeCook is investing heavily in marketing and communications to build its user base. In order to understand pain points from the perspective of first time users, I ensured that participants had never ordered meals from WeCook before. Subjects were moderated and asked to complete the following tasks:
- Your schedule is full for the next week and you're looking to save some time with healthy pre-made meals. A friend told you about WeCook and you're interested in giving it a try. First, you would like to see what is on the menu. How would you proceed?
- You now know what WeCook has to offer, you would like to place an order for some ready-made meals. Can you show me how you would do this?
- Since you didn't go forward with the payment, imagine you come back to the website after a few hours to finally place your order. How would you go about this?
Prioritizing and Synthesizing Findings
Dark Patterns
While analyzing my findings, I noticed that some issues users were running into could be classified as dark patterns. While it is well-known that dark patterns can be bad for businesses in the long-term, companies are also starting to face legal and financial consequences. Furthermore, I felt an obligation as a UX designer to ensure that users were not being manipulated into performing unintentional actions on the WeCook website. The following dark patterns were identified:
Organizing, Mapping, and Prioritizing Findings
First, I separated my findings into two categories: Dark Patterns, and Regular Findings. I wanted to address every dark pattern users ran into during the onboarding stage, however, I also wanted to focus on some regular pain points.
Strategic Prioritization - Given the short timeframe for this project, it was important that I understood which non-dark patterned pain points I should focus on. I did this by mapping regular findings onto a linear graph, with the x-axis representing findings that were important for the user, and findings important to the business on the y-axis. In doing this, I was able to target 3 more problems to tackle, on top of the high-priority dark patterns.
So, What's the Problem?
83% of Users Did Not Want to Use WeCook Again
After each usability study, I interviewed users about their overall impressions with the WeCook website. 5/6 users said that they would not want to use the website again, while the same amount found it difficult to use.
The Plan of Action
By eliminating dark patterns, and making some elements of the website easier to use, I wanted users to have a better experience with the WeCook website, and by extension, the WeCook brand. My goal was for users to have a better impression of WeCook via their website, by putting forward solutions to make it more user-friendly. Using my research, I decided to do this by addressing the following problems:
- Misled by $10 promotion instead of advertised $20
- Difficulty learning more about meals on product page
- Misled by "I want to taste!" button
- Forced into giving personal information before ordering
- Meal preferences were not honored
- Difficulty finding cart/meal counter
- Difficulty finding checkout button
- Difficulty recognizing premium/"week extra" charges
Starting the Design...
Creating a Task Flow
I created a task flow diagram that best represented the steps first-time users would take when browsing the menu and placing an order for a ready-made meal package. I did this by mapping out the menu discovery and order placement flows, and then highlighted in red the points where users were experiencing problems. I enumerated these problem areas according to my
plan of action, and attached specific examples. This helped me better understand the areas of the process I needed to focus on during the redesign phase.
Sketching and Ideating
Low-Fidelity Wireframes/Sketches
I sketched paper wireframes and brainstormed some UX writing solutions with the goal of making minute but impactful design tweaks, so that these changes could be implemented as quickly and easily as possible. I came up with several options for each pain point users were experiencing with the WeCook website.
Simple Design Solutions
I took my some ideas from my sketches and created mockups, with the intention of putting forward modifications that the development team could easily implement on the website.
Homepage
Before
"GET YOUR $20 OFF" may have suggested to users that all packages were offered with a $20 rebate.
Having users enter their personal information (email address and postal code) gave users a negative perception of the WeCook brand, overriding benefits of the marketing and functional intentions (collect emails for marketing and see if they qualify for delivery). Moreover, the task flow does WeCook a disservice, as it creates friction before demonstrating value. With so many competitors in the ready-made meal space, frustrating the user before the ordering process comes with the risk of losing them.
After
I changed the language to "GET UP TO $20" so that it managed expectations both when choosing meal packages and when analyzing the final bill.
I decided to move all personal information prompts until the end at checkout. This would completely eliminate the dark pattern of forced continuity, as well as create a better overall experience on the WeCook website.
Product Page
Before
Users said the "I want to taste!" button was misleading. It took users through the ordering process, when they expected the meal to be added to a cart.
Users had difficulty understanding the contents of meals. They found the icon descriptors indiscernible, and had a hard time getting a general idea of what the meal was without having to skim through a boring ingredient list.
After
WeCook currently does not have a multi-page cart feature, so I changed the wording of the button to "I'm ready to order!" with the assumption that users would expect the ordering process to begin, instead of the meal being instantly added to a cart.
I added a description to the meal, and made the icons bigger and more salient on the screen by listing them under the photo. I also made sure that the allergens accordion was one of the first of the three main fields and that it was expanded by default; direct visibility of allergens can mean life-or-death for many.
Choose Your Package
Before
Users did not perceive the rebate prices listed at the top of the package boxes. This was another reason why users felt duped by the $10 promotion (instead of $20) on their bill.
After
Along with changing the promotion wording on the homepage (1), I increased the font size of the rebate prices on the package page itself.
Shop Meals (1)
Before
Users were confused by the "Week Extra" charge on their final bill in part because they didn't see that some meals were charged at a premium. These premium charges were small, and in an indistinct color (black). Another issue is that all premium meals are at the top of the list, which perceptually blinds the user and makes the premium price tag indistinguishable.
Meals were presented in a particular order with premium meals at the top of the list. Premium meals at the top make the premium price tag even more indistinguishable due to repetition leading to perceptual blindness. Moreover, if a user accessed a meal through the "I'm ready to order!" button on the product page, the meal they selected should be at the top of the list to select.
After
I increased the size of the pricing and added the "Premium" text so that the charge had a description. I also changed the tag color to WeCook's primary green so that the tag would pop against the product photos.
I removed sequence numbers to allow for a more flexible and intuitive meal list. The first meal would be one that was selected from the "I'm ready to order!" button, and premium meals will be more dispersed so that price tags on the top right are more obvious.
Shop Meals(2)
Before
Users found the extra meal notification next to be deceptive, as it stopped counting once the quota was reached, and the extra meal notification was not perceived.
Some users had trouble finding the checkout button, and did not notice it change to its active color once they selected their meal quota.
Users preferences were not respected, which was frustrating because they had to sift through meals the were uninterested in or allergic to, despite being prompted to dictate their preferences prior to ordering.
After
The cart counter would now increase as meals are added to the package, and continue even when there are more than the package quota.
Once the package quota is met, the button will switch from gray, to the website's accent color (yellow). This should make the checkout button stand out, thereby making it easier to find, and alert the user once they reach their package quota.
I created a separate section called "Try something different!", where undesired meals could be displayed without being confusingly listed amongst meals users outwardly expressed interest in.
Checkout Page
Before
Emails were automatically populated at the end of the ordering flow since users were required to begrudgingly enter personal information at the very beginning.
The "week extra" charge confused users, with the majority having no idea where it came from.
Users who chose the 6 meal plan didn't understand why they were receiving a lower discount at $10, instead of the advertised $20.
After
Because users no longer had to enter their email at the beginning of the ordering flow, they could now enter it at the end, once they completed the task of ordering.
While the "week extra" charged was addressed in the Shop Meal Page, I also wanted to make the language of the extra charge more clear. I decided on "Extras and premiums," since this charge also included additional items beyond the package quota, along with premium prices.
My goal was to keep this smaller discount from being a surprise, so I created a prototype where users could only select the 6 meal plan. I wanted to see if changing elements on the Package Page as well as the promotional banner on the Homepage would properly manage user expectations of discount pricing.
The Prototype
By creating this prototype, I wanted to test my re-designs and gain insight on what worked, and whether or not my solutions resulted in more positive impressions of the WeCook website and brand.
TRY THE LIVE PROTOTYPE ON DESKTOP
Testing and Validating Solutions
I used the digital prototype with 6 new first-time users to test my re-design, and observed the following improvements:
Before
After
Quickly understood meal contents
Able to complete order flow without obstacles
Able to checkout quickly and understand when package quota was met
Understood extra charges on final bill
Positive Impressions
After completing tasks on the clickable prototype, 6/6 users said that they found the website easy to use, while 5/6 said that they were interested in actually using WeCook as a service.
To Conclude...
Reflection
I am pleased with how the whole design process went, as I came up with effective solutions that require minimal development time. With the exception of automatic cart additions and changes to listing order of meals, website modifications would only require quick content tweaks and simple stylesheet updates. Moreover, I achieved my overall goal in designing a better user experience, and thereby ameliorated first impressions of the WeCook brand.
While my design solutions for the extra charges on the final bill were effective, this aspect of the re-design was not as effective as I had hoped, since 2/6 users were still unsure about where the premium + extra charges came from.
Challenges and Limitations
Because of the timeframe, I was unable to build a more realistic prototype in which users could choose their own preferences and meals. Usability study participants had less control and freedom than the live WeCook website, which may have lowered the ecological validity of the study.
Future Plans
I am looking forward to further validating my re-designs on a staging website, where users have access to all real-world functionality. I am also planning on proposing more solutions for the WeCook website, but from the perspective of returning users. Once user experience has been properly developed and validated from both the first-time and returning user position, the next step would be to optimize the ready-made meal ordering process for mobile devices.