GURU by COURTS
Redesigning the UI and UX of an electronics and home appliances’ webpage for customers to better discover after-sales services
Project Overview
Design Challenge: Revamp a Bare-Bones Service Webpage to Improve Customer Experience and Branding
In this project, I worked with the Marketing Team of Courts Singapore. Courts is a leading consumer electronics and furniture retailer in Singapore, with a bustling e-commerce website.
My job is to redesign a series of webpages that houses Courts’ after-sales services, under a sub-brand called GURU by Courts.
- GURU is Courts’ version of Bestbuy’s Geek Squad — a sub brand for their after-sales support, services and extended warranties and protection;
- Courts created this branding for their services to stand out from their direct competitors in Singapore, namely Harvey Norman and Best Denki.
- The old webpage consisted of the main page (GURU and it’s 3 columns of services), Warranties page, Services page and Service Details page.
The objective set by their team was to (1) Improve the overall user experience of the GURU by Courts webpage; (2) Strengthen their branding; (3) Improve Search Engine Visibility.
Team | Nick (UXUI Designer) + 1x UI Designer + 1x HTML Frontend Developer
Research Methods Used | Competitive Analysis, Heuristic Analysis, Hypotheses & Experiments, User Interviews, Low/Mid-Fidelity Wireframing
Design Tools Used | Adobe XD (Low/Mid-Fidelity Wireframe), Microsoft Powerpoint (Annotating design rationales for presentation), Adobe Photoshop (High-Fidelity Designs), Asana (Project Management)
My job:
15% UX Research
25% UX Writing / Information Architecture
50% Low/Mid-Fidelity Wireframe, Prototype, Reiterate
10% Manage Hi-Fi UI Design, Frontend Implementation
Step 1: Competitor & Heuristic Analysis
Objective: Identify Obvious Problems Quickly.
Create Hypotheses and Test Them.
Being a champion of designing ‘human experiences’, it dawned on me quickly that important information about GURU is not served correctly, or not present at all. This is critical, as no information = lost consumer.
My findings:
1 This webpage does not tell a visitor what GURU by Courts is
GURU by Courts is a ‘proper noun’, as opposed to a ‘common noun’, therefore end consumer cannot form a brand connection easily. In contrast, Geek Squad’s webpage offers much more comprehensive content.
Hyphothesis 1: An introduction to what GURU means and how it relates to Courts’ after sales services is important to be easily accessible, so consumers know they are at the right place.
2 There is no content about GURU by Courts or how it works
Only 3 key consumer needs: Services, Warranties & Repair. Each provides lackluster content that doesn’t explain well what a consumer can do on this page.
Hyphothesis 2: An easy-to-digest display of how GURU works will help increase the purchase intent/convert page visitors.
3There are duplicated product categories in the 3 pillars
How does the average customer shop? Will they be able to differentiate between a ‘service’ and a ‘repair’? After all, “air-con servicing” is quite like a ‘repair’ too, right?
Hyphothesis 3: When a consumer lands on this page, he/she already has the intent to seek after sales support. Therefore, they already know the product to seek help in, so it will help if services are categorised by products, and not type of service.
Step 2: Interviews & Testing the Hypotheses
Testing the Hypotheses With Strategies.
To test my hypotheses, I defined 3 strategies to tackle the problems, based on empathy and best practices, and did a qualitative survey with 6 respondents.
- Strategy 1: Insert a short copy of approximately 50 words to introduce GURU by Courts, which does not take more than 10 seconds to read.
- Strategy 2: Summarise the key features and value propositions of GURU into an infographic format, with icons to have a visual connection to the copy.
- Strategy 3: I will redesign the shopping experience from “service centric” (existing) to “product centric”, since customers should be looking for help on a purchase they have made — which means they can funnel their search via product categories.
E.g. If searching for Aircon Repair, steps should be Aircon > Repair > Service; NOT Services > Repairs > Aircon.
Insights Gathered From My Interviews.
Based on the insights, results on my hypotheses are highly positive, and they are ready to be translated into design ideas.
6 of 6 Respondents agreed having some content may help them understand GURU, but not critically important.
5 of 6 Respondents found the infographic information to be useful for them to understand how GURU works.
4 of 6 Respondents prefer to shop by products, as they were not exactly sure which service category they should head to.
3 of 3 Hypotheses received positive insights. Hooray!
It’s time to start visualising with sketches.
Step 3: Sketch, Wireframe, Prototype, Repeat
Rough Sketches to Visualise the New Improved Page Layout
I am a visual person. I usually like to sketch & doodle as many ideas as possible, and each new sketch is building on the idea of the previous.
- 2 variants of ideas were finalised as part of the project deliverables.
- The sketches give me a clear visual idea how to size up the page contents, visual hierarchy, and browsing experience.
- Based on the insights from my interviews, the information architecture should be: (1) About GURU; (2) Product Categories (3) Value Proposition; (4) Call to Action.
Variant A (Left, Product centric) has a linear information flow, starting with the About GURU > GURU’s key features > Choose a Product Category > Extended Warranty info > Value Proposition > Call to Action.
Variant B (Right, Service centric) is simpler, but with a more interactive browsing experience which funnels users via the 4 key features of GURU, then by products. - I also explored preliminary UX Writing in this phase to further strengthen the information flow for consumers.
- Based on these sketches, Low/Mid-Fidelity wireframes are then created to be presented to the client.
Low/Mid-Fidelity Wireframes
The wireframes have a simple objective: Provide a visual deliverable of substantial quality to present the ideas to the client.
The wireframes were created using Adobe XD, then put into a Microsoft Powerpoint deck for annotations.
To begin with, I created 2 Variants (based on sketches) of Draft 1 GURU’s main page, then presented my ideas to the client (with detailed explanation shown in the screens below. The wireframes are mocked up in a low/mid-fidelity fashion, so that some sense of colours & images help size up each sections.
Subsequently, the clients were happy with Variant A, and we proceeded with a few more iterations of the design. Throughout, we took the feedback from internal stakeholders, as well as our dear respondents from my interviews.
Once the main page was complete, the Inner Pages flowed in seamlessly with consistent design style. They were approved in no time.
Interaction Design
Throughout the wireframe process of the main page, I had to design and create an enjoyable and intuitive means for users to access 2 important categories of services for each product category: Warranties and Services.
To do so, I did a research to find suitable references from search engine results, Instagram, and also Awwwards.
3 iterations of the interactions were created, from simple pop-out ‘bubbles’ to something that houses a short excerpt along with the 2 buttons (see video on the left).
Final High-Fidelity Designs
Learnings & Takeaways
What have I learned from this project?
The project was a very pleasant experience, as I got the chance to work with understanding clients who were clear with their objectives and receptive of my ideas.
Challenges Faced:
The biggest problem faced was how the project budget limited how creative the interactions and design could be. Balancing the client’s ideas with what is realistic in web design (to ensure mobile responsiveness) was also a challenge.
In the above example of the interaction design when hovering over a product category, the client added ideas on top of ideas:
- We started with a simple button;
- We added 2 buttons that show on hover;
- We added an image and an excerpt along with the 2 buttons on hover.
Due to the uniqueness of the above design, I had to piece together many references and created more than 10 sketches to achieve the final product.
Key Takeaways:
- Materializing ideas into sketches is extremely important, as the physical drawings often look different from what’s on my mind, since I do not have a canvas in my head;
- Research, research and research! You do not need to copy existing designs, but referencing designs from many sources can sometimes spark creative ideas.
- Always go the extra mile (and be proactive) to provide the best of my service for my clients. A client’s friendliness towards you is a reflection of your attitude towards the project. Do your best, and do more.
Visit the new GURU by Courts webpage, now live, here. As of 2020 the website has been taken down :(
All in all:
6 Weeks
>20 Sketches & Doodles
8 Screen Designs
3 Iterations
“Nick is not only a professional UXUI consultant but also a good project manager. He listen to what clients needs and provide fantastic ideas. Glad that we have Nick for our past few projects!“
~ Product Owner | Head of Digital Marketing | Courts Asia
