Livecase places 08

Google Live Case

Google Live Case

Google Live Case

User flows, Wireframes | 2015

My team got our hands on a new product from Google. Think of it like a 3D printer specifically for phone cases. The cool difference was, if you have a design, it can also print that design with it so it's all melted and molded into the shape of your case and you end up with a perfectly wrapped-around custom-designed case. My team was responsible for creating the web experience of designing and buying that custom phone case.

I've always had an interest in working with physical products so this was a really fun and unique project for me. My team had one of the case-making machines so we could test the process from web experience through physical case. Thanks to that, we made changes in to the web experience to accommodate two findings: image resolution was very important, and the design needed to extend beyond the canvas to ensure a perfect print. Back in the web experience I added smart defaults, cues and friendly warnings that lead users toward a perfect design.

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.

My role

My big, overarching goal was to design an experience than enables anyone to easily create a beautiful custom phone case. One they can't wait to receive in the mail and proudly show off to friends, family, neighbors, even strangers!

I was responsible for defining the user flow, page layout, and interactions. Following an agile design/dev process and the principles of material design, I was constantly synchronizing with design and development. Our small nimble team was able to flex and change direction when the requirements changed — often!

Some of my handiwork is showcased below:
1. User Flows  |  2. Navigation  |  3. Wireframes

I was responsible for defining the user flow, page layout, and interactions. I worked closely with a designer and our development team to define and develop the site following an agile 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). 

Learn more about each aspect of the project:
1. User Flows  |  2. Navigation  |  3. Wireframes

The client
The client
google logo
The creative team.
Amy Jacobs - Sr. Interaction Designer
Sevan Darakjian - Sr. Art Director


Amy Jacobs - Sr. Interaction Designer
Sevan Darakjian - Sr. Art Director

 

1/  User Flows for Google Live Case

It was simple, people could create a custom phone case design by uploading a photo and stylizing it with preset filters (like Instagram) and buy it. But when you dig deeper, it's complicated! I'll save you the details — there were a lot. Defining the user flow was like piecing together a puzzle. I searched for patterns and dependencies and identified key milestones. Like a puzzle's corner and edge pieces, the milestones and their dependencies built the framework, filled in with patterns in-between.

Places page flow

Wireframe: mobile and desktop user flows for Google Live Case (Photos)

 


2/ Navigation for Google Live Case

Most navigation (nav) systems don't have a sequence. For example, the nav on this site has a couple links and it doesn't matter which order you click them in. Other nav systems are very sequential, like a checkout in which you go through steps for the cart, your billing info, your shipping info, and finally to review your purchase.

The Google flow is a hybrid nav. For each step forward, you unlock a feature and have total access to all previous features: your photo, its size and position, visual effect filters, and the case finish – do you prefer matte or glossy?  Designing this navigation was a fun challenge!  I designed, tested and tweaked a handful of options.

Navigation Exploration Copy

Wireframe: an exploration of navigation methods

 


3/ Wireframes for Google Live Case
3/ Wireframes for Google Live Case

Occasionally throughout the project we would encounter a new constraint. Sometimes a new requirement, other times a complexity regarding the development. Each one presented a challenge: how do we account for the constraint (e.g. an additional required step) while maintaining the best possible user experience? I would brainstorm a few ideas then lead a little workshop with the designer, developer, and QA lead to share and test my ideas and together choose the best direction and hit the ground running with detailed wireframes and designs the next day. We were lean, mean and created a gorgeous site!

PL-1.0.0 Select Phone
Livecase photos 3
PL-1.0.1 Select Phone | Phones Dropdown
Livecase places 07
PL-1.0.2 Select Phone | Selected
Livecase places 08
PL-3.0.0.4 Style Case | Styles Nav Exploration
Livecase photos 7
PL-3.0.1 Location | S. Korea Alert
Livecase places 10
PL-4.0.3 Preview | Wallpaper, Save and Share
Livecase places 11

This project was completed in 2015. Since then Google has had time to add enhancements that weren't feasible for the MVP project I designed originally, like an all-in-one single-step process! It looks sharp – nice work, Google!

The site is live, however it has undergone a redesign since the original site launched in 2015. Check out the latest Google Live Case site. I love the enhancements that auto-advance you through the journey.
Nice work, Google!

The site is live, however it has undergone a redesign since the original site launched in 2015. Check out the latest Google Live Case site. I love the enhancements that auto-advance you through the journey. Nice work, Google!

The site is live, however it has undergone a redesign since the original site launched in 2015. Check out the latest Google Live Case site. I love the enhancements that auto-advance you through the journey.
Nice work, Google!

The site is live, however it has undergone a redesign since the original site launched in 2015. Check out the latest Google Live Case site. I love the enhancements that auto-advance you through the journey.
Nice work, Google!

amyleacoates@gmail.com

“Usability is not a quality that can be spread out to cover a poor design like a layer of peanut butter.”

— Clayton Lewis

© 2018  This website was designed and built with ♥ by Amy Lea Coates.