PROBLEM

The client LocalEyez, a startup company, wanted to design a mobile app from an existing web interface app. LocalEyez needs to use an innovative machine-learning technology to learn the preference of its users’ interests to recommend local events and activities.

SOLUTION

LocalEyez is a mobile app that personalizes the user experience by learning their preferences through machine learning technology and matching them with local events and activities. The app will also make recommendations based on saved and purchased events. Users will also be able to search for new activities to do.

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, Bowling

• Attitudes: Optimistic, Social, Seeks Spontaneity

• Challenges: Social Isolation due to Urban Culture, Lack of Time and Organization for Family Outings, Friends are Picky

CLIENT EXPECTATIONS

The client is taking a new direction with their LocalEyez web app and would like to create a new mobile version of the app that utilizes machine learning. These are the client’s expectations for the new mobile app:

• Onboarding - The LocalEyez team wants to see an onboarding flow that is intuitive and similar to the MeetUp or Flipboard ‘s onboarding process.

• Remix “The Feed” layout for the mobile app - The team would like to see The Feed on a mobile platform, inspired by their web version, but it should incorporate new patterns and design changes.

• Redesign User Profile - The LocalEyez team wants the whole profile redesigned for the user to be able to update their bio, choose new interests, see an archive of their past events, fill out their payment information or add a location.

Airbnb Experiences: Users are able to find different categories of experiences on the feed. They are also able to find experiences based on location and hosts. The app is visually appealing with helpful thumbnail images of each experience with the ability to add them to your favorites. It also offers horizontal scrolling and a simple tab bar for a convenient user experience.

ClassPass: Users are able to search for things to do at gyms, fitness studios as well as salons and spas using filters by location, preference and choice.

Meetup: Meetup’s onboarding flow is simple and intuitive. It uses machine learning as well to suggest different local events based on a user’s preferences and location. Users can either find a Meetup group to connect with or create their own.

Foursquare: Foursquare City Guide allows users to search for restaurants and activities to do. The home page categories include breakfast, lunch, dinner, coffee & tea, nightlife and things to do. Users can also search for activities and restaurants by name, location, other categories, trending and top picks.

LOGO REDESIGN

I began the redesign by brainstorming different logo ideas and sketching them out on paper. I worked with the idea to incorporate an eye into the logo, but then decided I wanted to simplify it with just an LE. After choosing a design sketch that I liked, I set out to find the right font for the logo.

I ended up choosing the serif font Florent and used Adobe Photoshop to modify the logo to recreate my sketch idea. I added Local Eyez using the main header font, Sycopate and incorporated the accent desaturated yellow color and white on a dark blue/black background

I chose a new color palette for the LocalEyez mobile app as I wanted it to have a fresh and more exciting look with some bolder contrast of colors using a variation of the primary colors. The colors are more muted (desaturated) so as not to be visually overwhelming.

For the typography, I went with Sycopate Bold for the Header fonts and Oswald for the body text.

I wanted my design to have a simple, clean look and evoke uplifting and trustworthy feelings.

LOW-FIDELITY WIREFRAME SKETCHES

Before sketching the wireframes, I researched different patterns and looked in particular at the onboarding patterns and preference sorting and filters patterns.

A part of the assignment was to create a unique onboarding process, similar to MeetUp or Flipboard. I studied both apps in detail to observe their strengths and weaknesses with the onboarding process and sketched a simple, but intuitive onboarding process to guide the user towards picking their preferences.

I also studied the desktop wireframes and sketched new screens for each of the sections of the mobile app, referring back to the site map.

Visual Design & Mockups

I implemented the new brand assets I created and worked on the user interface of the LocalEyez App and designed mockups for the onboarding screens and also created a High-Fidelity Prototype for the Onboarding process.

I studied interaction and animation design and learned how to animate the logo on Figma. I also implemented simple animations on the screen transitions when a user interacted with the app. I made sure the animations enhanced the app and made sure they were not distracting.

I implemented all the suggestions from the users in the usability testing to iterate the design and improve the user interface and the user experience.

The final prototype also incorporates a scrolling carousel interaction on the Explore page, which makes the page fun to interact with and visually appealing. I learned how to design this feature on Figma, which allows users to continuously scroll through the images.