LocalEyez
UI Design and Branding for a local activities finder app - Onboarding, Main Feed, and User Profiles
Summary
LocalEyez (fictional) is a startup that aggregates lists of events and activities specific to a user's preferences. By using machine learning, the UI changes daily to accommodate to someone’s interests, which they select at the time of signup, and can modify from their personal profile.
The company wants to develop an app to correspond with their website, which is also still in early development. They are willing to make a few branding adjustments, as they don’t yet have a logo.
My Roles & Responsibilities
Review the company’s provided personas, site map, mood board and basic branding materials to define requirements for UI Design.
Ideate, Sketch, Wireframe, and take peer review suggestions into consideration to design High Fidelity Mockups.
Project Scope
Determine content structure and layouts for the Onboarding Experience, Main Feed, Event Page, User Profile, and Friend Profile.
Design the UI for each screen.
Time Constraint: 3 weeks
Provided Personas & Branding Materials
Screenshots from Thinkful’s assignments
Design Requirements
Minimalist with good use of white space, on the border between fun and professional
Only introduce one more new complementary color to the brand
Comfortable balance and organization of images and text
Apps Looked at for UI and User Flow Inspiration -
Lumosity: Onboarding and signup
Tumblr: Select interests flow
Airbnb: Feed design and info pages
Swarm App: User profiles
Initial Sketches, Wireframes, Earlier Mockup Screens
Revised Style Tile
Key changes:
Simplified logo
Updated fonts
Restyled icons
Updated images
Onboarding Experience
Splash screen with logo and CTAs
Enter Location
Main Feed
Event Info
User Profile & Friend Profiles
Prototype
Previews best on a desktop computer.
This limited prototype first takes you through a demo of the onboarding process, and then leads to the rest of the app.
Hit “R” on your keyboard to restart.
Final thoughts
In the real world, a team of UX Designers would be working in collaboration with animation experts who could create a more lively experience than this basic demo. Designers would have to ensure their screens are as finalized as possible before passing on the work, and still collaborate through multiple iterations.
This project provided a great example of the importance of early and consistent testing. A peer review and basic test was conducted after designing the first set of mockups in color, and accessibility issues (for colorblind users) regarding the red/green palette were resolved early-on, before final mockups were made.
I would recommend repeating this design process for the next set of screens for the app - a user flow to edit their list of selected interests, a notifications page, friends list, and community feature. Users can then access these new screens via the icons that have already been incorporated on their profiles.