Hidden Gems

Mockup of 5 iPhones showing home, search, folders, and listing screens from Hidden Gems app.

Overview

Hidden Gems is a conceptual app that I created for a course project focused on native apps. This project was my first foray into Google’s Material Design guidelines and Apple’s Human Interface Design guidelines. My goal for this project was to work within each set of rules and still execute my vision.

I was the UI/UX designer for this project, so I did everything from the initial concept and visual identity to user flows, wireframes, final screen layouts, prototyping, and mockups. I worked on the project from January through mid-March 2021.

My Process

Research

Before diving in to creating my app, I did research into existing apps for finding local businesses. Though there are a few apps that offer users a way to find local businesses, I couldn’t find any that did exactly what I saw my app doing that have gained much traction in the market. View my analysis of the existing apps PDF.

Separately, I did some UI research and analysis to observe the patterns and functionality in successful directory apps. I analyzed two main apps: Yelp and FourSquare. My intention for Hidden Gems is that it would function very similarly to these apps, so I got a lot of valuable information from analyzing them. View my UI research analysis PDF.

Screenshots from Yelp and FourSquare apps layered on top of text from UI analysis document.

Ideation

In the beginning UX phase, I created a project proposal in which I defined my projected users, listed the essential features and user stories, and created user flows and a user flow diagram. View the project proposal PDF.

Two user flows showing paths for using a filtered search and creating folders to save places in.

I extracted the list of screens I needed to create from my user flows, and then started sketching some low-fidelity wireframes.

Sketches of home, search, search results, filters, and business listing screens.

Wireframe

After creating low-fidelity wireframes, it was time to iterate! I added detail as I moved the screens into the mid-fidelity stage, and then I used them to create a prototype. I requested feedback on the prototype and made improvements based on the input I received. It took several more rounds of polishing and tweaking before I had the final screens.

Progression of home and business listing wireframes from low to high-fidelity.

Visual Language

Building on the idea of an opulent gem, the visual style for Hidden Gems is angular and sleek with a minimal color scheme. The mix of bright, almost neon, turquoise with mid-range teals and deep emerald greens communicates luxury without being unapproachable. For the icon set, I used Material Design icons as a base and customized them to have thinner strokes and sharper edges.

Hidden Gems logo, icon set and color palette.

Design

I created about 30 screens for each operating system. Though not always immediately obvious, there are meaningful differences between the screens for iOS and Android. This required me to essentially design the app twice, which was a great exercise in patience! The screens can be broken into several main categories based on function and content:

Onboarding: These screens give users a brief introduction to the app, plus an opportunity to turn on location services and create an account if they want.

Search: Since searching is the primary function of the app, the home screen doubles as the search screen. There are multiple places a user can tap to create a search - the search bar, the category cards underneath, or the image and search suggestion at the top.

Business listing: The business listing screen displays photos, reviews, and basic information about the business. Users can save the listing to an existing folder or create a new folder by tapping the bookmark icon or the floating action button (Android only).

Saved Places: Users can save places to folders so they can find them easily later. The app comes with two default folders: Favorites and Places to Try. Users can create custom folders here as well.

Account: Since users don’t need to sign up to use the app, there is a version of the account screen for guest users and a version for logged-in users. The guest version gently encourages users to create an account.

I also created several empty state screens for when a search returns no results, and for when a folder has no saved places yet. View all of the screens. (opens in new tab)

Various final screens from Hidden Gems app.

Mockups

I created a number of mockups to use throughout my case study. I used a mix of iPhone and Android devices to showcase both native apps. View all of the mockups (within the case study). (opens in new tab)

Mockup of iPhones showing onboarding screens.

Conclusion

Designing my first native app was an exciting challenge. My main goal for this project was to follow the OS guidelines and still bring my vision to life as much as possible. I achieved this by experimenting, running through numerous rounds of feedback and iterations, and pushing myself to take my designs right up to the edge of the acceptable standards in each OS’s guidelines.