01. overview
Introduction
Hillcrest Social is a LGBTQ+ community events, nightlife and business app that connects the LGBTQ+ community with other businesses, events and resources across San Diego county. This can range from the small beach-vibe businesses to downtown nightlife/events.
The main reason someone would download the app is because Hillcrest Social would hire photographers to walk around nightclubs and take people's picture. Once the photographer takes someones photo, they would give them a card that would state, "We Took Your Photo! Download Hillcrest Social to see them!".
Challenge
Although the photography card increases substantial amount of downloads, stakeholders are concerned because the user would only download the app to view/download the photos and not use the other features on the app. With that being said, how can we steer users to use the app to its full potential as a LGBTQ+ community events, business and social app while making the app easier to navigate.
Solution
Once the user logs in for the first time, have on-boarding screens that introduce each feature of the app where it shows different highlights on each feature.
To make the app be modern, and easy to navigate in a design standpoint, the title of each feature in the app should have bold font, where it will catch the user's attention and give the app more personality and engagement.
I developed wireframes to show a minimal, clean and modern design aesthetic throughout the app, and to show consistency. The use of full bleed and blurred background images in the interface is a current trend in UI design which would make a user easily navigate the app with something they are familiar with from other app layouts.
02. research
Stakeholder's Painpoints
"People would just download the app and go straight to the photo feature to download the photos from the night before, they won't explore the app. How do we steer people to use other features in the app other than just downloading the photos from the night before?"
“The UI design is not as organized and it is hard to navigate throughout the app. Very confusing”
User Demographic
80% Male / 20% Female
52% 25-34 years old / 20% 18-24 years old
San Diego, Los Angeles, Chula Vista, Tijuana (Mexico), Oceanside
User Personas
03. Design
Preliminary Marks
I developed some preliminary sketches for the final mark to show a more minimalistic and clean approach for Hillcrest Social. Incorporating design elements such as chat bubbles (social and community), a rainbow (LGBTQ+ Colors) and a san-serif typeface, brings a new modern approach.
Final Mark
For the final mark, I incorporated circles with rainbow colors that is represented in the pride flag. Also, I used the typeface, Avenir Black, which is a bold san-serif typeface and bold colors to give it that modern look and feel.
Icon Series
I developed these icons to showcase each individual feature of the app to make it easier for the user to navigate around the interface. By developing these icons, it makes the user recognize each icon to a certain feature of the app.
Low-Fidelity Wireframes
I started on the low-fidelity wireframes to get a good idea how the structure and layout will look like before adding any color and photos. Since I am working with the colors of the rainbow it was best to start with a black and white/grayscale layout first.
High Fidelity Wireframes
Once the low-fidelity wireframes were approved by developers, I started to insert the design assets, such as the color and photographic elements. The color choice is from the rainbow LGBTQ+ flag and resonates with the LGBTQ+ community. Since there are so many colors I decided to have the rainbow colors on each on-boarding page before the user uses the app to introduce the features in a colorful way. Doing so made the app less busy with the amount of different colors used. I then divided the colors of the rainbow to each feature of the app so everything is color coordinated and organized.
Prototyping/Journey Video
When I finished the high-fidelity wireframes, I started to connect all the wireframes together and prototyping the app. I learned about the user's journey and how little detail can make a huge difference. Every detail counts and noticed the user experience when they click something what will happen. I created a user journey video going through the whole app.