EYE ON Mobile Application
Location-based, event and promotions management for venues and attendees.
Team: 2 Designers, 3 Developers
I Worked On: User Flows, Sketching, Wireframes and High Fidelity Comps, Prototyping & Usability Testing
Duration: 30 Days
Platform: Mobile (iOS X)
Design Tools: Pen & Paper, Sketch, Invision, XMind & OmniGraffle
Overview
I was brought onto a project to help another designer complete user flows, identify and fill holes within the existing interface and interaction design, prototype, run usability tests and iterate on design while the app is currently being built.
Problems
1. Lack of strong user flows for engineers.
2. The existing design of the EYE ON app included unnecessary screens/steps that needed to be simplified to avoid user fatigue.
3. Additional features needed to be added within the interface with clear navigation and an uncluttered look.
User Flows
I was responsible for taking concepts and a few existing screens and created detailed flowcharts using OmniGraffle.
For this particular application, there are three main flows to consider:
1st Flow - A non-logged in user looking to test out the application and functions before being asked to register. When a user is ready to register, they will either create a profile as a vendor or attendee (with the option to switch between accounts.)
2nd Flow - User who wants to register primarily as an attendee. User will be asked to create a profile and customize it how he/she chooses by selecting categories of interest to help better tailor event notifications. Attendee will be able to purchase/reserve event tickets, manage tickets, discover local events, create friend groups and locate friends on a 2D, 3D or satellite view map, use AR technology and more.
3rd Flow - User who wants to register primarily as a event host/venue. User will create a profile with business and venue information. The event representative will be able to manage costs, ticket sales, specials, as well as push out updates and alerts to event attendees.
Simplifying Steps For Users
Some the previous designer's UI designs required a user to progress through multiple screens to complete a task. As you can see above, the first two screens in the original design were related but kept separate. A user could either search for local events by selecting: Today, Tomorrow, This Week or Choose Dates (which you could enter in manually on a new screen.
My Goal for V2 was to incorporate selections from the first step so that everything pertaining to dates was in one design. This way, the user has all of the possible options in one view which eliminates an unneccisary screen.
Early Insights From The Field
I tested the existing interface with 5 participants in order to uncover iconography and navigational uncertainties.
Version 1
EYE ON Symbol Overused
The owl represents Eye On and the function to see friends and events in an augmented reality (AR) view that users have never had before.
However, in Version 1, the owl placement in the top left blended in with the search bar and did not stand out as a button that could be clicked to take a user to the AR map. It was unclear what screen this button would take someone too because it was unrelated to the search bar.
The Eye On symbol was also used in the main navigation at the bottom of the screen which caused major confusion.
Grouping Features That Are Alike
For the new version of the map screen, I considered where the user would expect to see all map options. By including the EYE ON button in the vertical righthand side menu, along with the IDEO Locator and information options, these related options are organized neatly.
This means that the user does't need to roam around the screen if they would like to change their map view because all of the available options are in place.
Different Iconography For The Main Navigation
Understanding the common conventions that work well, such as the house icon to convey HOME, including this icon will take the guess work out of the app.
Since the map views are a focal point in the EYE ON application, having them live under the target/capture symbol located in the center of the menu is more intuative to the user.
New Designs
I needed to come up with the design of how a detailed event page would look in the app. A user would be able to purchase tickets through the app but also be able to contact the venue, choose to receive updates, share the event with others and get an idea who is already going.
Time-Boxing When Sketching
The time-boxing method helps me as a designer to generate as many ideas as possible within a small window. It helps me stay focused on the task at hand, define my MVP and provides amazing feature ideas to table for a later date.
Along with all of the pertinente event information, it will be important to have a strong call to action to purchase tickets within the app.
During this exercise, I sketched the idea of being able to receive an Uber $$ estimate of what it would cost to get from the user's current location to the event venue.
WireFrames & Mockups
To the left you can see one of my wireframe builds of the new event detail screen, and to the right, the final hi-fi mockup.
Design Decisions:
- I used the San Fransisco font's which Apple uses for the upgraded iOS 9 and OS X.
- The scrolling design was though out with a hierarchy; starting with a captivating event image and the option to purchase tickets followed by location, transportation and social information/options.
- Because the application dominantly uses blue's and gradients, I wanted to incorporate a pops of color in the final design so that different options could stand out.
