Luke

Regima Canada

Web Design

Online Store

Product Photography

Design and build of an online store for Régima's Canadian representation, and do the product imagery to go with it.

View Website
Role

Sole designer and developer

Audience

Students that want to learn more about the history behind the art that is being displayed at the Vermont Museum of Art.

Date

September 2021

Role

I was commissioned to conceptualize, design, build and test an online store. Mockups and drafts were designed in Figma, and for cost efficiency built in Wix.

Challenge

The main challenge was to come up with a user flow that allows different use case personas to achieve different things on the same online store. The client had two varied users, namely retail and wholesale. The idea was to create different experiences for each of these approaches.

Mood board

Mood boards are useful tool early in the design process to help understand the overall look, feel and tone of the site build. Guiding the client towards the next phase and assuring consistency.



User Flow

Visual Identity

Typography

The challenge was to find the art direction that matched the artwork on display. I selected the general atmosphere, colors, and typography that fit with the brand image and product photogrpahy.

Colors
#051ddf
#4659f6
#fea628
See It Live

Landing page above the fold

Call To Action

The art movement page, where users are given a description of the selected collection

Additional Services

When the client requested product photography to be done they wanted something edgy and colourful. There was a need for emphasis on packaging and product contents colour to be accurate. I went about creating two different approaches. One being with emphasis on the packaging and reinforcing the brand colours and the other focussing on the contents colour by use of directional light to add shape and a textured surface to act as a blank canvas.

A visual timeline of every artwork on display from the selected collection

Tech Stack

  • Figma - Initial web design low fidelity prototypes & high fidelity prototypes
  • Adobe Creative Suite - Image correction & manipulation (Photoshop). Web graphic asset generation (Illustrator)
  • WIX - Site build & online store integration
  • Lucid - User Flow Generation

A visual timeline of every artwork on display from the selected collection

Lessons Learned

Takeaways

This was a great project for understanding in the UX process from user research to website implementation.

Next Project