LocalEyez | Wright Angles Design

Updating and reformatting UI to transition a local events application from web to mobile.

Summary

Local Eyez is a suggestive local events app that uses innovative machine learning to cater content to align with user interests.

Interactive content is determined by the user's current location, their profile (selected interests), and past attended or "liked" events in order to tailor an immersive experience. The app also features an automatic night mode toggle where local night life events are additionally displayed and the UI adjusts accordingly.

Role

Product Designer

UX Designer

UI Designer

Prototyping

User Testing

Deliverables

Competitive Analyses

Personas

User Flows

Wireframes

Visual Design

Design Iterations

User Testing

High Fidelity Mobile Prototype

The Audience

According to research data from our UX specialist team, the target audience is:

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, Bowling
Attitudes: Optimistic, Social, Seeks Spontaneity
Challenges: Social Isolation due to Urban Culture, Lack of Time and Organization for Family Outings, Friends are Picky

Tools

Notion

Figma

Canva

Adobe Illustrator

Duration

1 Week

(Design Sprint)

The Problem

LocalEyez LLC. needed to produce a mobile interface for their service that could be an aesthetic upgrade to their existing web version and also scalable to address the desire of the evolving market.

The mobile version needed to include personalized machine learning elements and responsive design to deliver a compelling experience for customers and promote social growth for the brand.

This all needed to be done within one work week.

The Solution

Through redesigning the app's interface and adding some personality flair with UI choices, I was able to bring some much needed freshness and fun to the overall product.

Day and night mode compatibility, and their respective event focus, also adds another layer of responsiveness that pans to individual user goals and needs.

View Product

The Process

MVP Business Requirements

How can users effectively find activities and events to attend?
How can users be confident that they have control over what content is shown to them in app?
How can users be enticed to be more active in the app?
How can we create a sleek modern visual design that will attract younger adult users?

3 Main screens to redesign:

Onboarding

Home/Feed

Profile

Competitive Analysis

I looked into 3 main machine learning events apps to get a better grasp on how to design a similar interface for the mobile version of LocalEyez.

Some key findings were:

Brand personality is mostly defined through onboarding and the home page layout.
Micro interactions and animations make the app more interesting and rewarding to use.
Explore sections are usually located near the top of the main/home page, signaling a user to actually explore within the app.

Personas

From data, also collected by the UX Specialist team, I was able to better visualize a design that would be suitable for concrete user personality types.

User Flows

Information Architecture

Now that we have fleshed out our typical users and their behaviors, let's see some of examples of how common interactions might play out within our app by diagraming user flows.

Flow 1 - account setup

Flow 2 - interest selection & home

Site Map

Ensuring content is organized in a manner that is expected and accessible by the user.

Wireframes

Based on prior information architecture artifacts and developed using Figma.

Visual Design & Branding

Mood Board

I compiled a collection of images and color swatches using Canva which inspired the color scheme concepts for the UI.

I also decided to pursue a contemporary frosted glass, neomorphic bubble design for the backgrounds of key screens.

Logo

I wanted the logo to be sleek, creative, and literal in terms of the pun local"eyez" (localize).

I want through a few design iterations but landed on an intricate series of circles that mimics light refraction in a realistic eye.

Style Guide

By categorizing all of the visual elements, typography choices, and final color palette decisions into a collective UI inventory I was able to ensure consistency while designing mockup iterations.

User Testing

Determining which portions of the design flow worked and which did not by observing participant interactions with the app.

Tested design assumptions and ease of accessibility through specific tasks listed respectively below.

Create an account.
Select interests (these will determine your Explore page content)
View an event via a map icon marker
"Like" the expanded event
View your profile
Switch feed to night mode

Design Iterations

After testing flows with 7 users, I looked over the data as well as impressions from the participants and moved forward with tweaking aspects of the user interface.

Old

New

Issue: Majority of users noted that the randomized arrangement of interest icons was a bit disorienting. They also didn't understand that tapping an icon would select it and move them to the next screen right away.

Fix: Added a responsive progress bar, text prompts, and color shifts. Redesigned and rearranged interest icon bubbles to be easier to view and understand their function.

Old

New

Issue: Similarly to the example above, most users didn't care for the interest icon shape, and also thought that having the "profile" title would be helpful for understanding the purpose of the screen.

Fix: Adjusted interest with new design and adjusted spacing of the past event images since users tended to gravitate more towards larger images during testing.

Old

New

Issue: Some users suggested adding some responsiveness to reiterate the machine learning aspect of the app.

Fix: To increase responsiveness I added an automatic message prompt that allows users to know that the app registered that they actually "liked" the event.

Old

New

Refined splash design to be more interesting and sleek in lines with the aesthetic I had crafted for the other screens.

Added ability for users to tap the eye and swap to a darker UI, highlighted the night mode that is available on the ho

In Conclusion

Outcomes:

During this design sprint I learned how to ideate multiple solutions for user issues and apply them to create screens that are clean and easily understandable.

After user testing and gauging impressions I was able to refined the overall aesthetic of the app to be more in line with successful company standards.

Next Steps for SkillShot:

With more time to further research, test, and develop this product I would most likely aim to:

Expand on night mode capabilities
Develop screens for button functions within the profile view
Include more options for preferences during onboarding process
Try out different layouts for event tabs within the home page feed
Ideate feasible enhancements to keep the app up to date with current industry best trends for social/event apps like the example featured to the right.

Since a large proprtion of our target audience are already likely Instagram users, I thought that exploring "story" interactions for events or local places could appeal to users.

Lessons:

User testing is crucial at multiple checkpoints in the design process, as common flaws usually come up with every new iteration.
Incorporating familiar icons and adhering to common UX design interfaces can ease cognitive load for users and promote a seamless experience.
Relying on preliminary user research can alleviate confusion and streamline a target audience, thus making the app more relevant for the company's goals.