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

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

Problem Space

Why a search-and-discovery app?

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

Potential users

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.

Competitive analysis

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.

Interview insights

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

Primary Persona: Rosalie

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.

Experience Map

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.

Primary Epic and Task Flow

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

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

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

Burundian living in Toronto | Dad, Husband, Entrepreneur, Storyteller & Product Designer | Tweep (@nsabiyumva_)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store