Localeyez Case Study

Go To PrototypeGo To Figma File

Discovery and Research

Survey

The research was conducted by my teammates. My role was to take the research given to me and create a mobile version of Localeyes that was similar to their web based application.

Pain Points

1. Creating a cohesive mobile experience that is similar to the web based application.
2. Creation of an interface that is spontaneous and organized for a diverse user base.
3. Users would like an app that facilitates event coordination between friends and family.

Audience

The target audience for LocalEyez are people between 21 and 5o years old that make a salary between $30,000 and $120,000 a year.

Diverse target audience living in Urban settings.

Interest in spontaneous social interactions and and organized event experience.

Desire to easily share and communicate event details with other Localeyez users.

Persona

Company Constraints

Localeyez has an established user base for the companies web based application. They want the users to have a cohesive experience while using the mobile app. The below images are from their web based application.

LocalEyez needs their mobile app to follow a similar mental model and has asked that I create the UI with the same color palette and typography.

Site Map

LocalEyez provided me with a sitemap of their web based application to help guide me in the creation of the mobile application.

Wireframing Process

Sketches

Sketches

Wireframes

Wireframes

UI Design Process

Mood Board

The team provided me with this mood board for inspiration. I liked the usage of clear and detailed imagery. The photos with the do, bicyclists,and the bar let you know exactly what will be happening at an event. I wanted to bring that element into my design. The mood board contains the Localeyez color palette as well.

Logo Design

The Localeyez company is still very small and they have been using the Sigmar One logotype as their brand font. For my first iteration of the logo for Localeyez, I added an oval around the font to give it some more cohesion. However, I want to update the logo so that it stands out. In my sketches I have some good ideas but I was short on time.

Palette Constraint

Working within the confines of this color palette was not an easy task. I ended up using the neutral colors in the palette and emphasized the event images and event category gifs to bring life to the Localeyez app. The palette did not need to be flashy since I opted to use photos as the primary focal point within the app.

Blue: #0191DE
Dark Brown: #4B3C31
Light Brown: #80766E
Gray: #EFEEEC
White: #FFFFFF

Typography

The typography that I chose for the Localeyez app was used mainly for event headings and descriptive material for events. I wanted the headings and the body text to be easy to read while also creating some hierarchy within the event information. The headings within the app used Abril Fatface Regular. The event details like time, location, and description used Yu Gothic UI Bold and Yu Gothic Ui Regular.

Mockups and Prototype

mockups

GIF Creation

I wanted to bring vibrant and beautiful imagery to the app. I decided to explore the usage of GIFs for both the login experience as well as the onboarding experience. User's are prompted to select their interests from broad categories which feature related GIFS. Once a broad category is selected, a drop down menu of sub categories are available for users to pick more specific interests.

I had to use GIF creators outside of Figma to turn open source videos into looping GIFS. Thing to note, the utilization of GIFs is available in Figma but it isn't available in Adobe XD.

Usability Testing

Usability Testing: 6 testers
100% were able to create a new user account
83% liked the animated background for the login screen
50% liked the logo
Making choices to add to personalized profile ⅚ were successful
83% like the have the event categories being GIFs



Final Thoughts

Final thoughts

Go To Figma File