Citadin, a local search-and-discovery mobile app
Citadin is a local search-and-discovery mobile app. The app provides personalized recommendations of experiences near a user's chosen location, based on date, time, budget, interests, tastes and needs filters. It’s an app for people who are looking for or are undecided about where to eat, things to do or nightlife spots. Users can plan their outings in advance and save experiences to their favorites, in order to check them out later or relive them. They can read other users’ reviews and leave their own. In the future, and if this app is produced, Citadin will partner with local businesses and experiences organizers to offer special deals and discounts to Citadin users.
MY ROLE
Product Designer.
THE CONTEXT
Academic
THE TOOLS I USED
THE TIMELINE
10 weeks
PROBLEM SPACE
Why a search-and-discovery app?
The story starts two and a half years ago, when I moved to Toronto, and became a dad at the same time. I was really 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.
This is Iriza, my daughter.
Photo by Vanessa Paxton. Check her IG out, she's awesome!
Fast forward to March of 2020: the beginning of the User Experience Design Diploma Program at BrainStation. I decided to make this challenge the focus of my Capstone project… and here we are!
RESEARCH
How many people care about this?
Although I needed the app, I still needed to be sure that it would matter to someone else, before jumping into the design. First I researched how many people could potentially use it: I was mainly thinking about newcomers and/or parents of young children, like me. I discovered that, according to Statistics Canada (2016), 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. I was off to a good start.
46.1% of Torontonians are foreign-born and more than 60% have children (Statistics Canada, 2016)
Second, I needed to find out how Torontonians actually look for and find things to do.
I had some experience with this: every time started by typing “things to do in Toronto” and “where to eat in Toronto” in a search engine, the results I got were either tourist attractions, events sold by sites such as Eventbrite or sponsored “best things to do” lists from blogs and websites such as Blog.to, the Daily Hive and Narcity. These search results required time and energy to sort through all the suggestions, in order to find something that matched my tastes, fit my budget and met my needs. No bueno!
But, I needed more perspectives. So I reached out to some friends and asked them how they dealt with the problem... if it really was a problem for them...
RESEARCH INSIGHTS
It is a real problem!
I talked to Roxana (my wife), Danielle, Gretta, Francis, Robert and Olamide. Although all of them are foreign-born and are between 25 and 34 years old, it was a pretty diverse group. For example, Gretta has been a resident for 17 years, while Robert moved less than a year ago, from Europe. Roxana, Gretta and Robert are married, while Olamide is single, Francis is dating and Danielle is in a long-distance relationship. Roxana and Robert have young children while Gretta is dealing with teenagers (sigh).
The others didn’t have any children.
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.
COMPETITIVE ANALYSIS
Can the apps currently on the market solve the problem?
None of the folks I interviewed mentioned Foursquare or Local by Facebook as a tool they use.
However, I thought it would be useful to look into what users of those apps said about using them, as they're the most popular on the market. This was in order to gain further insights into the problem space and hopefully find some design inspiration; if not, mistakes to avoid.
LOCAL, BY FACEBOOK
The app helps you "keep up with what’s happening locally - wherever you are - whether you’re looking for something to do with friends this weekend or want to explore a new neighbourhood."
FOURSQUARE
The app "will lead you to the perfect spot - anywhere in the world. Get helpful, positive tips from our trusted global community and keep track of where you you've been and where you want to go, all in one place."
PRIMARY PERSONA
Who did I design for?
Allow me to introduce you to Rosalie, a persona I created from the research and insights I just took you through. While designing, I tried to put myself in her shoes, imagining why and how she'd use the app.
"I love eating out, but I have a hard time finding nice restaurants that are kid-friendly"
Rosalie is a 32 years old Ivorian. She 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 GOALS
-
Explore Toronto
-
Fun family times
-
Meet francophones
-
Eat out every weekend
HER PAIN POINTS
-
Culture shock
-
Finding activities that
-
are fun and kid-friendly
-
Sense of direction
HER BEHAVIOURS
-
Budget-conscious
-
Reading & leaving reviews
-
Adventurous
SHE ENJOYS
-
Outdoor activities
-
Farmers Markets
-
Latin music
PRIMARY EXPERIENCE MAP
What is Rosalie's current experience?
How does Rosalie currently search for and find experiences in Toronto? She said she has a hard time finding nice restaurants that are kid-friendly... Let's focus on that. Let’s assume she’d like to go out with her family for dessert this evening, but would like to try a new location… How would she search for the right place to go, without an app?
Chart 1: Rosalie's experience map for finding and deciding where to go for ice cream.
The areas squared in red represent the opportunities for design: there is an opportunity to design a solution that will produce results that take into account, not only Rosalie’s location and desired treat; but also, her budget and her need for a child-friendly space.
PRIMARY EPIC
Breaking down Rosalie's needs
This was my checklist to make sure I wasn't missing any important details while designing the app:
Table 1: the primary epic - searching a venue that serves good dessert
PRIMARY TASK FLOW
Designing how the system will process Rosalie's request
Chart 2: the primary task flow - the app's process as Rosalie searches for a dessert venue
IDEATION
Low-fidelity Sketches
Mid-fidelity Wireframes (Version 1)
The key features of this design were the bottom navigation and the filters page.
Bottom Navigation
The (floating) bottom navigation consolidated all of the app’s main commands at the bottom of the screen, for optimized accessibility. Some buttons were always visible, while others only appeared when the user needed them do. I designed this with Rosalie in mind: I wanted her to be able to use the with one hand, without needing to access any buttons at the top. Because, what if, for example, she has a big phone, or small hands, or both? What if she was using it app while holding her son... or eating pizza? How could I optimize the app's design for all these situations?
Filters Page
Unlike Foursquare and Local, all of the filter settings were on a dedicated page that only appeared when summoned by the user. The idea was to make the main interface clean and decluttered. However, the user could press a button on the bottom navigation to see what filters were being applied.
USER TESTING (PART 1)
Could this design work in the the real world?
I prototyped the design and sent it to 10 potential users with the mission below to complete, and a series of questions to gauge their experience using the prototype.
The mission:
Find a kid-friendly dessert bar/restaurant
-
When: Saturday, Jul 4, at any time.
-
Where: 1 km from 9 Queen’s Quay W.
-
Maximum budget per person: $25.
Chart 3: results of the first round of user tests, with 10 participants.
ITERATIONS
Going back to the drawing board
Some big changes needed to be made.
First, I needed to do some design iterations.
The main issue was the bottom navigation. Although it made the app more accessible, the menu was 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.
This said to me that, although it's good to think about accessibility, I needed to consider users' mental models too: how were they used to doing things?
Below is a chart of how I prioritized iterations.
Chart 4: iteration priorities map, taking into account users' feedback. The priorities are circled in red.
Second, I needed to break down the test’s mission into smaller tasks.
Version 1’s flow and interactions had been designed in a way that made it impossible to complete the mission unless the steps were completed in the right order. For example, you couldn’t set the budget unless you had already set the date, time and the address. For the redesign of the user test, each step needed to be a separate mission.
Mid-fidelity wireframes (Version 2)
I implemented all the planned iterations. In addition, I redesigned the bottom navigation and moved the search and sort buttons to the top.
USER TESTING (PART 2)
Will it work this time?
It did!
Chart 5: results of the second round of user tests, with 10 new participants.
BRAND IDENTITY
Gathering inspiration for high-fidelity wireframes
I started with a mood board.
The theme was: happy, adventurous, eclectic but familiar, safe but not boring.
Logo conceptualization
"Citadin" is a French word, borrowed from the Italian word "cittadino".
Adjective: of or pertaining to a city.
Noun: city dweller, urbanite, townsman.
Pronounciation: /si.ta.dɛ̃/
HI-FIDELITY PROTOTYPE
The latest release!
You will notice that I implemented additional iterations: I redesigned the bottom navigation (again), the restaurant cards, the header section and the filters page.
While there is still some work to do for the prototype to be fully functional, you can check it out and play with it by clicking here or by scanning the QR Code.
What's next?
Well, 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 in the section below. I'd love to hear what you thought about this case study and the app!