Improving the syn search for the app

is the UK’s leading weight loss organisation and has been for a number of years.

Alongside Slimming World’s well structured and educational meetups, they offer an app where members can log in to track progress, read articles on nutrition and other useful hints and tips.

The problem

As a frequent user of the app, I noticed some significant flaws with the existing syn search feature. Below is an example of me searching for my favourite meal, chilli con carne.

GIF showing the existing behaviour of the search function.

After using the search a number of times, I made note of the personal pain points I encountered.

  • Firstly, the initial hook ( first interaction ) wasn’t clear to me at a glance. It took me a while to find it.
  • I also found it very difficult to find certain foods and meals. I was left sifting through many results and found it hard to digest the information within the list.
  • Lastly, when typing, the search didn’t filter. I found typing exact words without any functional feedback an annoyance.

From this, I formed the following assumption which I needed to validate:

Users find it difficult when searching for syns through the Slimming World app.

My process

The process I followed during this project.

Empathise

User research

To start, I rounded up a total of five users (friends and family) who were familiar with SW and the app and asked them questions about their own experiences. I then set some some simple tasks for them to complete to highlight some usability pain points. below are some of the questions I asked with some key observations.

  1. What do you use the app for?

All users said they mainly use the app to check how many syns there are in a specific food or meal.

2. How often do you use the Slimming World app?

4 /5 users regularly use the app. Once or twice a week.

3. Where/when would you most likely use the app?

4 / 5 users said they would use the app whilst food shopping and before prepping meals in their own homes.

6. You are looking to see how many syns are in a tin of Asda chilli con carne. Show me how you would do that.

4/5 hesitated when trying to find the search input. Eventually, they went to the burger menu. 1/5 remembered from last time and clicked the banner. Not easy at a glance.

7. On a scale of 1 (very easy )-5 ( very difficult ). How did you find the existing syn search experience?

3 / 5 users scored a 2 for the difficulty level of the existing syn search feature. Users stated that they

The information above not only validated my assumption, It provided insight around user context and highlighted some key usability issues. I then moved on to define.

Define

I placed the research into the framework below:

A simple framework I used throughout the project.

The evidence from the user research helped me specify the what, who, when and where sections of the framework. The ideas and metrics were defined shortly after.

Ideate (Conceptualise)

To start this phase, I referred back to the user stories defined in the framework. See below:

As a user, I want to find out the syn value of different ingredients while doing a food shop, so that I can plan out healthy meals for the week.

As a user, I want to find out how many syns are in a meal when I am in a restaurant, so that I can decide what to order.

List ideas

From this, I wrote down some basic ideas and conceptualised screen flows for each one.

  1. A Filtered syn search feature

As the user typed in a food or meal, the list would filter, narrowing down the result as you go.

Filtered syn search screen flows.

2. Filtered syn search with barcode scanner

Same as above but the user has the option to scan barcodes to retrieve the syn value.

Filtered syn search with barcode scanner screen flows.

3. Filtered syn search feature with images

Utilising images within the search as a way to find products faster.

Filtered syn search feature with images screen flows

4. Filtered syn search with predictive behaviour

A search that offers suggestions and recent search activity.

Filtered syn search with predictive behaviour screen flows.

Prioritise

I then placed each idea to an effort vs impact matrix. The goal was to take one idea out of the above four and choose one that could have the biggest impact with the smallest effort level to take forward and prototype.

Note* the following order of the ideas is based on my own technical and product knowledge.

My thoughts around the prioritisation of ideas were as follows:

  1. Filtered syn search feature

Technically, this may take the least time to implement out of the four ideas. However, this only addressed part of the wider user problem.

2. Filtered syn search with a barcode scanner

Although this idea would take longer to implement, it could have the biggest impact out of all four ideas. The barcode scanner could make it easier for users to search when shopping.

3. Filtered syn search feature with images

I think this visually would have great impact as we know images resonate better than a list of words.

There would need to be an image sourcing exercise which involves time and cost, alternatively, there may be an API out there but again, there would be a lead time to source and set this up. The imagery idea could also be an effective A/B test at a later date.

4. Filtered syn search with predictive behaviour

Although I approve of predictive behaviour within search , I think there’s a level of uncertainty around how effective this would be when searching for something as simple as syn values. Would it over complicate the search? Would I want to invest time validating this when there is another feature that could take less time but has more impact? I think this idea may be too risky to start with.

Based on this exercise, I decided that idea two was effective enough to prototype with the goal of showing it to the five users I selected for this project.

Prototype

Below is a link to the first working prototype I tested.

Test, Test, Test

Below is the scenario I asked users before they started the session.

You’re currently out shopping in Asda. You’ve eaten very well the past couple of weeks and would like to treat yourself to a nice chilli con carne with all the sauces. You have some syns to use up so you decide to check how many syns there are in the meal.

User test

The results from the first round of user tests were as follows:

1. The hook

Existing vs New

Metrics

  • Average time spent
  • Net easy score (Finding the hook)

Result — Existing vs New

  • 9 seconds vs 3 seconds
  • 4, difficult vs 1, very easy

2. The filtered syn search

Metrics

  • Net easy score (Interaction through the search)

Result — Existing vs New

  • 5, very difficult vs 2, easy

3. The barcode scanner

Metric

  • Net easy score (Interaction through the scanner)

Result

  • 5/5 users said they would find this feature useful.

Next steps

Based on the above results, It was clear that I had made significant improvements to the core use stories defined in the framework within the ‘define’ and ‘ideate’ sections of this article.

My near steps would be to continue to testing and improving the designs further until sign off. I would then use tools such as Zeplin to help aid the engineers and begin documenting functional requirements.

I’d also consider writing an optimisation test plan to further improve the experience post launch via iterative design changes based on core metrics and quantitative data.

Note* I do not work for, nor am I affiliated with, Slimming world. I did this because I simply enjoy solving problems!

Thank you for reading! hit me up on linkedin or follow me on Twitter.

https://medium.com/media/05d5fd32eda31cbd1b83287606744532/href


Slimming world — a UX case study was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here