Project
Hoppin’ App Design
Role
Brand & UX/UI Designer
Duration
2 weeks
This project was for Data Visualization class in design program at SFSU. The original project was to design a map but I wanted to increase the difficulty of the project by designing a map that is interactive and integrating it into a mobile app to add UX/UI challenge for myself.
PROBLEM STATEMENT
Nowadays, planning bar hopping events is challenging due to busy schedules, an abundance of bar options, and high costs. This has led to a lack of interest and indecisiveness among individuals, resulting in the loss of social benefits such as bonding and networking as well as discovering new hangout spots.
HYPOTHESIS
A tool that simplifies the decision-making process, and provides a fun and enjoyable experience will result in increased social interaction, better bonding experiences, and the discovery of new hangout spots.
WHY?
The consequences of the modern lifestyle made it challenging to organize gatherings and discover the history or the culture of the city because they do not want to spend time planning such activities in their busy schedules.
STARTING WITH QUESTIONS
HOW MIGHT I…
make bar hang-out planning easy for individuals or groups of friends?
make it possible for people to discover new bars and enjoy SF neighborhoods?
make other neighborhoods rather than downtown, Little Italy, Tenderloin, or Mission attractive for bar hopping?
display the neighborhoods in an interactive way instead of an ordinary list?
THERE MUST BE SOMETHING OUT THERE
I searched on the internet thinking that there should be an app to suggest bar hopping routes. They were all social media-like apps as they are mostly focused on seeing what other people drink or where they hang out. However, I did not come across any route-generating apps.
PERSONA
After my market research, I created a persona that would reflect
the app’s target audience:
Adults between 25 - 40 years old
Working professionals looking for a hassle-free gathering with other people over drinks after being in front of the computer.
Tech savvy, mostly working in the tech industry, and bored with Yelp.
They care about experiencing the history and culture of where they live.
These people are busy people who do not want their chill time to be difficult to plan while willing to discover new spots.
VISUAL RESEARCH
During the research phase of my app design project, I placed great emphasis on conducting comprehensive visual research and creating inspiration boards for both the map design and brand identity aspects of the application.
To inform the map design, I delved into a thorough exploration of visual elements, including color palettes, typography, iconography, and layout patterns, to enhance the user experience.
I curated a collection of compelling visual references on an inspiration board, aligning them with project goals to communicate the intended direction effectively.
Similarly, I undertook extensive visual research to establish a strong brand identity, studying brand aesthetics, graphic styles, and visual language trends.
By integrating research findings, I ensured a cohesive and engaging visual representation for the app's target audience. Through these meticulous research efforts, I fostered a user-centric and visually appealing app design.
SKETCHES & WIREFRAMES
MAP DESIGN
As the initial project was to design a map, I also designed a very simplified map of San Francisco showing the neighborhoods and also a map for each neighborhood demonstrating a bar hopping' route.
NEIGHBORHOOD MAP
CITY MAP
DESIGN
WELCOME
SCREEN
CITY
MAP
HOPPING
ROUTE
BAR’S
STORY
NAME
CARD
VISUAL SYSTEM
Based on the extensive visual research conducted, I developed a cohesive and impactful visual system for the app. This involved defining a consistent color palette that evoked the desired emotional response and aligned with the brand identity.
Additionally, I crafted a set of typography guidelines to ensure readability and hierarchy within the app's interface. Furthermore, I created a library of custom icons and graphic elements that complemented the overall visual aesthetic.
The resulting visual system successfully communicated the app's brand identity while enhancing the user experience.
LOOKING AT THE FUTURE
There is still a lot to explore with Hoppin’. As the duration was only 2 weeks, I focused on submitting a minimum viable product. However, in the future, I would like to conduct user testing and integrate results into design decisions to make the app more extensive and user-friendly.
QUESTIONS TO EXPAND TO
What kind of direction this app would take after user testing?
What if location services would be improved to make the use possible in other cities depending on the user’s location?
What if routes were generated by users and crowdsourcing?
What if the user can share it with the people they barhop with?