PROTOTYPE

UI/UX design for citygong: an eXPLORATION app

Overview

I was approached by a client who had an epiphany around new entrants or tourist going to a new city. He felt that there was a gap in terms of helping them explore new places asides word-of-mouth. We brainstormed about the idea and I was contracted to carry out the UI/UX process thus CityGong was born.

Citygong appeals to people's need for exploration, connectedness and excitement by giving them access to a wide variety of choice and curated experiences.
‍

Role & Deliverables

Role: Lead Designer
Deliverables: Wireframes, User research, Interaction design, visual design and prototype.
Status: Beta

Design Approach

In the B2B space, where relationships and long-term value are crucial, design thinking helps to deeply understand the client’s pain points, enabling the creation of tailored, user-centric solutions that solves problems. I adopted this approach because it aligned well with the strategy and goal of the project.

Empathize

Research

GOALS:
- To understand the motivation/patterns behind user's decision of where to go.
- A deeper understanding of what determines what they chose to do.
- How users search for information before coming to a new place.
- What determines their choice of event or location.

METHODOLOGY:
Secondary research on the best products in the market for exploring new places/events to determine the gaps in the market. I conducted primary research by interviewing 5 potential users. I also supplemented my interview responses with some secondary research online to test my assumptions around user exploration habits.

TARGET USERS:
The primary target age range for this group is between 17 - 45, the target demography are new entrants to a city (i.e students, mid-high level income) who love going out and are usually extroverted. The secondary target demography are people already settled in the city i.e social butterflies, event managers and promoters.

Below are extracts of the interview responses translated into empathy maps.

RESEARCH REPORT
After sifting through the interviewees responses, I uncovered the following user needs:

  • Curiosity
  • Connectedness
  • Budget
  • Excitement
  • Variety
  • Learn/Knowledge
  • Validation
  • Show off

Competition & Heuristics analysis

For this part of the project I analysed 4 top rated event-based platforms and compared key features and what problems they address. Click the image below to see the results of the analysis.

Analysis Report Summary

I discovered that all the platforms I researched offered users a variety of great features. Every app had a feature I liked about it more that the previous one, only Eventbrite stood out in terms of addressing user needs as mentioned in the research report, however, it did not fulfil all the needs of my target users. I crosschecked a list of user needs against the competition. The image below depicts that.

DEFINE

PERSONAS

After I compiled the excerpts from the affinity maps, I created personas that represented the main user groups.

IDEATE

FEATURE PRIORITISATION

I decided to take it a step further and brainstorm the ideas for the actual features. I wanted the platform to be easy to use on the go, while exploring - it requires an easy interface, streamlined onboarding and easy access to the main features. The research part provided me with enough information to determine which features will bring low vs. high value to the user and is represented in the image below.

TASK FLOW

After defining the features of the app, I moved on to creating task flows for the app.

Information Architecture

After creating task flows for the app, I moved on to creating a site map for the app.

PROTOTYPE

Low-fidelity Wireframes

Below are selected low-fidelity wireframes.

High-fidelity Wireframes & Prototype

Click the link to view high-fidelity mockup and prototype of the app.

TESTING

I carried out usability testing through out the project, it was a non-linear process that . I had stakeholders test heavily during the ideate and prototype phase and weighed their feedbacks against the goal of the project so I did not lose focus. I implemented changes in areas where there was alignment.

CITYGONG IS IN BETA

TAKEAWAYS

What went well.

- Effective Features: Was able to identify what features were particularly popular and well-received by users, such as intuitive maps, personalized recommendations, or seamless search functionality, to understand what resonates most with the audience.
- User Engagement: Analyzing the aspects of the app that drove high user engagement, such as social sharing options, rewards for exploration, or interactive elements was a process that brought the most constructive feedback.

What did not go well.

- Onboarding Challenges: During testing, we understood that the onboarding process may have failed to properly introduce users to the app and how to curate their interest, leading to confusion or abandonment. We took the feedback and refined it for clarity and ease of use.
- Collaborative Issues: Reflecting on the internal process challenges, miscommunication and unclear objectives at certain points led to scope-creep and time wasted. We however got better at communicating using better and intentional strategies, it worked!