• About
  • Portfolio
  • Resume

Michael C. Albers

  • About
  • Portfolio
  • Resume

Remake the Display AR Mobile App

Company:
Ubiquity6, Inc.

Role:
Product Designer

Dates:
2018 - 2019

Description:

I was the first traditional Product Designer at Ubiquity6. I reimagined and redesigned our mobile app and organized our design system. (Images and videos are blurred to protect Ubiquity6's IP.)

Personas

During the Magritte exhibit at the SFMOMA in 2018, Ubiquity6 unveiled a technical proof-of-concept demo. To create an exceptional mobile AR app for consumers, we had to deeply understanding our users' desires, experiences, and goals. I created personas as a tool to help us align our decisions with our customers' perspective on the world.

View fullsize "Mapper" Persona
View fullsize "Creator" Persona
View fullsize "Player" Persona

User Flow Analysis

While creating personas, I also analyzed the current app's user workflows. The workflow diagram highlighted core functionality buried 2 clicks deep in the app. This analysis drove the new information architecture I created to optimize the user experience.

View fullsize Whiteboarding
View fullsize User Flow Analysis
View fullsize Groups within Flow

Information Architecture

The user flow work drove a new information architecture. I structured the new IA around AR content discovery, AR content interactions, and standard app infrastructure like profiles, settings, and notifications.

View fullsize Early IA
View fullsize IA Brainstorming
View fullsize Final IA

Lo-Fi Wireframes

With stakeholder approval for the new IA, I began low fidelity wireframing in Sketch. A master/detail design emphasizing AR content discovery with AR content metadata encouraged AR content interaction.

View fullsize Brainstorming
View fullsize Content View
View fullsize Map View

Lo-Fi Prototypes

With wireframes that embodied the new IA, low fidelity prototyping in Principle followed. The prototype tested live video as well as horizontal and vertical swiping. The 2-axis swiping was important to personally experience. Prototyping drove subtle but critical navigation and information layout changes.

View fullsize User Flow
View fullsize
View fullsize User Flow Augmented
View fullsize

Hi-Fi Wireframes

Working on a compressed timeline with a remote contract visual designer, we updated Display's visual style. More visual design explorations followed and combined with high fidelity prototyping.

View fullsize Welcome
View fullsize Home with Content
View fullsize Home with Map
View fullsize Profile

Hi-Fi Prototypes

High fidelity prototyping helped explore motion, animations, and microinteractions. Combined with the updated visual design work, a production-ready app came into focus.

View fullsize
Sketch prototype
View fullsize
Adobe XD Prototype
View fullsize
Framer X Prototype