Product Customization Interface Design

 

Project live as of February 2019
Client creates high quality planners and notebooks that millions of people use on a daily basis. They now offer personalized versions of their products through DCKAP’s Productimize platform. With a rush to launch phase 1, the UX was not as strong as it could have been. This is Phase 2 of the project, focusing on the UX.

 

PROJECT DETAILS

Role: UX + UI Designer, Design Team Project Manager

Client Team: Wes Toyofuku, Kendra Ford, Charity Fortajada

DCKAP Team: Mohammed Anees, Andrea Sanchez, Jared Gambatese

Tools: Sketch, Invision.Studio, Paper + Pencil, Basecamp, Zeplin

GOALS

Streamline user flow and interface of the product customization platform to better communicate each step and all custom possibilities, creating a more intuitive process.

Create a mobile version to support the customization process via mobile devices.

Introduce iconography.


Phase One

Phase two Redesign


 
Research_magnifyingglass_150px.jpg

RESEARCH

Data

The client team summarized customer service case info, heat map, and screen recording notes to direct us towards which aspects of the interface to focus on.

 Takeaway

  • Users are skipping steps

  • Users are hunting around page to navigate

  • Navigation should not take users attention away from the customization process.

  • Users should not need to look around the page to determine where to click for the next step.

Heuristics

After spending 30 mins creating a customized planner, several obvious issues surfaced.

TAKEAWAY

  • Navigation between steps & sub-steps is separated across multiple areas.

  • Visual styling of navigation creates an unclear hierarchy.

  • CTA styling is not consistent throughout the page.

  • ‘Previous’ and ‘Next’ options not present.

  • Unclear copy.

 

USER STORY

I want a completely unique planner that includes the inserts that I know are offered but i cannot find in the customization process.

 

TASK ANALYSIS

Personalized-Task-Analysis_compressed.jpg

User FLow

Suggested-User-Flow_compressed.jpg
Client-Established-User-Flow_compressed.jpg

DESIGN STUDIO

 

My colleague, Andrea Sanchez, and I worked through two design studio rounds to consider as many different possibilities before establishing the mobile interface.

 

click to expand images

 

WIREFRAMES

 

For desktop, we had an internal aim to introduce little to no new functionalities and since the wireframes were only going to be used internally, I worked in mid-fidelity to accelerate the design process.

Mobile needed to be discussed with both our dev team and the client therefore
I worked in low-fidelity to achieve a more uniform appearance.

 

DESKTOP

Click to expand images

 

MOBILE

Click to expand images


PROTOTYPE

 

*Mobile device viewing note
Open prototype, at bottom of screen select (
), and deselect ‘Scale to fit’

 

Prototype #1

To communicate the desired animation of the horizontal scroll to the dev team.
Created in InVision.Studio

 

Prototype #2

bringing the user flow & transition animations to life
across two customization steps, product type and size.
Separate prototypes created due to limitations of Invision.Studio