Project

The goal of this project was to create a responsive checkout experience for Endless based on the current Webstore platform. It was important that the use cases for each page (i.e. error messages, multiple shipping addresses, etc.) were considered as well. Every time I thought I had found all the possible use cases, something else would turn up!

Staying true to the current Webstore platform was another condition of the project.

Process

I created 320px mockups in Illustrator for the sign in page and each Webstore page.

During the design process, I explored what these mockups would actually look and feel like when in use on a mobile device by viewing .jpg versions of the mocks on my phone. This gave me an idea of what font sizes were legible, and which button sizes were comfortable to tap.

I checked in often with Alley Rutzel, Sarah Richards, and Endless developer Jiho Park in order to keep realistic goals for my design.

After creating my initial mockups, I shared the designs at a weekly Endless CX meeting. Key stakeholders in the project were present and offered excellent feedback for the project. One suggestion that emerged from the meeting was that I compare my mobile Webstore mockups with the Endless app. I created a document comparing the two experiences and taking note of the differences.

Outcome

The completed 320px mockups will be passed off to Sarah Richards, who will continue designing for additional sizes.

Because responsive design is a new concept, there are no standard protocols for the design process. This project left me questioning many aspects of responsive design: What is the best way to communicate designs with a developer? Should designers create mockups for standard devices sizes or does that defeat the idea behind responsive design? With each responsive project I have worked on, my understanding becomes more clear.

The mockups and a button style guide are stored on the design repository.