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.
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.
I extracted the list of screens I needed to create from my user
flows, and then started sketching some low-fidelity wireframes.
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.
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.
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)
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)
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.
