A project of Irvin Fong, last updated November 20, 2017 | version francophone à venir

Case Study

A new way to discover food and drink


problem

1. Your friend messages you and wants to eat, but isn’t sure where? or
2. You feel like eating out, but you’re not sure what you want to eat? or
3. A friend posted a photo earlier of what they ate yesterday?
And so on...

Those are but a few of the problems that come up regularly, but I have yet to find an app to do it all, and well. Thus, I took an opportunity to dream up a service that combines the best features and offers a bit more.

As the grand tenet of user experience design states, "You are not your user", I wasn't sure if my ideas would work for others. So I decided to contact a few friends to find out, and that’s where the case study begins.

deliverables and other user experience design tools

deliverables

The tools and UX deliverables used were user stories, scenarios, user interviews, affinity diagrams, personas, customer journey maps, sketching, wireframes (low-fidelity) (Keynote, AD), testing: feedback, prototypes, mid-fidelity (AD), testing: usability, and wireflows

background

This was a one-person UX class project from Aquent Gymansium’s UX Fundamentals.

1

1. Research

preliminary research

User research, when done right, does not require that many users. According to Jakob Nielsen, usability expert, five users often proves enough to gather useful insight. After that, the information quickly becomes redundant*. To see this in action, I conducted seven interviews, and indeed, useful, new information became scarce.

However, if I merely contacted seven people at random, I might not get a good variety of differences in values, behaviours, and experiences. Therefore, I made sure to identify different groups beforehand and find people that met that criteria more or less. It was time to get out my first UX tool, user stories!

By pushing myself to come up with dozens of user stories– As I __________, I want to __________– I was able to identify these different groups. Below are three among them, of varying interest.

user stories

Stories are just a starting point, however. I followed up with scenarios, detailed user stories, for the more interesting stories, because I wanted to consider the different contexts and constraints that may influence or hamper an experience. Once I had a good idea of a variety of different people that might use a website or application to find places to try, I reached out to friends in the US, Canada, and France with ages ranging from early 20s to mid 50s.

Some were are foodies. Some less. Some could never recommend a place to eat. They all needed to find places though, so I was glad to hear from them all.

user scenarios

user research

Thus began the user interviews. It was fascinating to see the differences between friends who cooked, friends who loved eating out, and friends who mostly ate out for convenience and socially. Even within those distinctions, differences abounded.

user interviews

2

2. Analysis

making sense of the data

After the interviews, I had a total of 207 codes, although some were identical or extremely similar. To make sense of the data, I used an affinity diagram to cluster the information and figure out patterns and the range of reactions. For example, on one end, one user had looked through the entire list of Michelin star restaurants in his region while on the other end, another will not look beyond five results before changing the search key words. Some will look at results for five minutes and another for thirty, unless hungry. In regards to another aspect, some interviewees always looked forward to trying new places while others go out to eat only because their friends want to.

I also learned about their love and misgivings of popular companies that provide similar services like Google, Yelp, Tripadvisor and Lafourchette. It was interesting to see that moving abroad and having to rely on public transportation led one interviewee to stop using Yelp and moreso Google.

Based on the data, I saw six types of diners that were present in varying combinations in my interviewees. I decided to pair up the types to make three personas: a conscientious fine diner, an adventurous and analytical diner, and the easygoing diner.

A small section of the Affinity Diagram; I culled and sorted 207 codes from the seven user interviews.


Six types of diners


identify behaviors and values

Personas are important as they allow teams to not only better understand their users, but more importantly, not forget them during the busy and stressful design and development process. As time goes by, it’s easy to fall back on assumptions (and self-focused design) and risk making the wrong decisions. To make personas more effective, however, the key is to come up with a memorable story (and eschew random details about their lives).

Borrowing from the masters of storytelling, I looked into discovering the backstory of each of the personas. They don’t just ask a certain way randomly. No, they have motivations that are fuelled by a deep dark belief that can be linked back to their childhood or past. It’s so much easier to remember that someone appreciates fine cuisine because he grew up eating great food instead of that just being a random characteristic. Plus, with this story, actions and reactions become more or less predictable. Based on their stories, I know that one person is more likely to vet a restaurant choice than another who just loves hanging out with her friends.

With the story, I then chose names that would work in both English and French and then perused Flickr for some portraits that made me think of aha, this is my fine dining Charles, or chill Melanie.


persona #1:
Charles

Charles is a confident and doing well for himself. Behind the charming facade, however, is a guarded individual. From a young age, he became self sufficient. Years in the kitchen has led him to became quite the cook. Plus, his childhood in the countryside has taught him what a difference simple but fresh produce and grassfed livestock can make. He doesn't care for how his neighbors and fellow citydwellers go out because they don't have time or can't be bothered to cook. As a result, Charles will only go out if he knows a restaurant can do better. If something impresses him though, no one will sing as high of praises.

persona #2:
Sandra

There's no one funner than Sandra when it comes to food and drinks. She’s always noticing new places and knows just what streets to take, where to find the best parking , and what that new trendy superfood is. Her friends and coworkers wonder how she always has so much energy. She positively glows when they tell her about how they loved her recommendations. You’re sure you’ve never seen a smile so wide. Just make sure to schedule in advance. Her husband and two children ensure she’s often booked way in advance.

persona #3:
Melanie

Melanie is loud, but in a good way. People love to hang out with her, even ones she’s just met. Easygoing and with plenty to say, She thrives in a crowd. She’s not good at recommending places though. She just doesn’t care about food that much. Melanie mostly cares about a place being nearby or convenient to get to. For her, time spent with friends, not what people shove in their mouths, is what’s important. As a result, time spent looking for places is time wasted.


opportunities to improve

With my personas created, it was time to explore their restaurant searching experiences and more importantly identify places just itching to be improved. In total, I created five customer journey maps.

customer journey maps

uh oh!

What happened? This is no good. It's time to figure out why and think of how to fix this plummet in satisfaction.

peculiar behavior

Melanie mostly uses maps and doesn’t care to browse. When that fails, she’ll just give up, although she’s still interesting in getting parking or public transportation information. The problem is that the listings aren’t always available on the map. How could I transform Melanie’s journey into one that goes and stays up?

The problem is that maps (such as on Google) often take ages to be updated so browsing that way and not via a list often results in outdated and irrelevant maps. An immediate remedy is to make sure that the map views are regularly maintained. Also, adding in public transportation and parking information would probably make this map more useful for Melanie.

Sandra is not only adventurous in the culinary sense, but also in her travels. One of her favorite parts about traveling is trying out local delicacies, especially if it’s been a while since she learned about it from a friend’s post online. One frustrating aspect though is that menus are not easy to find and even when found may not be up to date. She thinks about how amazing it would be if only all the information was accessible and updated regularly.

Charles isn't one to spend a lot of time on the phone. So when there’s a reservation to be made, he prefers it to be online. But that doesn’t always work, so he'll have to call. What’s more frustrating is that the restaurant doesn’t always pick up, even during business hours. Fortunately, since he doesn’t eat out much, when he finds a place that piques his interest, he’ll put the effort in to make a second or third call to reserve a table.


3

3. Ideation & Feedback

1. brainstorm

Now that my users and their pains and frustrations are anchored in my mind, it's time to think of solutions to make their lives simpler and funner! It’s time to brainstorm. Before I ideate, however, I want to just get into the flow and just doodle a bit to get the fluff out of my mind.

2. think of solutions

The next step is one of the few times when quantity beats quality. By forcing myself to come up with a high number of ideas, more than a few gems come out. With 40 ideas, I came up with two fun activities to discover places, either through a proposed walk or via a brief quiz.

3. refine solutions

With all these ideas, it's time to cluster them together. Their juxtaposition allows for the fusion and refinement of ideas in addition to filtering out the infeasible or less appealing ideas. Aiming to make too many things will only result in a morass of mediocre functions. In fact, one interviewee had told me that if they saw too many features, they wouldn’t want to use it anymore. The resulting winners can then be translated into wireframes for the design phase.


low-fidelity wireframes


features & layout

I was excited to see if users would be interested in getting walking itineraries to get to know their city better, playing a game to see what they were craving, or tracing a path to remember the name of that place they passed that looked neat. So I fired up Keynote and Affinity Designer to make the low fidelity mockups above. As the feature set was to be determined, I spent little time ruminating about the navigation system.

user buy-in

With the wireframes created, I could now get a better gauge on interest and >buy-in. Do they still want a certain feature? Does one of the sillier ideas resonate among others? Which features cause hesitation, fear, or mistrust?

With feedback from two new interviewees as well as two former interviewees, I now had a list of features to implement that would make for a great minimum viable product (MVP). Now it was time to think about the technical constraints as well as the page layouts and the site’s information architecture.

For more novel ideas like this, which received mixed reviews, I learned that I needed to be much more explicit in visually explaining how it works and what it does. My users, and maybe you too, mostly saw a simple itinerary on a map.

4

4. Design & Testing

navigation & defined features

Without too many different screens or deep links, I decided to forgo card sorting and simply test navigation during the usability tests. To prepare for the tests, I created >mid-fidelity prototypes and an accompanying wireflow.

mid-fidelity wireframes


usability

Without too many screens or small, moving parts, I was able to play both computer and notetaker. The first test did not take very long and I had already gleaned a lot of insight, regarding confusion, desire for more information in certain areas, and other possible features.

usability testing

The second time around, I created a click-through prototype on Invision, which was great as the test was conducted remotely.

click-through prototypes

Iteration

My primary insights were that the “neighborhood view” where multiple pins were clustered together to give an overall view of result density was hard to understand. Also, everyone had different ideas of where to place and find personal information (a card sort would be interesting here). Lastly, instead of deciding for my users, I let them inform me of which filters they would use to refine results.

Mid-fidelity wireframes & wireflows

Wireframes are displayed in many different ways, almost mostly in grids. Although taking up more space, I prefer wireflows are they allow for a point of entry and provide useful context that allows even those less familiar with the project to follow what is going on. Going arrow by arrows, the information is accessed progressively and the information feels less overwhelming and more inviting. If it gets too complicated however I would probably use grids and a numbering system to indicate transitions and sequences.

5

5. Conclusion

wrapping up

Services to find places to eat or drink are a dime a dozen. However, many have their shortcomings, which led me to want to explore alternatives by improving the search and mapping experience. In addition, surprising hits were exploring by answering questions and discovering places while a feed of photos from local restaurants, bars, and coffee shops.

These wireframes are now ready for UI design and development. It took a while to get here, but because I followed the UX design process, success is more likely and less down to luck.

future questions

Some slightly popular features that didn’t make the cut are some map features (including parking, public transportation and special exploratory itineraries) or trip planning. To be researched and designed further.



Thanks for visiting!