top of page

Robinson Lighting & Bath Centre 

E-commerce website - Redesign project

About this project

​

Robinson Lighting & Bath Centre is a leading lighting and bathroom fixtures with multiple showrooms in Canada.

​

  • Key Goal

      The main goal was to redesign their e-commerce website by improving their mobile/web  experience to promote online sales.

 

  • My Roles + Responsibilities

       This project was done at TAISTech. I was the principal designer for this project. With another team member, we performed redesigned the experience (Sketching, Wireframes, Prototyping). We created new modules to manage projects within the site. Finally, revamped the Visual/User Interface Design of the site.

 

  • Timeline & Team

       Major design work was completed in 2 month and now I am providing support/iterations.

​

  • Tools

     Axure RP, Photoshop, Invision, Zeplin, Sketch

​

  • Year

     2018 - project in development phase

​

​​

Problem Statement

B.A. Robinson was looking for a way to make B2C and B2B sales experiences seamless through their e-commerce site. They wanted to encourge interior designers and contractors to use their site as their go-to place to create and manage projects.

Robinson Lighting and Bath Centre has an existing website that functions primarily as a catalogue and does not facilitate any online purchases. Customers are forced to call up the sales representatives in order to enquire about the prices, availability and other details about the product.

​

This can be cumbersome to the customers as it adds friction to the online shopping experience.

Shoppers may drop off or reconsider going through the hassle, hence affecting Robinson's online sales and revenue.

Website

screencapture-robinsonlightingandbath-20
screencapture-balightingandplumbing-xolo
screencapture-balightingandplumbing-xolo
screencapture-balightingandplumbing-xolo

Mobile Site

Screenshot_20190101-210641.jpg
Screenshot_20190101-210828.jpg
Screenshot_20190101-210702.jpg

UX Audit

We performed a UX audit of the entire site to identify user experience issues or frictional points to get an idea of the areas to focus on when we redesigned the project.

​

  • Short summary of major issues

      

1. Robinson's online site doesn't use a responsive layout. Having a responsive design can create the best view for both web and mobile. Moreover, it saves time in maintaining two different versions of the same site.

​

2. Current design looks dated and doesn't use screen's real estate well. Make overall design more contemporary or modern to suit the best design practices.

​

3. Robinson's site lacks several basic e-commerce features like cart, a proper product display page or checkout. It currently functions more as a catalogue website.

​

4. Content appears less engaging or active.  This may make users feel that the site isn't being maintained.

​

5. Navigation and information architecture of some sections are confusing. Better hierarchy and structure can lead to more visibility of products online.

​

​

​​

Redesign

We decided to work on the entire experience of the website. The foundation was based off the Saleforce Commerce Cloud and it's guidelines.

Wireframing

I created the high-fidelity wireframes in the Axure RP. Most of the task flows were based on the Demandware - the Salesforce's Commerce Cloud guidelines and documentation. Our focus was to customize it to Robinson's needs to fit their expectations and user requirements. 

​

​

We created the mockups for the web and the mobile version of the site.

screencapture-2omgsm-axshare-2019-01-02-
screencapture-2omgsm-axshare-2019-01-02-
screencapture-2omgsm-axshare-2019-01-02-
screencapture-2omgsm-axshare-2019-01-02-
screencapture-2omgsm-axshare-2019-01-02-
screencapture-2omgsm-axshare-2019-01-02-
screencapture-2omgsm-axshare-2019-01-02-
screencapture-2omgsm-axshare-2019-01-02-

Unique Task Flows

One of the unique modules that I had to work on was the My Projects module. The module is meant for trade professionals or interior design agencies who can create projects within the e-commerce site.

 

  • It enables designers to create groups within the projects for example living room, kitchen, etc 

  • Add multiple members with different ownership rights - Owners can add/or remove items from the project whereas Members can view or comment on the items.

  • Items can be directly added from the Product Display Page. In the modal box, a user can create new groups or even projects and add the item to chosen locations.

screencapture-2omgsm-axshare-2019-01-02-
screencapture-2omgsm-axshare-2019-01-02-
screencapture-2omgsm-axshare-2019-01-02-
screencapture-2omgsm-axshare-2019-01-02-

Visual Design

Once the high fidelity mockups where completed, we proceeded to create the visuals based on the brand guidelines they provided.

The design for mobile was also designed with the similar guidelines.

screencapture-projects-invisionapp-d-mai
screencapture-projects-invisionapp-d-mai

Product List Page

screencapture-projects-invisionapp-d-mai

Product Display Page

Home Page

screencapture-projects-invisionapp-d-mai

My Account

screencapture-projects-invisionapp-d-mai
screencapture-projects-invisionapp-d-mai

My Projects Page

Brand Landing Page

What I Learnt

E-commerce was a new domain I designed for and it proved to be a great learning experience.

  • Learnt the nuances of e-commerce and the associated frameworks.

  • Cooperate with off shore team to get business requirements and brainstorming sessions

  • Adapt to client changes and be able to make quick changes or iterations.

  • Keep in mind technical abilities of the developers and yet provide creative solutions.

© 2024 Meenu Sara Mathai

bottom of page