BLUE SKY

PRODUCT CUSTOMIZATION INTERFACE

Blue Sky 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 interface UX. Product launched February 2019

 
 

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, Pencil + Paper, Basecamp, Zeplin

 

GOALS


PROJECT GOALS

More clearly guide user through entire user flow.

Streamline interface to better communicate all custom possibilities and reduce cognitive load.

Introduce iconography.


PERSONAL GOAL

Introduce more UX tools into teams existing design process.

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

 

 RESEARCH

DATA

The client team summarized customer service case info, heat map, and screen recording notes to direct us on 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

Becoming the user… after spending some time creating a planner, several obvious issues surfaced.


TAKEAWAY

  • Navigation between steps & sub-steps is separated across multiple areas of screen causing heavy cognitive loading.

  • UI creates an unclear navigational hierarchy.

  • CTA styling is not consistent throughout the page.

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

  • Unclear copy.


 

TASK ANALYSIS

Personalized Task Analysis Copy_ltG_1x.jpg

TAKEAWAY

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

UserFlow_Double_1x.jpg

Client Directive

Client ultimately felt the interior options were more important to the user so should be presented first, as opposed to starting with exterior and moving through the design as you would leaf through book.

 
 

DESIGN

 

Starting with V1, and understanding the stakeholder’s concern to make the sub-step options more visible, I mocked up a concept. Due to time and budget limitations I was only able to do a small amount of gorilla testing to get some immediate feedback before presenting concept to client. The interface was further streamlined and then mocked up for internal stakeholders. Product owner and engineers signed off on the design which was then presented to and signed off by client.

 
 

V1 Previous

V2 Redesign

 

DESIGN STUDIO

Once desktop was signed off and handed over to the engineers, I was given the OK to address mobile. I conducted a design studio with our UI designer since we had a blank canvass. We did two rounds of design and critique to quickly work through different interface concepts before deciding what to move forward with digitally.

notepad_sketch_bluesky_cropped_60%.jpg
 

WIREFRAMES

The aim for desktop was to introduce no new functionality and due to time constraints, I worked in mid-fidelity to accelerate the design process.

 

Mobile would need to be discuss with various stakeholders so I started with low fidelity wireframes.

 

PROTOTYPE

 

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