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. 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.
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.
LocalEyez provided me with a sitemap of their web based application to help guide me in the creation of the mobile application.
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.
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
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.
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.
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.
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.
I liked that I went with event title cards for users to get general information about events. However, the spacing and size of the text is not good. It isn't easy for a user to glance at the information due to the text hierarchy being off. If I were to iterate on this design, I would spend more time solving this problem.
If I were to iterate on this design, I would spend more time on the logo. I had some interesting sketches for Localeyez but at the time of this project my skills were more limited in illustrator. Now, I would have the skills to really develop an intriguing logo.
Since this was not a real like project, I did not have stakeholders to ask more questions about their branding and goals for their logo. Based off the information that I was given I wasn't sure what would have been a great choice either. I could definitely improve this aspect of the project.
fill in
fill in
This example showcases moving lines around an image. The image also has a 3d rotation on hover.
.png)
