About

02 Local Eyez

View Prototype

Duration
- 7 days

Team
- 3 people, there is a lead product designer, a product designer and myself who is the UI designer, but it's a small startup so I wore many hats.

Role & Scope
- UI Design
- Branding



Client
- Up-and-coming startup, Local Eyez, that focuses on aggregating a list of activities specific to the user's preferences. It is exploring the idea of a monthly membership that provides the user with access to experiences, like an introductory ceramics class, a kid-friendly Shakespeare in the Park, or a free adoption event.

Solutions +

Solution Screens 01

User Story 1 -  I want to “ find a local activity to attend."
This screen allows user to search for activities based on location and proximity, then user can filter through the selections based on time and interests.

Solution Screens 02

User Story 2 -  I want to “ find personalized activities that is relevant to me”
This user story was addressed during the onboarding process where users can choose to follow their local event organizers, as well as a curated collection of events based on themes.

Solution Screen 03

User Story 2 -  I want to “ find personalized activities that is relevant to me”
This user story was addressed during the onboarding process where users can choose to follow their local event organizers, as well as a curated collection of events based on themes.

User & Audience +

Age: 21 to 50 years old
Annual income: $30,000 to $120,0000
Location: Large Urban Areas, United States
Interests: Food Tours, Bar Crawls, Trivia Nights, Hiking, Festivals, Block Parties, Art Walks, Sports, Nightlife, Concerts, Board Games, Family Friendly,
Attitudes: Optimistic, Social, Seeks Spontaneity
Challenges: Social Isolation due to Urban Culture, Lack of Time and Organization for Family Outings, Friends are Picky

Personas

There are 2 primary personas, I need to make sure Local Eyez appeals to someone like Nick, who is a sporty engineer and Heather, who is a working mom. Both values efficiency and are interested in events in close proximity.

Project Scope +

Site Map

The project manager provided a site map for their website that i can use a reference for the app I am working on.

Website Wireframe

• The client provided these website wireframes as inspiration for the Local Eyez app. I will be taking some key features from the these web wireframes and translating them into the app version.

Moodboard- Before
• Client provided an initial mood board and logo, and because it is a new startup they haven’t finalized the logo or their brand identity. I had some liberty to play with some visuals as well as their logo.

Moodboard- After
• Upon reviewing their initial color palette, I decided to keep their cobalt blue as a core color but swap out the muted browns, these color doesn’t make sense since Local Eyez is an events app that wants to convey a sense of youth and vibrancy.
• I updated the whole color palette to be much brighter, while still keeping the blue.
• In order for this app to stand out, i chose decide to incorporate some illustration to really set Local Eyez apart from the competitors, please note I did not create these illustrations, I purchased these illustration from a talented artist Pablo Stanley.

Brand Identity Implementation

• I designed a short animated onboarding screen, this would appear right before app launch into the feed. This indicate to the users that the app is in the process of taking all the information the user just inserted and aggregating personalized events just for them.

Competitor Research

• Client mentioned that they are interested in seeing a onboarding process that is similar to Meetups and Flipboard’s. SoI did some visual competitor research on those 2 specific apps. Here are some insights below...

Meetup
• Their visual identity is very vibrant and fun, they effectively used strong and quirky visuals to make the onboarding process fun.

Flipboard

• It was notable that the onboarding process doesn’t start immediately with splash screens but rather inviting user to start using the app right away, by asking users to select topics they are interesting in, then it moves into splash screens.

Onboarding User Flow

• Using what i learned from onboarding competitor research, I took what was effective and remixed them in to the Local Eyez user flow.

Onboarding Flow Wireframe Sketch

• I took various visual elements from competitor research and explored how to incorporate them into the LocalEyez onboarding screens.

• Here are some winning sketches that i decided to move forward with.

The Feed Wireframe Progression

Earlier Stages
• While the earlier layouts were simple and straight forward, it just lacked a sense of fun this app is suppose to embody.

Final Stage
• Asymmetric layout to express the dynamism of the brand's ethos
• After a short click test feedback, I refined the final design to include progression dots for each categorization of activities.

Profile Wireframe Progression

Earlier Stages
•  since this app is suppose to be all about fun, i wanted to incorporate  some color and icons, the end result is the a fun and vibrant profile page that encourages user interaction.

Final Stages
•  since this app is suppose to be all about fun, i wanted to incorporate  some color and icons, the end result is the a fun and vibrant profile page that encourages user interaction.

Conclusion +

Usability Poll

• I performed usability poll on four participants through the company’s Slack Channel. Specifically on the onboarding process, I asked them to rate on a scale of 1-5. The highest being 5, the lowest being 1.
• As you can see, the satisfaction rate is pretty high, the only other major concern was from one participant, he reflected the onboarding was enjoyable, though it might be too long.

View Prototype

Next Case Study

say hi through...