UI/UX Design
As an emerging UI/UX Designer, I am eager to bring my 10+ years of experience in the music, art, and creative world into the realm of UI/UX Design.
Introducing Gemma
The app that connects locals and tourists to hidden gems in their city.
Overview
Tourists often miss out on unique local experiences and businesses due to reliance on popular, overcrowded tourist spots and lack of knowledge. Locals often complain about overcrowded and highly stimulating environments, and are looking for new places to explore. My local tourism app comes in to connect both locals and tourists to new and exciting places in their town.
Goal
Develop a platform that connects tourists with local experiences, hidden gems, and small businesses. Focus on creating a user-friendly interface that offers personalized recommendations based on interests, location, and community reviews.
Timeline
Overall: 8+ Weeks
Discovery & Research:
2+ weeks
Design & Testing:
6 weeks
Role
UX/UI Design
UX Research
Team
1 UX/UI Designer
Tools
Figma, Fig Jam, Miro, Adobe XD
Research
Would you like an app that helps you find hidden gems based on your specific interests (e.g., nature, art, local food, etc)?
Analyze
Affinity Diagram
I used an affinity diagram in order to map out ideas and features that I wanted in a local tourism app. This helped me to remember what I wanted to include in the app.
User Personas
I created 2 personas based on the interviews and surveyed I conducted as part of my research.
I realized that I needed personas to keep examples of my user's needs in mind during the brainstorming and design process.
In order to build my personas, I used data such as age, personality type, and occupation.
The personas helped me to stay organized and build an app that would help users the most when finding local hidden gems to explore.
With helping users get connected to "hidden gems" in mind, I set up an empathy map as another way to organise my findings based on the interviews and surveys that I conducted. From this empathy map, I realized that my most important goals were to get to know my user on a personal level in order to match them with hidden gems and activities they would like to do in their city.
Card Sorting
To make sure that the site’s information architecture is aligned with user expectations, we had 6 remote card sorting sessions using Figjam. Our goal was to find smaller, intuitive groupings for the existing 36 product categories. After organizing the data, we ended up with 6 clearly defined main categories with 4-7 subcategories in each.
I wanted to create as many categories as possible that would cater to my user personas' needs.
The card sorting method that I implemented started with taking information that I gathered from my user interviews, and then I wrote down ideas and features to incorporate into my local tourism app.
The card sorting helped me to organize all of my ideas for the app in one place. It was a good starting point to have a visual element of the kind of app that I wanted to create.
Task Flow
Sitemap
With the business goal in mind, we make sure that our users reach the checkout screen without any hiccups. So, we sketched a current-state user journey map, to identify opportunities for improvement. We identified 2 unnecessary steps and potential dropoff points in the flow. By eliminating these from the new design, we ended up with a much faster checkout experience that contributed to conversion rates.
I wanted to create a sitemap as a layout of how I want my website to eventually be organized.
I realized that there were some extra layers that I wanted to put on the website, such as putting in genres for various open mics.
I eventually put in more detail than I had originally had planned, which made my app more organized and easier for users to navigate.
Tree Testing
I conducted a tree test on Optimal Workshop where I tasked my participants to find the path to review a business establishment and find a friend to connect with on the app. I had a 100% success rate in my tree testing for all participants involved.
Task Flow
Sketches
I began by sketching the initial designs for my wireframe on Procreate.
I wanted to use my sketches to brainstorm ideas for what my wireframes would look like.
The features that i used in my sketches was based on the interviews, user research and personas that I used during the research process.
The layout and arrangement that I created is influenced by social media apps such as Instagram and TikTok. I want the local tourist app to have a socializing element, and so I want to make it feel like a social media app as well as a tourism app.
My sketches helped me to see my ideas mapped out for the first time, and they gave me the confidence to move forward with my prototypes.
Below are the original Sketches I created for what became the Gemma app:
Interviews
During the idea-generating phase of the project, I conducted interviews over Zoom and Google Meet to gain insight into features that would help people look for activities to do and new places to discover in their city.
My findings showed that users want more interactive features, such as a livestream of a bar and a real-time noise meter.
For my case study, I interviewed two people, both from the Millennial generation.
With my interviews, I was able to brainstorm some ideas for features to include on the website and app.
How did you use your findings?
Surveys
After the project kickoff, I defined my research strategy and objectives. Understanding the target audience and their challenges were my priority. First, I built an online survey that had multiple-choice options. I received 100 responses from my initial survey. Based on these responses, I identified the following information:
Word of mouth and online research are the dominant ways users discover new places (with a strong reference for personal recommendations).
50% of users visit new places at least once a month.
Along with personal recommendations, users desire to read ratings and reviews from other users.
Along with written ratings and reviews, users prefer to see photos and videos capturing a reviewer’s experience at an event or location.
Empathy Map
With the goal of creating a seamless experience in mind, I strived to create a path in which users could easily find hidden gems and events that would interest them.
I chose this path because this is the first step in helping a user find local hidden gems.
I tested the task by asking some friends to test it.
I found the task was easy for my friends to follow.
User Flow
I chose this path because this is a way for people to review businesses and restaurants that they have gone to.
I tested my user flow within my prototype.
Creating this user flow helped me to understand what could happen in a realistic scenario of a user using the app, especially for someone who desires to write a review for the first time.
User Journey
I wanted to make a realistic journey of how a user would learn about the local tourism app, and how a user would use it.
I created likely scenarios based on my own experience as a user as well as based on the information that I collected from my user interviews.
I realized what some of the pain points during the journey would be for a user, such as anxiety with making sure a "hidden gem" isn't too loud for a user's preferred noise level.
After creating this user journey, I wanted to make sure that my app catered to as many preferences as possible, such as noise level, variety of cuisine, and more.
Quotes from the Interviews that I conducted
Wireframes
Using Figma, I translated my first sketches into low-fidelity wireframes. I included the fonts and the color scheme that I wanted to use for my prototype. At this stage, the wireframes were defined enough for some user testing. I’ve made a few alternations and moved on to creating high-fidelity prototypes.
I created both low and high fidelity wireframes. The lo-fi wireframes are white and gray, and the prototypes include the color scheme.
I used Figma to create the wireframes and the prototype.
I tested the wireframes with the presentation feature on Figma. I made a few adjustments with the menu bars and placements of the icons.
Prototypes
I made a few alterations in the wireframes and moved on to creating high-fidelity prototypes.
I made three high-fidelity prototypes.
My first prototype showcased cooler toned blues and purples.
For a sleeker design, I decided to create my second prototype with a neutral grey-toned background, and featured buttons in various blues and purples in order for the buttons to stand out.
In my third and final prototype, I decided to go with a different colour scheme to bring out the enthusiasm of discovering new places with the Gemma app. In order to do this, I decided to go with a warm-toned pink/orange/purple colour scheme.
Accessibility Features
In order to create an app that is accessible, I included a "Live Volume Meter" on the app to showcase a livestream of the noise level of an establishment. This gives information to users who may be hearing impaired or who may get overstimulated easily to look for places that have a lower volume. I also made sure to write text in bold so that text could be easily legible.
Learnings
My Final Prototype for Gemma
Usability Testing
I created a fully-functional, high-fidelity prototype of the new flows using Figma. I also began asking friends and family members to test my prototype. I performed 3 usability tests in the first round and 3 after iterating on the issues that we’ve identified:
Issue 1- Adding an event and a hidden gem
One tester was confused about adding an event or a hidden gem. They said it was unclear what the guidelines were for what was considered a "hidden gem", and whether events were located only at hidden gems on the app, or elsewhere.
Solution 1-
I created two separate pages, one for adding an event, and another for adding a hidden gem.
By creating separate pages, I was able to separate adding places and events on the app. I also created guidelines for what qualifies as a "hidden gem" and an "event.
Issue 2- Colour scheme
Another tester suggested that the colour scheme of the original app was not very warm or inviting.
Solution 2-
I created a different colour scheme for the app, in order to bring more life and vibrancy to the prospect of finding "hidden gems"
When I created a new colour scheme, I realised that the app created a more fun and exciting environment than the old colour scheme created.
Issue 3- Missing Mission Statement
Another tester suggested that I put a mission statement on the opening page of the Gemma app to give a statement on what the Gemma app is all about.
Solution 3- Including a Mission Statement
I included a mission statement, and I received feedback that it made the Gemma app more cohesive and understandable.
UI Design
While I was creating the Gemma app, I wanted to create a fun, exciting, and interactive design.
I used an orange/pink/purple colour scheme to invoke excitement at the prospect of finding a new place to hang out and have a great time.
I used style guidelines such as iOS Styleguide, and I took inspiration from apps such as Airbnb and Instagram in terms of style and look.
I designed for the iPhone 14.
The changes I made reflect the desire of users to have fun finding new places to check out in their area. My hope is that users have fun researching new places, and that finding new places becomes more accessible.
I learned so many valuable skills throughout the process of creating the Gemma app, including coordinating user tests, using colour schemes, animating prototypes, and other skills. I gained the confidence that I can learn and perform UX/UI Design, and I also have greater confidence to learn other design platforms in the future.
Next Steps
Moving forward, I would like to work with software developers to make the Gemma app an interactive and social experience. My dream would be for the Gemma app to be a mix between Airbnb and Instagram, where people can learn about new places as well as be able to form connections with other people through hidden gems.