Chota Means FIND — A UI Case Study – UX Collective

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.

The Gang!

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.

Difference between mobile-first and responsive design…

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.

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!