OSST App & Responsive Website

Build a bridge for connection between clients and professionals in the UK

Tımelıne

Nov.1st, 2023 -

Jan.1st, 2024

status

Estimated launched time:

July, 2024

Client

OSST

Our team

Design Director | Lawerence Tang

Project Manager | Qiqi Dong

Ux Designer | Suri Wang

Ux Designer | Coco Fan

Ux Designer | Yifan Jiang

Other team

Developers

Operation Director

Background

In the UK, homeowners often find it challenging to locate the perfect professional for their home renovations. Similarly, skilled tradespeople frequently encounter difficulties in reaching out to potential clients. OSST, a fresh startup endeavoring to address this issue by linking users seeking renovation and design services with over 3 million skilled professionals across the UK. This platform offers users convenient access to discover professionals, while also providing experts with the means to connect with clients seamlessly, effectively catering to the needs of both parties.

Problem

Finding suitable professionals across multiple platforms can be a cumbersome process, and maintaining effective communication during collaborations is often inconvenient. This results in frustrating and unsatisfactory experiences for both clients and professionals.

Challenge

Our main challenges are the short time we have to launch our startup, OSST, and the many tasks we must complete, all while coordinating designers from four different regions.

Project Goal

Assisting clients in finding the most suitable professionals and ensuring smooth communication throughout the service process, thereby aiding professionals in expanding their business.

My role

Due to time constraints, we allocated tasks to each member based on features. I designed the core business of OSST, including homepage, professional search, professional’s profile and redesign messaging feature after we received feedback from dev team. I was also responsible for building and maintaining the website design system.

Target users

People looking for
professionals for renovations

Professional trades

Solutions

01

Quickly choose professionals

  • Users can obtain the important information at a glance.

  • Using filter to choose professionals they want.

02

Seamless communication

  • Enable real-time online communication between clients and professionals, showing online status next to their avatars.

  • Additionally, provide the option to save important conversations for future reference.

03

Professional

  • Real-time chat for professionals.

  • Editable profiles to showcase oneself and provide accurate references to clients.

So, how did we get there?

Competitor Analysis

Before embarking on the design of OSST, it's crucial to understand our competitors and gather insights from them. I collaborated with the research team to conduct user research for the project.

The questions we hope to address are:
  • What features are currently offered by competitors in the market?
  • What strengths and weaknesses have been identified in their offerings through the analysis of user feedback?

We analyzed five direct competitors and one indirect competitor, which are CheckaTrade, Myjobquote, Ratedpeople, MyBuilder, Trustatrader, Houzz.

Pros

Each platforms offers a diverse range of professional types.

Each professional has a comprehensive personal information profile.

Cons

01. Finding Professionals is Inconvenient

Because users need to post job requests and fill out questionnaires, then wait for responses from professionals, this takes time.

02. Limited Contact Options

Email responses may experience delays, and phone lines could be busy during peak hours.

03. Difficulty Choosing Suitable Professionals

Unclear professional profile information makes it challenging for users to pick the right professional.

04. Cognitive Overload

Most websites, mostly using large amounts of text, might be less user-friendly, making users feel fatigued.

Initial Solutions for Identified Issues

01. Empowering Discovery

Explore pros based on clients' needs, with personalized recommendations.

02. Multichannel Communication

Introduce messaging feature, enabling clients to directly consult professionals within the app.

03. Structured Presentation

Understand the information that is most important to clients and present it clearly.

04. Visual Expression

Clear layout, guiding clients' attention with visual cues, and avoiding large blocks of text.

User Research

We aim to further explore the issues and opportunities identified during competitor analysis through survey and interview.

The questions we hope to address are:
  • Are the issues identified consistent with those found in the competitor analysis?
  • Will our envisioned solutions effectively address the clients' problems?
  • What factors are most important to them when selecting professionals?

100 young clients in the UK seeking convenient, efficient, and stylish renovation and design services.

80%
60%

Indicate that the process of finding professionals through "post job" takes much longer than they anticipated.

Wish for a simpler and faster way to communicate with pros, allowing for a more direct expression of their needs.

The three most crucial factors for clients when selecting professionals are service quality, pricing, and availability.

service quality

Price

availability

70 professionals in the UK.

70%
50%

Hope that users can quickly locate them, and an online platform facilitates convenient, reducing the likelihood of customer loss.

Experience communication difficulties, leading to delayed transmission of customer needs and resulting in low work efficiency and customer satisfaction.

We interviewed 5 clients and 5 professionals to understand their needs and pain points when using other platforms.

Starting to find a professional can be quite cumbersome in my opinion, as it involves filling out numerous forms and consuming a significant amount of time. A more straightforward and faster way to interact directly with them would be immensely helpful.”

“We are renovating our home, and coordinating with various professionals has become tiresome and time-consuming. Sometimes one professional confirms availability for next Monday, but delays in responses from others result in the Monday slot being booked by someone else”

“While I've explored various platforms, I often spend a considerable amount of time deciding which professional to contact. Unfortunately, I've encountered situations where the selected professionals weren't as specialized as needed, leaving my issues unresolved.”

Professional

“In the UK, as a professional, I frequently encounter the difficulty of finding suitable clients. While there's a pool of potential clients available, identifying those genuinely in need of my expertise and willing to pay a fair fee isn't straightforward. During peak times, the influx of clients can overwhelm us, leading to missed calls as lines are often tied up. Additionally, our email responses are handled chronologically, which sometimes results in delays in addressing urgent matters.”

key Insights

Through conducting a competitor analysis and research, we have gained 2 valuable insights for clients and professionals.

From Clients

01. Easy Professionals-searching

Due to users having to post job requests and complete questionnaires before waiting for responses from professionals, the process is time-consuming.

02. Efficient Connecting

Customers hope to reach out to professionals quickly, get pricing information, and confirm details like available time and location. This can help them save time.

From Professionals

01. Struggling to Stand Out

Professionals strive to differentiate themselves by highlighting unique strengths, enabling clients to easily notice and choose their services in a competitive market.

02. Provide Timely Service

During peak hours, there may be delays in email responses and only one client can be answered at a time, which could result in customer loss.

Opportunity

How might we help clients quickly and conveniently find professionals that suit them and ensure smooth communication between them during the service?

What did we do to achieve the opportunity?

Step 1: User Persona & Journey map

Persona: I have created 3 distinct user personas to better understand and empathize with the diverse needs, behaviors, and motivations of users.

Journey Map: To better understand the user experience and identify pain points for both clients and professionals, I created two journey maps.

Step 2: Site map & User Flow

Site map: by focusing on the users' perspective in the sitemap, we've been able to create a more engaging and accessible platform that aligns with users’ and professionals’ needs and expectations. Click here check site map.

User flow

Me:

“During competitor analysis, I found that platforms in the UK are more like centralized hubs for professional information, with no platforms allowing direct booking of professionals or managing appointments. I believe that if OSST can cover this aspect, it could be a significant competitive advantage.”

Project Manager:

“I think this is a fantastic idea! It aligns well with our goals and could potentially set us apart from competitors. However, before we proceed, it's crucial to have a thorough discussion with the technical team to assess feasibility, potential challenges, and the required resources.”

Step 3: WIREFRAMES & USABILITY TEST

To address pain points and find improvement for service, we carried out user testing with 8 individuals, consisting of 4 men and 4 women. Below are the improvements made based on the feedback.

Before

1
2

After

1
2

Iterate design 01

1

Add professionals’ details in recommendations and recently viewed

  • 6/8 participants felt that they didn't have enough information to make a decision on whether to choose this professional.
2

Change the display method of professionals' status

  • 4/8 participants expressed confusion regarding availability and were uncertain about what it means.

Before

1
2

After

1
2

Iterate design 02

1

Add unread message feature

  • 7/8 participants felt they couldn't distinguish between read and unread messages.
2

Remove the vertical bar in the current chat

  • 3/8 participants suggested removing the vertical bar, as in most cases, the front of the chat box is the current chat

Before

1
2

After

1
2

Iterate design 03

1

Add services tags

  • 6/8 participants believe that directly browsing the services offered is more convenient for finding the desired professionals than reading the about section.
2

Remove redundant message and phone icons

  • 4/8 participants feel that the repeated appearance of message and phone icons looks too cumbersome.

Step 4: Style Guide

Step 5: Final design 01 (Mobile)

Role selection (Client)

Homepage (Client)

Profile (Client)

Professional’s profile (Client)

Message (Professional)

Try OSST prototype

Final design 02 (Web)

Professional’s Profile

  • Clients can learn about a professional through the profile page, which includes the types of services offered by the professional, photos of previously completed projects, reviews, and company profile.

Professional’s Homepage

  • We created different homepages for clients and professionals, allowing professionals to better understand the benefits of becoming professionals and the success stories of other professionals.

Browsing Professionals

  • Providing users with information on professionals' average response time, fee range, location, and project images helps clients quickly select suitable professionals.

NExt Step

We will continue to listen to feedback from front-end developers, ensuring both user-friendliness and feasibility in our product design. After the future launch of our product, we also look forward to hearing feedback from various users to improve aspects of the design we may not have considered.

Takeways

01. Exploring the depths of UX Research

In conducting competitor analysis, it's not just about reading other users' reviews of the website. It's also important to step into a user's shoes and interact with all the website's features, taking screenshots along the way. This approach helps us better understand and experience the site from the user's perspective.

02. Designing for Disability

In our design, we marked features in use with colors. With guidance from a senior designer, we became aware of the need to consider accessibility for people with disabilities. Therefore, we added numbers or labels to colors. For instance, an in-use filter is not just purple; it also shows the added filter tags below.

03. Responsive Design

Responsive design revolutionizes the digital landscape by ensuring optimal viewing experiences across various devices and screen sizes. By adopting flexible layouts and fluid grids, we enhance accessibility and user engagement, ultimately driving conversion rates and bolstering brand reputation in an increasingly mobile-centric world.

Copyright © 2024 Suri Wang

Copyright © 2024 Suri Wang