Augmented Reality App
UX Case Study
Laid out the basic flow for a user finding a car model, selecting a subsystem to work on, and completing all associated steps in the job
Brainstormed 6 options for the layout of the home screen. Initially was drawn to the standard 2 column setup in "A" featuring recent updates and saved files as a way to show multiple streams of content on the larger screen. Began expanding on the idea of 2 main states in "B" by splitting the screen horizontally instead of vertically. Branched out to look at how tasks might be displayed in "C", sliding in from the edge of the screen when needed.
This led me to thinking about how screen space might be saved in "D" when viewing a particular area by condensing the previous menu. Circling back to the main menu for selecting new files, I thought a card-based scrollable menu in "E" might better take advantage of the extended screen real-estate on the iPad. Finally in "F" I started playing around with the idea of a file explorer type set up that could combine search, icons and folder navigation.
Added 4 elements to each column to get an idea of the information density and readability on the screen. Added some dedicated buttons for search and revision history on the main screen to accommodate faster file locating by keyword. Placed an additional element behind the 2 columns to unify the 2 objects and draw focus toward the middle of the screen where the user will most likely interact with initially
The low-fidelity prototype focused mainly on locating files from the home menu and opening them either by search or by selecting from the 2 lists. The basic navigation and structural elements were implemented, with a focus on function over form.
View the Auto AugmentLow-Fidelity Prototype here
After showing the early design to several testers it was clear that the 2 column approach taken early on was functional, but lacked visual interest and felt like an iPhone layout stretched across a bigger screen. To fix this I tried combining some elements from the earlier 6 brainstormed options. After several iterations of how to best take advantage of the expanded screen real estate on an iPad I ended up redesigning the homepage with a scrollable card element that combined parts of designs from “A” and “D”
From the start I knew I wanted a preview window in the menu so the user could see what model they were selecting before wasting time downloading it. I took the initial preview window idea a step further by collapsing the selection menu when the user chose a subsystem. Additionally I added in a download callout over the preview window to convey the delay that will occur if the user loads the model.
After updating the size of the preview menu the first sets of colors in the design seemed distracting and inconsistent in their use. To better unify the experience, the 4 main colors were edited down to 3, echoing the outline effect used in the process steps to indicate a menu not yet clicked, while a solid menu would indicate selection without the need for another highlighted color, This second pass at the colors used along with a company logo helped improve visual continuity across the app as a whole.
The final high-fidelity prototype presented the new card-based project selection menu for finding content faster by taking advantage of the extra screen real estate and a way to save content for later.
It also met user needs for glanceability and ease of interaction with larger click targets.
Try out the high-fidelity prototype below!
Created a final mockup showcasing the final experiences created, highlighting a unified color scheme and consistent use of elements such as the use of drop shadows to elevate elements and denote what is clickable by the user.
For discussions about my work or any future projects feel free to reach me at coreyuxdesign@gmail.com
