Product launched 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. This is Phase 2 of the project, focusing on the UX.

 
 
takeOut_5.png

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


PROJECT GOALS

Streamline user flow and interface of the product customization platform to better communicate each step and all custom possibilities.

Create a more intuitive user flow.

Create a mobile interface since the first release was not responsive and mobile was not a client concern.

Introduce iconography.


PERSONAL GOAL

Introduce more UX tools into teams existing design process.

 

 RESEARCH

 

DATA

HEURISTICS

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.

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

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.

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.

 

TASK ANALYSIS

Personalized Task Analysis Copy.jpg

TAKE AWAY

  • Designing the cover, the most unique part of the customization process, is buried in the middle of the process.

  • What appears to be an “Add to Cart” CTA is actually a step header and doesn’t add anything to the cart. It takes the user to a review step which once approved, progresses to an Add To Cart step.

 

USER FLOW

Suggested.jpg
Client Established.jpg

DESIGN

 

Starting with V1, and understanding the stakeholders concern to make the sub-step options more visible, I mocked up a concept and did some gorilla testing to get some immediate feedback. Interface was further streamlined and mocked up to present to internal stakeholders, Product owner and Engineers who signed off on the design which was then presented and signed off by client.

 
 

V1 PREVIOUS

V2 REDESIGN

 

 

test test