UX website design of Song Kwang Electric Service

Using Emotional Design to build trust and drive conversion
Impact
35k+
Merchants in 7 Asian countries using the redesign
3x
Easier to use*
*Based on scores of Single Ease Questions (SEQ) from usability studies
3x
Easier to use*
Song Kwang Electric Service is a mom-and-pop electrical appliance repair shop that fixes both household and commercial appliances. Despite their small size, they actually have one of Singapore's largest repair fleets.
MY RoLE
Build a simpler, more intuitive web app
I worked with a Wordpress developer on this freelance project. 
I was responsible for Research, Prototyping, UX/UI Design, Branding, Illustrations, and Client Management. 
TIME
Build a simpler, more intuitive web app
2019, 10 months (freelancing on weekends)
CONTEXT 
Expanding the clientele + Brand refresh
The client has a solid reputation with enterprise clients but are not well known by household consumers. To attract more household customers, they wanted to revamp, starting from their website.
GOALS
Design a website that:
Helps the business increase the number of household customers coming through their website
Enables the business to stand out in a market of largely similar competitors who use price-cutting as the main way to win over customers

Act 1: Research

Research that delves into the psychology of users
At the point of this project, I was interested in Emotional Design, and was inspired by Indi’s Young work on listening sessions, as it offered a technique that could capture insights for emotional design.
Using Indi's approach, during interviews I probed further into my interviewee’s emotions and concerns. This provided very useful as it delivered profound insights on the unstated anxieties customers undergo as they get their household appliances fixed.
In the end, my research consisted of:
Phone interviews (n=5) with current customers to understand what they valued about the client's services
Phone interviews (n=6) with contacts who recently had appliances break down. This was to understand how they reacted, their concerns, and their decision making process
Shadowing a repair crew for an afternoon to observe the repair service and the actual dynamics between the crew and customers
The number of participants we recruited were small due to the client's budget (or lack of) and difficulty in finding participants who had appliances break down recently.
The process of finding a repair company is fraught with many anxieties such as: uncertainty if the repair company will deliver on their promise, fear of being ripped off, and the unease of letting strangers enter the family home
Trust, not price, underlined how likely customer were to choose a repair company
Decision makers were often fathers and husbands, who were in this tricky situation of relying on another man for help, but also having feeling a need to protect their families from potential threats
Competitive usability testing to evaluate existing solutions
Looking at the website of 30+ competitors, the client and my team had many assumptions of which elements we should copy adopt. Was that true though? I wondered.   
To evaluate the effectiveness of existing solutions, I conducted competitive usability sessions (n=3) where I asked participants to recall a time an appliance at home had broken and they had to get it fixed. I then observed as participants explained their thought process and searched up competitor sites. These sessions helped me identify the pieces of information they looked out for, as well as allowed me to evaluate the effectiveness of design elements on competitor sites.
Key information customers cared about were cost of the repair, expected time needed, and any guarantees if the repair did not work out. This key information tended to be hidden in most competitor's sites
Customers did not trust testimonials on a company's site as they saw it as cherrypicked. Instead they trusted independent third parties (like Google reviews or personal finance sites)
Customer were reluctant to call for quotes if they were undecided as they feared the provider would pressure them into committingbefore they were ready. However, companies needed this call in order to give an accurate quote of the repair
The limited impact of a website without good Google reviews and SEO
From the research, I knew the website would not be effective unless backed by strong Google reviews and good SEO. The client agreed, but wanted us to proceed with the website. We would address their lack of good Google reviews and SEO at a later time.
Focusing on conversion
Consequentially, the crux that I begun solving for was how to convince a potential customer who had either clicked in from a google search that they were the most trustable provider out of all the other options they might consider.
Following the 5 second rule of web design, my goal was to design a website that would convince a visitor to trust the client within 5 seconds.
Key Insights
The importance of trust when things break down
Trust is the key factor to people's decisions
Trust, not price, underlined how likely people were to go with a repair company. Case in point: customers who already had a trusted provider would not source for another, while customers who didn't have one would rely either on the recommendations of friends (trusted personal source), or Google reviews (independent third party) to decide.
The process of choosing a provider is fraught with anxiety
Customers typically only search for repair services when an appliance they owned has broken down. It is a time of stress, but it only gets worse with having to pay huge cover/diagnostic fees upfront without knowing if the company can be relied to get the job done well. Then, during the job itself, there's an unspoken anxiety of allowing male strangers into the house (most repair technicians in Singapore are male).
Companies advertising online fight in a tight space
There are many companies advertising their services for what is essentially an undifferentiated service. In the absence of trust of a differentiator, potential customers start using price as a sorting criteria, damning companies to fight a price game. 

How might we design a website that creates trust in 5 seconds?

Here's how I attempted the challenge.

Act 2: Design Approach

Structuring the site
Working with my developer, I decided on the structure of the site by:  
Identifying content to include by analysing the concerns and emotional needs of participants
Prioritising information flow by mapping out the decision-making process of participants
Constructing userflows by identifying key customer types, and the ways participants searched for information 
From there, we discussed possible solutions to the questions. The discussion gave me some rough ideas, and I begun making low-fi wireframes in Figma so that we could gather feedback on our solutioning and align on the content with the client. 
Solutioning at our favourite coffee place. Here, we are using stickies to map out the flow of information research participants made their decisions
Evolution of the two main pages
Evolution of the key screens. These wireframes would evolve as client requirements changed and branding started to solidify. The client's plan for the website also changed halfway through the project, so a business user flow was yanked out. 
A landing page that subtly starts engagement with the customer
Instead of waiting for customers to decide if they wanted to engage the client, I thought about how we could immediately engage them in the repair process without feeling they had to commit to things. 
As a result, I designed the landing page to engage customers as if they had started the repair process with the client. Not only did this make customers feel like the client was focused on solving their problem, it helped them calm down knowing the client was invested in helping them instead of selling them their services. 
Using the right self-promotional method. From the research I knew customers did not trust testimonials on a company's own site as they perceived it to be cherrypicked. However, the company could still build credibility with customers by namedropping the other bigger brands that trusted them, .
A front page that initiates the repair process. For a site visitor, it already feels like he client is already invested in helping you solve your problem.
Helping customers decide if the repair is worth their trouble
Though our assumptions were that users cared most about price, through the research I realised the first thing users were concerned about was answering, “Is it worth it to fix the appliance?”. Only after knowing that their appliance was worth the trouble of repairing were they open to considering the repair.
This was an unserved need as no other competitor had realised this. I sought to address that with a self-service quiz that would help potential customers figure out if their appliance was worth fixing. 
The self-service quiz.  Working with the client, we created a quiz that  helps customers figure out if they should repair their appliance.  What's nice about the quiz is that visitors can get an answer without having to speak to the client. This way, they wouldn't feel pressured to commit to the service.
Reducing uncertainty with clarity
Customers feel a lot of anxiety as there are a lot of uncertainties around the whole repair process. I sought to address by delivering as much clarity as possible to the repair process.
Being forthcoming with key information. Key information is listed in a straightforward manner and clearly to promote trust. This is in contrast with many competitor sites where key information is obscured under tons of self-promotional blabber.
Walking users through the whole repair process. I included information on timelines and the team that would serve the customer. Showing the team was important as it provided users a soft introduction to who they could expect to come into their home to repair their appliance.
Strategic choice of illustrations. We decided to go with illustrations instead of photographs for a variety of reasons. One of it was because illustrations allowed the client to address the issue of having males strangers enter one's house. From the research, we knew that this was something many customers worried about at the back of their minds, so by portraying the technicians in a fun, friendly illustration, I hoped to allay those fears early by controlling a customer's imagination of that experience.

Act 3: Branding & UI

Evolving the client's old identity into the modern era
For this client, I had the opportunity to run a rebranding exercise, and I jumped on it.
Identity design dictates what visual UI designs can be, so this was an incredible opportunity to build a brand that could communicate well both in print and online. Here are some photos from the process: 
Final stylescape
Stylescapes to establish the visual direction and helped us to quickly understand how the brand would work across touchpoints. I learnt this thanks to the folks at the Futur.
Logo explorations based on the client's logo.
Illustration explorations. We choose a mid-century inspired illustration style to match the age of customers while keeping things friendly and non-threathening. 

Act 4: Testing 

Usability testing to ensure site usability
When I had mocked up the key flows in Hi-fi, I did a round of quick usability testing (n = 5). I delayed testing till we were close to the final mockups to conduct usability testing for three reasons: (1) it was difficult to recruit participants, and (2) we needed feedback on people's 5 second impression, and (3) changes could be quickly done.
Since usability testing would not provide us the answer if actual customers would convert, I instead focus on other metrics such as:
If participants could find all the information they needed easily
If participants could find the client's contact information easily
If participants site left a good impression on users
"Wow! This feels so different from the others! It's like they only care to tell me how good they are, but this one is just interested in solving my problem."
"It's very clear. All the information I need is right here. Very easy to find."
Since the response was overwhelmingly positive with minor feedback, we started development. 
Pulling it all together
I worked around the brand identity of red and black to create a UI.

Now live

Loading...
After the UI was complete, the developer and constructed the site out in Wordpress. The site went live in January 2020. 
VIEW LIVE SITE
35k+
Merchants in 7 Asian countries using the redesign
3x
Easier to use*
*Based on scores of Single Ease Questions (SEQ) from usability studies
3x
Easier to use*
Org change is a long-term game
While building the site and doing the rebrand, I often had frank discussions with the clients about how they could improve as a service and business. During the solutioning phrase, everyone was excited; both the client and I had so many ideas on how we could improve things. 
However, when it came to crunch time, a lot of ideas had to be shelved as the client (being business owners), were focused on running their day-to-day business and didn't have the mental bandwidth to implement changes unless it was directly relevant to their current operations. Sounds familiar? 
Yet all isn't lost. When the client saw the quality and impact of the initial work, they saw the value of it. This led to other design projects to help improve small aspects of their service. 
The lesson? Change can be slow and gradual and that's okay. Don't discount clients just because they don't follow through all the possibilities. Do good work, leave them inspired, and when they are ready, you can go on that journey with them. 
Menu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram