Localeyez Case Study

Working with the Constraints of an Existing Product

I had one week to design a mobile based application that would fit with the Localeyez design system. My primary goal was to focus on the UI of the product and design an application that was of similar style to their existing web based platform.

1.
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.

2.
The Target Audience
Who is the current user base of Localeyez? How can I meet their needs?

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.

3.
User Persona
4.
Site Map

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

5.
Company Constraints
How might I create an application that is cohesive with the established design system?

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.

6.
Color Palette Constraint
How might I create the UI that is accessible, beautiful, and fits within the current palette limitations?

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

What did I learn when creating the UI Design?

Moodboard

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.

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.

Sketches
Wireframes
Gif Design

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.

Mockups and Prototype

How would I do this project differently now?

Play with the Prototype

Go To Figma File

Recent Works

 • 
Recent Works
 • 
Recent Works
 • 
Recent Works
 • 
Recent Works
 • 
Recent Works
 • 

Welcome to Daily Interaction 67

Add to Cart Button Animation on Hover

This example showcases moving lines around an image. The image also has a 3d rotation on hover.

do the honors,
hover over the button!

localeyez

UI development

Exolvuntur

mobile app

ijournal

web app