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.



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


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




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.


  • 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.


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


  • 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.



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




User FLow




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




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.



Click to expand images



Click to expand images



*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