mobile mockups of an ecommerce shoe website

The Shoe Box

Visual + Interface Design
Tools I used: Adobe Photoshop, Figma
The problem
Create an e-commerce product page that represents our client's brand and includes their feature requirements in both a desktop and mobile version.

The initial assignment was to design one desktop product page, but I also wanted to explore designing a shopping cart page and a mobile version using the same re-usable components and an established style/brand guideline.
The client
The client for this assignment was The Shoe Box, a fake online shoe store specializing in designer shoes.

Their customers: over 80% women, creatives and degree-holders, ages 19 - 45, interested in fashion and art.
Their requirements: product reviews, product breakdown, description and related products section.

Creating a look & feel

This project was focused on visual outcomes and finding a voice/brand for our client. My first step was creating a mood board for the brand, to establish a tone for the site.

a visual mood board for the site featuring photos, illustrations and color palette

From this mood board I pulled some key elements into the design: a color palette, integration of illustration, and expressive photographs of the product.

Putting Pencil to Paper

This was my primary way of working through the client requirements, and imagining how they might all interact on a page. After critique and feedback from classmates, I settled on a few sketches I thought were the strongest, and pulled design elements that I liked from each.

hand drawn sketches of desktop screens and assets
Sketching things out proved immensely helpful during this phase - I got to explore several concepts with little to no risk or time sink.

Piecing it together

In the next stage I created a kind of Frankenstein's monster wireframe for the product page from all the best received parts of my initial sketches.

greyscale wireframes of desktop screens

I really wanted to emphasize the visuals on the product page. Visual assets are a huge factor to user conversion - when buying online this is how users really get a feel for a product. A big CTA add to cart button was also something I knew I wanted to complement the big impact of the images. I explored a couple of cart options at this stage too.

From here I worked on my mobile wireframes, working off some quick pencil + paper sketches I made.

hand drawn sketches of mobile version of sitegrayscale digital wireframes of mobile screens
Re-using the same or similar components across desktop and mobile was super helpful in translating the design across devices.

Testing, testing

Now it was time to get another pair of eyes on it. I made prototypes from my wireframes and let some users have at it.

The main feedback I got was on some unfriendly sizing for mobile - not enough spacing between elements for tapping on, font sizes a bit too small, etc. It was a simple mistake, but an important one - users need room to move around on mobile! I resized and reworked some elements to be friendlier for a touch-based interface. Now it was time to move on to some visual design.

style guide for the site with font sizes, colors, illustrations and components

Final Design

Here's where I got into the design nitty gritty. I picked my color palette from my mood board - fun and youthful colors, giving a feeling of lightness and playfulness to the site. I applied these colors and some styling to the elements I had in my wireframes. For the typeface I chose a super friendly geometric sans-serif. I created some simple icons and illustrations to give the site a little more of that hand drawn, spirited style.

Images of final designs of desktop and mobile screens featuring a product page and a checkout page

One of my learning experiences on this project was re-thinking and adjusting my color palette when it didn't initially meet accessibility standards: my initial color palette didn't include many highly contrasting colors, and my first go-round of the final visual design included too many light, non-contrasting colors. It taught me that it pays to be flexible - the colors we imagine might not always work in practice.

Check out the mobile prototype!

  • Don't get tied down to any elements, if in the end their design isn't serving accessibility + best practices.
  • Making components that can be resized + reused makes the design process a lot easier.
  • Sketching works! And is a big time saver in the end in terms of working out solutions quickly.