Designing Citadin, a local search-and-discovery mobile app

Image 1: two screens (Dine & Drink and Filters) of the app, and a screenshot of the Marketing website's homepage.

Summary

I designed Citadin for my UX Design Diploma's Capstone Project. It's a mobile app that provides personalized recommendations of things to do and places to "dine & drink" near a user’s chosen location, using date, time, budget, interests, tastes and needs filters. The app allows users to plan their outings in advance and save experiences to their favourites, read other users’ reviews and leave their own. In this case study, I will take you through the journey of researching for, ideating and iterating the app until its final version, and share with you some successes and failures I encountered.

Role: Product designer.
Timeline: 10 weeks.
Tools used: pencil & paper, Sketch, Adobe Photoshop, InVision, Protopie and Maze.

Problem Space

Image 2: Iriza, my daughter. Photo by Vanessa Paxton (Toronto).

The idea to design the app was inspired by a challenge I encountered personally: two and a half years ago I moved to Toronto and became a dad at the same time. I desired to get out and explore the city, but every time my wife and I were looking for something to do or a restaurant to eat at, we’d always find ourselves wondering: will there be space for a stroller? Do they have baby food? Does it work with the baby’s schedule? What if it’s too loud? Will they be able to heat her milk for us? If we don’t take the baby, will we get back in time for the sitter to get home safely?

As a former ‘Foursquare’ “mayor”, I re-downloaded the app to see if it would help. It did, to some extent… but the layout was clunky and overwhelming. I tried the new ‘Local’ app, by Facebook, but it was no better. Some friends recommended I try ‘Meetup’, but meeting new people wasn’t really what I was looking for. Fast forward to March of 2020: the beginning of the UX Design Diploma Program at BrainStation. I decided to make this challenge the focus of my Capstone project… and here we are!

Research

It's clear that I needed an app, but who else did? How many people could potentially use it, and what features would be the most important to them?

As an immigrant and a new dad in Toronto, I first I sought out how many people were like me and potentially facing the same challenge I was. My initial research revealed that 46.1% of Toronto’s 5,862,855 residents are immigrants (6.1% have been here for less than five years), and more than 60% have children (Statistics Canada, 2016). This data encouraged me to keep going.

Second, I sought out what tools were available to find things to do in Toronto. As mentioned above, I had some experience with this and had already been relying on websites such as Blog.to, the Daily Hive and Narcity. In terms of the apps I'd found, I decided to dive deeper into the most popular ones — Foursquare and Local — to gain further insights into the problem space, read user reviews, conduct heuristic evaluations and find some design inspiration.

Image 3: Foursquare — main issues identified in the reviews left by users of the app, in the Google Play Store, from December 2019 to March 2020.
Image 4: Local — main issues identified in the reviews left by users of the app, in the Google Play Store, from December 2019 to March 2020.

Next, I reached out to 6 locals, in order to gain a better understanding of how they dealt with the challenge of finding things to do in Toronto, as well as what they would need in a local search-and-discovery app.

I selected candidates with different lifestyles and experiences, because I knew these affected the types of things they like to do and how they find them. For example, Gretta has been a resident for 17 years, while Robert had moved to the city less than a year ago, from Europe. Danielle moved from St Catherines 2 years ago. Roxana, Gretta and Robert are married, while Funmi is single, Francis is dating and Danielle is in a long-distance relationship. Roxana and Robert have young children while Gretta has teenagers (sigh). The others didn’t have any children.

Image 5: some comments from the interviews.

I grouped the insights I got from the interviews into three main themes:

  • Planning: Torontonians have busy schedules. They like to plan how they spend their free time in advance. They’re budget-conscious and decisions are often informed by who they want to spend their time with. They’re open to trying new experiences, as long as they have access to detailed information beforehand.
  • Information: Torontonians rely on social media, local blogs and radio advertisements for information about things to do, events happening and places to visit in their city. When they’re interested in an experience, they do further research to see if it’s right for them, searching for photos, reviews, directions and special accommodations.
  • Childcare: Torontonians with children still want to go out and enjoy experiences their city, as long as they are safe and engaging for children or offer childcare services.

Ideation

Image 6: a photo of Rosalie, the primary persona (source: unsplash.com)

The first phase of my ideation process consisted of creating Rosalie, an amalgam of different key characteristics and needs of the interview subjects, and who would later inform my design decisions. For example, all of the interviewees' most memorable experiences had an element of food in them — therefore, Rosalie's main concern was to find nice places to eat with her family.

Her full profile

She is a 32 years old Ivorian who moved to Toronto from Lagos in the summer of 2019 when her husband Tunde, who works for a multinational, was transferred to the Toronto office. They have two children, Sarah aged 5 and Karl aged 3. They live in the East End. Rosalie is originally from Côte d’Ivoire: she’s primarily francophone, although she’s fluent in English too. She works as an IT Manager at a local non-profit organization. Rosalie loves Toronto, but she doesn’t feel at home yet. She would love to go out more and explore, especially in the summer as it’s the only time she can enjoy outdoor activities. However, it’s not easy doing things with young children. At least in Lagos, she could drop the kids at her in-laws’ house when she needed to. In Toronto she doesn’t have family or close friends she trusts, nor does she feel comfortable leaving them with a nanny. Besides, she loves spending time and doing fun activities with them.

  • Her main goals: exploring Toronto, fun family times, meeting francophones and eating out every weekend.
  • Her pain points: the culture shock, finding activities that are fun and kid-friendly and a bad sense of direction.
  • Her behaviours: she's budget conscious, she loves reading and leaving reviews and she enjoys trying new experiences.
  • She enjoys outdoor activities, farmers markets and latin music.
  • Other information: she's most active on Instagram and Facebook, and mostly uses her mobile phone to browse and do things online.

Next, I asked myself, how does Rosalie currently search for and find things to do in Toronto, without an app? Her primary concern is finding nice restaurants that are kid-friendly — how does she currently do that and what elements of her process can inform my design decisions?

To answer those questions, I drew out an experience app and populated with some insights I had collected from the research I conducted.

Image 7: Rosalie's experience map.

The areas squared in red represented the opportunities for design: there was an opportunity to design a solution that would produce suggestions filtered according to Rosalie’s location, desired treat, her budget and her need for a child-friendly space.

I broke down Rosalie's needs even further in order to not make sure each of them were properly considered in the design process,

Image 8: the Primary Epic

And then I illustrated Rosalie's interaction with the app and how the latter should eventually respond to her query:

Image 9: the Primary task flow.

Lo-Fi and Mid-Fi Wireframes

Image 10: the initial paper sketches. From left to right — the home screen without filters applied, the primary filters screen, the secondary filters screen and the home page showing the applied filters.
Image 11: Version 1 wireframes. From left to right — the home screen without filters applied, the primary filters screen, the secondary filters screen and the home page showing the applied filters.
Image 12: Version 2 wireframes. From left to right — the home screen without filters applied, the top half of the filters screen, the bottom half of the filters screen and the home screen with filters applied.

User tests and iterations

I conducted the first round of user testing after prototyping Version 1 using InVision. I uploaded the prototype to Maze, created a mission (using filters to find a kid-friendly restaurant) and questionnaires that I sent to 10 potential users (remote testing, because we were right in the middle of the first wave of the pandemic).

Image 13: a summary of Test 1 results.

The results of the first test were a disaster, due to two main reasons:

  • I had only prototyped one flow to complete the mission, while most of the testers attempted to complete it in other ways.
  • The bottom navigation — the gateway to the filters screen — was too crowded with tiny, user-unfriendly buttons. Furthermore, none of the buttons had labels. As a result, the ‘filters’ button was mistaken for the ‘app settings’ button. On the other hand, 70% of the users clicked the search button first, before thinking about using filters.
Image 14: iteration priorities after Test 1.
Image 15: a summary of Test 2 results.

Test 2, conducted on a different set of 10 potential users, with a mission broken down into smaller tasks that met the prototyped flow, yielded much better results and gave me the confidence to move into high-fidelity prototyping.

High-fidelity prototype

Image 16: High-fidelity wireframes. From left to right — the top half of the home screen, the bottom half of the home screen with the filters tab closed, the bottom half of the home screen with the filters tab open, and the filters screen.

You probably noticed that I implemented more iterations than anticipated: I redesigned the bottom navigation (again), the restaurant cards, the header section and the filters screen.

While there is still some work to do for the interactive prototype to be fully functional, you can check it out and play with it by clicking here.

Next steps

I’m already working on some additional design and interaction iterations for this task flow. Furthermore, there are pages that still need to be designed and improved. On the other hand, there are other tasks and features that I would like to introduce.

You are welcome to reach out to me on Twitter or LinkedIn, if you’d like to be kept in the loop about this project, other projects and future ones. Or even just to say hi. Alternatively, you can leave me a comment below. I’d love to hear what you thought about this case study and the app!

This will be all, for now!

Check out my portfolio to see more of my work. You can also follow me on Twitter @nsabiyumva_ and/or add me on LinkedIn