Google wanted to empower Android users to create a personalized case for their phones.

My goal was to design an experience than enables anyone to easily create a beautiful product. One they can’t wait to receive in the mail and proudly show off to friends, family, neighbors, and strangers.

Through an iterative process I determined the best number of steps, the most appropriate order, and how to intuitively get from one step to the next (or back). That process looked like this:

1. Optimize the user journey. 

I gathered all the information I could get from my client, like: who are our users, what are their options, and what were my client’s business goals. I learned that specific phone owners could design a custom case using a photo or location/map. They could stylize it, and buy their design on a matte or glossy case. My client’s goal: sell cases.

With goals and options in mind, forming a user flow is like piecing together a puzzle. I wrote all the options and goals down and looked at them as a whole. I searched for patterns and dependencies and identified key milestones. Like a puzzle’s corner pieces and frame, the milestones and their dependencies built the framework, filled in with patterns in-between. The user flow emerged.

 

2. Design the best navigation system possible.

As I did to define the flow, I started by identifying the goals, options, and constraints. I found answers to questions like: what will be the most common device and browser? What are its dimensions and how does the browser affect navigation and display? I tested and tweaked many different navigation options while thinking about the devices and browsers, consistency with other Google products and material design. These are all factors.


Challenges

Occasionally throughout the process we would discover a new constraint. Sometimes a new requirement, other times a complexity regarding the site’s development. Each one presents a challenge: how do we account for the constraint while maintaining the best possible user experience? Each time, I brainstormed a few ideas then held a workshop with the lead designer, the appropriate developer, and the QA lead to evaluate my ideas and choose the best path forward for everyone. One of these constraints came from our client part-way through the project. We learned that photos and maps wouldn’t be the only creative options for our users in the future, and each option might have a completely independent marketing campaign and require a unique landing page. That moved the ‘type of design’ step to the forefront, with a cascading affect on the navigation and flow. Originally, choosing your type of phone was first for three great reasons: 1) it communicates to users which phones are applicable, 2) sets the stage to preview their design on the exact phone’s 3D-rendered case simulator, and 3) allowed users to discover and toggle between their creative options. We searched for ways to incorporate the new constraint while maintaining benefits to the user, however only one or the other was ultimately possible and the new constraint was higher priority than benefit #3. It’s things like this that UX pros like myself a thrill! A new constraint? Problem solving? Sounds like fun!


See the design live

https://livecase.withgoogle.com/places

https://livecase.withgoogle.com/photos


The final product