MotionGrey (Redesign)

UX/UI DESIGN + VISUAL DESIGN + CONTENT DIRECTION

A website experience redesign that refreshes the brand image and simplifies the shopping experience, while highlighting the craftsmanship of each product.

Project Type: 4-Week eCommerce Website Redesign (March 2020, Ongoing)

My Roles: UX/UI Design, Visual Design, Branding, Content Direction

Programs: Illustrator, Figma

Results: Customer retention rate across the board increased from 25% to 50%, increase in conversion rates and sales revenue, positive customer feedback on the website and branding

MotionGrey is a Vancouver based company with the mission of providing an ergonomic solution to everyday workspaces. MotionGrey’s vision is to create a suitable and healthy alternative to standard desks and chairs. The client wanted a new and modern eCommerce website design that showcases their high quality products and provides a better digital shopping experience. The end goal of this project was to increase their customer retention rate and store conversion rates.

BEFORE THE REDESIGN

The existing website worked on the browsing and purchasing aspects of the experience but it was missing a cohesive and modern brand image that reflected MotionGrey’s mission. The website was also not very optimized for mobile and missing a lot of crucial elements to make it easier for visitors to shop, thus, a lot of potential sales were lost.

THE V1 REDESIGN

Working with the client, marketing, and development team, I designed an eCommerce website layout and seamless experience that was easy to navigate from browsing products to purchase. I ensured every aspect of the site highlighted the client’s core products, kept the content clean, and allowed customers to make a purchase in simple steps. Both desktop and mobile experiences were considered and improved. I also gave a fresh look to MotionGrey’s brand that reflected their vision of being modern and innovative, and to stand out from their competitors.



THE PROCESS

Business, Competitor, and Customer Research

I started the process off by developing a strong understanding of the business through in-depth discussion sessions. I wanted to dig deep into understanding their vision, mission, position, customers and situation. For the redesign, it was important to discover the reasons as to what wasn’t working well for the business and customers. A detailed understanding of the customers’ behaviours, preferences and goals also directed the design. In determining the brand style for the redesign, competitive research was also a part of the process. I analyzed the websites, analytics, brand styles, content and messaging to see how to help MotionGrey differentiate themselves. The brand is also important to consider the target audience and what resonates with them. I also asked people about their thoughts on the current website and what they would like to see.

Style Guide & Site Map

With my newfound knowledge, I crafted a style guide to direct the modern and clean style of the interface the client envisioned. The colours and typography were carefully selected as they were not only modern, but also reinforced the health aspect of MotionGrey's mission.

In understanding the variety of products and information to showcase, the site map was created. The site map outlined the overall structure of the site, with the objective of providing transparency and ensuring a clear and mutual understanding of the project.

From the site map, I created sketches and mockups that I reviewed with the team and gathered feedback from others. A prototype was put together to get a better sense of the overall experience. Many refinements were made on the shopping experience including browsing, customizing and payment. Below are some mockups from the desktop experience. In addition to the experience and interface, I also helped in directing the photography and copy.

The Shopping Experience

A core change in the shopping experience was the Add to Cart bar that would be fixed when the viewer scrolls past the Add to Cart button. The customization interface is also very straightforward with better organization. In the cart and payment flow, a progress bar is shown so that the customer can get a sense of how long the process may take.

REFLECTION

MotionGrey was very happy with my work and I was glad to deliver a complete website redesign and refreshed brand look. The people I presented the prototype to was also fond of the improved experience and interface. The new look enhances MotionGrey’s overall brand image and quality of products with the aim to further encourage healthy lifestyles by promoting their ergonomic creations to a broader audience.

FURTHER IMPROVEMENTS: V2 DESIGN

Since my last involvement in this project, I have been working exclusively with MotionGrey on further improvements on the website based on analytical data and customer feedback. Together, we took the brand further to stand out from the market and appeal to a younger working audience. We worked on touching up the colour palette for the brand to present a fresher look that wasn’t too present in the standing desk market. I also considered other visual elements such as the lines and shape of the button. Since MotionGrey’s desks had soft round edges, I wanted the visual elements to reflect that as well - the images and buttons have round edges.

Below is the improved palette and you can view the live design at motiongrey.com. Note that the development of the designs still needs improvement. The client is currently still generating high sales revenue after the minor adjustments.