Chota means find — A UX case study
Chota aims to help people find places of interest in a new city. Here is how I designed it.
The past six weeks have been a cloud of daily deadlines, post-its and sharpies, rumpled sheets of paper, moments of epiphany and moments of doubts. I have been sinking in information from different subjects on product design, and now, I and my team of code ninjas were given a task to work on an actual product.
We called the product Chota.
Product Brief
In a very official looking document presented to my team, we were instructed to do the following within the next six weeks:
- To develop a system that efficiently aids people to find places of interest and provide a user friendly interface for users to easily use the system.
- To create an experience that is social and get people to see interesting places that their friends have been to and also interact with those places.
Research
To further understand the product brief, we conducted a three day design sprint. The goal of our design sprint was to know our desired target market, define our minimum viable product, and decide on the most feasible technology stack to use. After the 3 long days of writing, pasting and voting on ideas we came up with the following:
Persona
To find a persona, we had to define some criteria that the persona had to meet. Some of them includes someone who travels a lot, who stays in urban/suburban areas, who is outgoing and adventurous, and someone who loves his/her smartphone.
At the end, we came up with Saint-Sami Ganja, a 24 year old freelance developer, whose job requires him to travel constantly. As an outgoing individual, he needs to find cool places to go and hangout in this new city.
Minimum Viable Product
After defining our persona and highlighting his pain points and goals, we had to narrow down and define in specifics what our minimum viable product would be able to do. After a lot of sketching and voting. We decided that Chota would be able to do the following:
- Search for places
- Create pins of the places you have visited
- View the latest pins of your friends
- View the latest pins from your favourite places
So in developer terms, we were basically just doing some CRUD commands (Create — Read — Update — Delete, I had to ask!). After defining our MVP, we created a storyboard to fit what we plan to do with Chota.
Technology Stack
During our sprint process, I noticed that most of the sketches and ideas pivoted towards a mobile application rather than a full web application. Knowing the current strengths and capabilities of my team members, trying to develop a mobile app within the given time frame was not looking feasible. So I suggested that we had a little discussion on our technology stack.
Now, this was more of a thoughtful disagreement phase rather than part of the sprint. We put into consideration the time limit we were given, our current knowledge base and our team strength. After a whole lot of considerations and an advisory session from our Learning and Development coordinator (herein referred to as Ayamatanga — pronounced as I Am Atanga), we decided to build a mobile-first web application.
User Flow
With the information gotten from our sprint, I went ahead to prepare an ideal user flow for our persona on the platform. When designing the user flow, I put into mind new users coming to our platform to solve an urgent need of finding somewhere; so I made sure the sign-up hassle wouldn’t stop them from using the platform for the first time.
The resulting user flow diagram had 8 views, this stage helped me greatly in planning the Information Architecture and sketching my wireframes.
Wireframes
Wireframing gives the designer an opportunity to walk through the structure of the application without getting distracted by some design elements such as images and colours.
As always,
I picked up a blank sheet of paper,
put my favourite music on repeat,
and drew away!
After a lot of funny looking sketches, I settled with a few good looking ones. Please don’t laugh o!
Visual Design
My wireframing phase was more of a multi task, because I was also tasked with coming up with a suitable logo and brand identity for Chota. Some of the design requirements Ayamtanga wanted to see was an identity that was youthful, social and adventurous — easy for him to say 😑.
Well after all his big grammar, I came up with the following concept,
And eventually this,
This helped me prepare the final brand guidelines that I shared with my other team members. The guidelines specified things like the minimum spacing and sizes, logo variations, colour schemes and typography.
I then used the style guides to design the final user interface of Chota. With the data gotten during our sprint, I designed the UI with three major actions in mind:
I have to confess, I had a hard time designing the user interface because I didn’t discover the magic of re-usable components and design systems on time while designing. As a result, I had to do a whole lot of redundant tasks!
Thank goodness I’ve discovered a tutorial on creating design systems with Figma, and I’m currently learning my lessons.
Prototyping
I designed and prototyped the user interface using Figma. You can check out the final prototype using this link,
Tools Used
Every designer I see seems to own a Macbook, but I still did all of this work on my good’ol Windows! I’m still waiting for the person that’ll gimme my first Macbook shaa.
Other tools I used during this project include,
Inspiration: Dribbble, Muzli, My Music Library
Communication: Slack, Trello
Design: Pen and Paper, Adobe Illustrator, Figma
Documentation: Google Docs
Prototyping: Figma
Developer Handoff: Figma
Thank You!
I want to specially thank my gallant team members for their collaborative efforts, their passion and vibe towards the project, and for understanding when I blame it on creative-blocks (if there’s any word like that), for not delivering some designs on time.
I also want to thank Ayamatanga, for his close guidance, support and ginger while we were working on the project. And last but not least, my sweet laptop, for not freezing when I open more than 10 browser tabs 😄.
If you really enjoyed this article, and didn’t sleep off while reading it, please let me know by 👏 or giving your feedback in the comments!
