Mobile eCommerce website

2015 | Baume & Mercier

Extending and optimising the Swiss watchmaker’s online boutique for mobile shopping.

Screenshots of the designed website on a laptop and smartphone.

My role

I designed parts of the mobile interface, built prototypes for features and flows, conducted usability testing and guided the user experience throughout the project.

Validating assumptions with usability testing

The project task was to extend and optimise an already- responsive website (on larger screen sizes) for mobile devices. Mobile-specific optimisations would include removing certain components from pages on the server-side using an adaptive approach.

I started by sketching mobile elements to explore different layout options and patterns. For me, pencil and paper is the best method for generating initial ideas as it helps me focus only on the core problems.

Sketches exploring different mobile menu patterns
Sketches exploring different mobile menu patterns

After some initial sketching, I created some basic Marvel and Pixate prototypes to get a feel for each page and discover what was working and what wasn’t.

Screenshots of a prototype of the mobile website.
A Marvel prototype created to evaluate the placement of content and page flow

There were some conflicting opinions among the team about the interface. For example, different people expected to arrive on different pages when following certain linked tile teasers or navigational arrows.

This led me to try and validate the design with usability testing, which I hoped would improve the UX and align the team.

For the usability testing, I asked some colleagues to use the Marvel prototypes I had created. As each participant completed a task I gave them, they gave a running commentary, which I recorded and derived insights from.

This validation process provided valuable input for subsequent design decisions and was a stark reminder that we are always making (often incorrect) assumptions about our users.

A sample of usability testing documentation, including research questions and results.
A sample of the documentation I wrote during usability testing

Prototyping interactions

One of the insights from the usability testing was that the product page’s image gallery was too confusing. The existing gallery functionality on larger screens wasn’t working on mobile – the smaller screen meant users were getting lost.

Initial sketches of the product page and image gallery.
Initial sketches of the product page and image gallery
Rough mobile product page mock-ups and specifications.
Rough product page mock-ups and specifications

After formulating a new image gallery solution that would feel more intuitive on mobile, I created a Pixate prototype to validate it.

Using Pixate I was able to create a very realistic prototype complete with pinch, drag and tap gestures to understand exactly how the image gallery would feel to use.

Screenshots of a Pixate prototype of the image gallery with touch gestures
A Pixate prototype of the image gallery with touch gestures

A few minor iterations later, we could confidently move forward with a validated concept. Both the development team and client then had a clear idea of what we were trying to achieve, without having to rely solely on imagination and lengthy descriptions.

My usability tests and prototypes allowed us to develop a product based on more than just opinions and assumptions. The result was a website built on solid, validated ideas that both the client and team were very satisfied with.

Key learnings

One of the main things I realised during this project is that I am constantly making assumptions about how users will use a product.

By incorporating prototypes and usability testing in the design process, incorrect assumptions can be spotted early – before they become expensive ‘optimisations’ during or after development.

Mobile screenshots of the finished website.
Screenshots of the finished website.