Road Servicing

back to top

I created mockup designs for a corporate website redesign to transform the company's image by evaluating its brand, conducting user research, and comparing the results against market competitors. This was done to receive a surge in software purchases and reduce customer service inquiry calls regarding training.

Though the founder found no fault in the current website, the developer wanted an aesthetic that mimick more modern design. The customer service team favored having a spotlight shined on the online training videos that would answer many of the questions they receive via customer service calls.

The abroad marketing team requested a design that would align with how they present the company at expos. The abroad SEO company stressed making corrections to red-flag items from their audit of the website. If the necessary SEO steps are correctly taken they argued the website's Google ranking would improve.

Problem Statement

Decrease the call volume made to the tech support regarding basic questions on using the software. New users of the software need a convenient solution that's easy to find for answering questions about the software.

Project Goal

  • To reach an audience and have an open conversation with those in the field.
  • Have up to date information.
  • Scale down the videos on the website. The videos exceeded 15 minutes and a few 45 minutes with low watch rates.
  • Add new videos to the website.
  • Create a more minimalistic design.
Questions to ask client design by Katherine Delorme.
Q&A with the team Credit: Katherine Delorme

Challenges

  • Constantly updating information.
  • Surveying the current videos and update the video and tutorial materials.

— Research

Website Audit

I decided on my own to do an audit of the website's content, design, layout, and experience from a user experience designer point of view. Though I was told superficially what were seen as the problems on the site I needed to fix, I wanted to understand the entirety of the website, sub-domains, and affiliate websites. From what I gathered, I create a list of the most common issues.

Audit of issues found on the website by Katherine Delorme.
Audit results Credit: Katherine Delorme
Sketch of issues on the home page and solutions from a website audit by Katherine Delorme.
Sketches while auditing the website
Credit: Katherine Delorme
Sketch of varies issues and solutions from a website audit of issues by Katherine Delorme.
Common issues included unbalanced pages,
tight padding, and excessive white space Credit: Katherine Delorme
Sketch of issues on the blog site from a site audit found by Katherine Delorme.
Sketches of issues while auditing the blog site
Credit: Katherine Delorme

Interview Notes

Conducted by. Katherine Delorme

Method: Q&A via GoToMeeting, Microsoft Teams Video Conferencing Software, and WhatsApp Video Call.
Since I was a new member on the team, I employed my UX research skill and approached getting to know the company like investigating a UX problem. I wanted to see if how the employees viewed the company reflected on the website. I also wanted to hear first hand about employees' needs and pain points. I questioned whether what they saw as the company's values were showcased on the website, comparing the notes I gather from the Q&A to the website at present. I aspired to discover how employees desired the company to be represented.

"[As UX designers we] understand how to methodically and meticulously plan a UX campaign. And that's what getting a job actually is, maybe we just don't realize it at first. So, we need to UX ourselves, we need to UX our resume, our [port]folio, our process, our interviews, everything." [1]
- Andrew Doherty former Google UX Designer

Office Manager and Sales Persona
Credit: ManyPixels
Personnel 1
Name: Diane K. • Preferred Name: Coworkers nicknamed "D".
Title: Office Manager, Controller (travel accounting)
Role: Accounting, travel, office management, and a kind of Human Resource
Tasks: Payroll, bill payments, software billing, maintenance bills, and ordering conference booths.
Working hours: Monday to Friday 7 am - 3 pm. Being a mother of 2, she needed a schedule that allowed her to drop off and pick up her children.
Years with the company: She started in 2011 and celebrated her 9th year. She has seen the company grow from having 40 customers to the industry player it has now become.
Marketing and Sales Persona
Credit: ManyPixels
Personnel 2
Name: Erin B. • Preferred Name: N/A
Title: Sales & Marketing Director (subcontractor)
Role: The founder's psychiatrist, the founder's sounding board, and helping with strategy.
Tasks: Marketing and Global Sales.
Working hours: Monday, Wednesday, and Friday. Please note she works in the European timezone.
Years with the company: She started in January 2017 and has been with the company for three years.
Marketing Persona
Credit: ManyPixels
Personnel 3
Name: Heather C. • Preferred Name: N/A
Title: Marketing Coordinator (subcontractor)
Role: Implementation of marketing tasks as well as content creation, including the monthly social media content calendar.
Working hours: Monday to Friday. 8:30am - 6pm GMT+1.
Years with the company: She has worked for the company for roughly one year and a half.
Don’t guide

"The way you ask questions is very important, you will have ideas on some parts of the experience and consciously or subconsciously you may start to guide the user in a certain direction." [2]

Get personal

"You need to find out about them, ask about their home situation, job, family life, favorite holiday destination, and hobbies. You need to get a good picture of who they are and what their environment is like." [2]

Feedback

The website has so much text it is an overload of information. Thankfully the information on the website is correct though the messaging is described as "off". The success of conversation stats depends on which team member is asked. Metrics in question include newsletter subscription, calls received by the sales team, downloads of trial versions of the software, and other conversion statistics. The website should encourage visitors to call the company. A sales team member stated there's an increase in sales rate when potential clientele talk with a person. There's also a need for more sign-ups for demonstrations.

There is a drastic difference between the founder's belief regarding the website's purpose and the marketing team. The key company value most iterated by the employees was "community". There seems to be a unison desire for the company to be seen as a pinnacle member of the road servicing community. A resource to turn to for valuable information and open discussion. Some users when faced with difficulties using the software blame the tool to spare their ego, in contrast, to calling tech support, watching the online tutorial, or attending a supplementary class.

The company's image is VERY American, which has hindered its expansion into the international market. The company needs to have more of a global feel to appeal to international clients. Ideas to appear more international include using diverse photos. The current site only displays American roads that are larger than most European roads. The website should also use more neutral language downplaying the American accent.

Color: Brand Useage and Identification

Color Problem

The website I was tasked with made use of the brand's identifying color of green, but it was in such an overbearing way it aged the site. The site heavily used dark green alongside black, and a blue that defaulted from the backend framework. Green is a challenging color to work with, but many brands have utilized it well.

List of companies that use green as their identifying color by Katherine Delorme.
List of brands whose identifying color is green Credit: Katherine Delorme
Android brand color case study by Katherine Delorme.
Android evaluation Credit: Katherine Delorme
Spotify brand color case study by Katherine Delorme.
Spotify evaluation Credit: Katherine Delorme
Publix brand color case study by Katherine Delorme.
Publix evaluation Credit: Katherine Delorme
Color Conclusion

"Green Should Be Used As An Accent Color."

After reviewing the websites, apps, and other marketing materials of brands known for the color green, I concluded that green's greatest strength is when it's an accent color. It's present in the logo, but as far as the website greens are toned-down in favor of content, scannability, and readability.

Color Mood Board

I wanted the client to understand the impact of using green as an identifying color as well as show how the color could be paired with other colors.

An array of shades of green and color pairs by Katherine Delorme.
Color Mood Board via Adobe Color Credit: Katherine Delorme

Dealing With Characters and Mascots

The company had a character they used as an identifier for their brand. Though not unusual the art style the character was drawn edged at outdated. Visually it came close to seeming kidish or too commericial being similar to the animation style of early online animation video creator softwares. Similar to a caricature. To explain the stark difference I looked into modern illustration and the use of imageries with defining characters on websites. I also looked into classic characters and mascots and explained how they've withstood the test of time.

Modern Use Of Illustration, Imagery, Characters, etc.
Collage of character illustrations.
An additional collage of character illustrations.
Examples of websites with illustrations of characters.
Demonstration of illustrations used on website Credit: tubik, Saepul Rohman, N/A, Uran
Examples of websites with illustrations of characters in the food and science category.
Demonstration of illustrations used on website Credit: tubik, N/A, tubik, Sigit Setyo Nugroho
Examples of websites with illustrations of characters with more pink, purple, and dark blue tone.
Demonstration of illustrations used on website Credit: Daniel Tan, Outcrowd , Peter Tarka, Zahidul
Known or Mildly Recognizable Brand Character
  • Android, Bugdroid. As close as you'll get to the official moniker
  • GitHub, Octocat.
  • Disney, Mickey Mouse. As far as brand mascots go Mickey Mouse is at an untouchable level. Years of brand recognition and product creation to the point where the silhouette alone is recognizable.
  • Duolingo, Duo.
  • Mascots: Android's a green bug, GitHub a cat octopus hybrid, Mickey ears, and Duolingo's green bird.
Hyper real photo of white paper with brand mascots like the Monopoly, Geico, Chester Cheetah, etc.
21 Most Famous Brand Mascot Designs of All Time GraphicMama
Collage of brand mascots and logos like MailChimp, Twitter, Hostgator, bitly, etc.
30 Brilliant Animal Brand Mascot Examples on the Web GraphicMama

Inspiration Board

Desert site with brown colors and camel image. A site with a stretch A like architecture.
Inspirations from other websites. One site with a overview image of road with green forestry.
Inspirations of construction, road serving, and architecture websites.
Inspirations for websites design with more of a map and dashboard vibe.
Website with cars and motorcycles. Has a ripped paper style.
Inspiration board collage selected by: Katherine Delorme
Inspirations of construction websites. Left a dark blue and orange site. Right a light green site.
Inspiration Board: Proper Use of Icons

During my audit of the client site I took note of the inconsistent and incorrect use of icons. For this reason I included images of proper consistent icon and what their designed use would be to better illustrate the different to the client.

Inspiration Board: Imagery Related to Road Servicing

For further inspiration searches in the imagery invoked when think of road servicing was next looked into.

Google search for road servicing imagery
Google Image Search
Additional Google search for road servicing imagery
Google Image Search

— Define

The following can only be explained in general and will be briefly covered to demenstrate the step was taken during my research and design process.

Define: Personas

Personas related to those in the servicing industry and range from those directly using the software to the decision maker for a company in the purchase. Personas included:

Surveyor Persona
Credit: ManyPixels
Persona: Surveyor

Concerns/Needs:

  • Surveyors have to deal with little to no authority when it comes to the company's budget.
  • Since they work long hours, they have no time to train.
  • Their day-to-day included often being under schedule pressure.
  • They desire to limit risks.
Low to Mid-level Manager Persona
Credit: ManyPixels
Persona: Low to Mid-level Manager

Concerns/Needs:

  • They manage a small or medium size team.
  • They make recommendations for the company.
  • They don't have excess time to train and learn.
  • Has to deal with the pressure of creating and staying on schedule.
  • Wants to be provided with proven information, documentation, and desire control.
Survey Company Owner Persona
Credit: ManyPixels
Persona: Survey Company Owner

Concerns/Needs:

  • As an owner, they strive to maximize profit.
  • They desire to expand the business and seeing growth.
  • Aims to stay ahead.
  • Lists productivity as a high virtue for the company.
  • They are the decision-maker.
How we want to make people feel:

Informed • Secure • Confident • Satisfied • Confidence • Authenticity

Competitors Analysis

Industry competitors varied with small scaled companies, international competitors, market share, those who utilized the clients software. Without giving away vital information, below are short sentences describing a characteristic of a competitor.

  • Company 1:
    This company uses a similar platform with its software.
    The main product seemed almost like an imitation to the clients.
  • Company 2:
    Focus more on product sales than software.
    Their software is a complicated system.
  • Company 3:
    The company's software isn't compatible with most clientele products. The company's design is professional and brand name well known in the industry.
  • Company 4:
    This company is a direct competing software.
    The company is abroad with a small team and holds a market share in Europe, mainly in the United Kingdom.

Industry Allies

  • Power users
  • Local
  • International
  • Global Company
  • Advocate
  • Share on social media

— Roles & Materials

Roles & Responsibilities

Role: UX Researcher & UI Developer

Task: UI/UX research, conducting interviews, market research, website audit, mockups, wireframes, and high fidelity wireframe.

Location: In office then shortly after moved to remote in response to the 2020 COVID-19 coronavirus epidemic.

Team: The team consisted of a backend developer, sales & marketing director, marketing coordinator, and the third-party SEO company they hire. In addition to the founder being kept in the loop, I met with the founder every week. I also sent the founder weekly reports of my progress.

Scope & Constraints

Technology - Design: Sketch App, sketch paper

Technology - Development: The website was built with Twig, template engine for the PHP programming language, Less, backwards-compatible language extension for CSS, PHPStorm, Foundation, and git.

Constraints: The constraints I felt during this project were being onboarding during the beginning of the coronavirus epidemic. I had to transition from in-person to remote in a matter of days. To connect with my co-workers, in the absence of the bonding we would've had in-person, I scheduled video calls to ask questions and get to know their job roles as well as themselves on a personal level.

— User Flow & Designs

Useer flow standard by Katherine Delorme.
Useer flow - Surveyor by Katherine Delorme.
Useer flow - Owner Survey Co by Katherine Delorme.
Sitemap and user flow for surveyor, owner of survey company,
and government land surveyor. Credit: Katherine Delorme
Useer flow - Gov Land Surveyor by Katherine Delorme.

Design & Test: Grey Boxing, Sketches, and Wireframes

Home Page - Option 1

Grey boxing. UI & UX design - Home Page Option 1 by Katherine Delorme.

Home Page - Option 2

Grey boxing. UI & UX design - Home Page Option 2 by Katherine Delorme.

Home Page - Option 3

Grey boxing. UI & UX design - Home Page Option 3 by Katherine Delorme.

Home Page - Option 4

Grey boxing. UI & UX design - Home Page Option 4 by Katherine Delorme.

About Page

Grey boxing of an About page. UI & UX design by Katherine Delorme.

Additional Page

Grey boxing for an additional website page. UI & UX design by Katherine Delorme.

Software Download

Grey boxing of the software download page. UI & UX design by Katherine Delorme.

Demo Sign Up

Demo sign up page with a three section form laid out. UI & UX design by Katherine Delorme.

Dashboard Sign In

Grey boxing of the sign in page. Left is form and right image. UI & UX design by Katherine Delorme.
Designs for various pages Credit: Katherine Delorme

Dashboard Sign In

Grey boxing for sign in page with the form at the center. UI & UX design by Katherine Delorme.
Resources
[1] How I got a UX design job at Google. YouTube. Andrew Doherty. June 29, 2016
[2] How to conduct an awesome user interview. Medium. Daniel Birch. February 5, 2020.

Thank you for your time.