A UX Case Study: Connecting Business to Business in the Skilled Trades Field
A real client project while at the UX Design full-time program at RED Academy Vancouver, Canada. Redesigning a website for the skilled trades industry.
On an early March morning, I and my team were bunched together in front of a laptop screen, reading the project brief for our second client assignment.
My team consisted of 5 people: 3 User Experience designers (UX) and 2 User Interface designers (UI). Very friendly and creative people, I’m excited to start working with them.
As we read the brief we learnt the client is a company called LincEdge which operates within the skilled trades industry. The CEO has 23 years of experience in the business. She had previously opened 2 other companies. It is admirable that the owner of this business is a woman, a woman in a field dominated mostly by men.
As we don’t have much knowledge about the skilled trades (besides our general culture), we have to prepare some questions to know more about the client and the field she works in. Part of that will happen during the client meeting, but also through our own research (surveys, interviews, analysis of the competition, etc.)
Pre-Meeting Preparation
Therefore, before the client arrives we created an interview script.
On the UX side, we asked questions such as:
- What is your company’s current presence?
- How is currently working or not working to fulfill your needs or goals?
- What is the scope of this project?
- Where and how would you see this project being used?
- What is the reach of this project? (BC, Canada, USA, etc.)
- What are some of the limitations you’re aware of for this project?
- How would you measure the success of this project?
- Why did you decide to pursue a mobile app first? Why on iOS?
- What will be the relationship between the app and the website?
On the UI side questions like these were asked:
- What are your brand values?
- Tell us more about the name, and how did it come about?
- Tell us about your logo?
- Tell us about the slogan and what does it mean?
- How do you want people to feel when they are using your website and apps?
- How did you choose the visual colours that your brand carries? And why?
- What companies do you take inspiration from?
Later on, we were informed the client had sent a representative for the meeting, as she was not able to attend. That was fine, as long as we had a person working closely with her who could answer our questions, and the representative was the Community Manager inside the company, so that would work. He arrived and after the introductions were made we got together in a quiet room and asked if we could do a voice recording of the session, he agreed and we started.
The Client Interview
This in-person interview is a very helpful meeting because it provides extra information that isn’t stated in the brief document, and materials that can be communicated better through talking.
The client needed a website redesign. The main purpose was to inform people about the product they were just about to release: an app, which at the time of writing this article had already been released on the App Store, an Android version would follow soon.
The app purpose is to connect owners of contracting companies with other owners to get to know about new projects, share workforce and not having down times or periods where they weren’t able to take on projects because of a lack of resources. Also, independent contractors would be included in the future.
When the client was asked if skilled trades meant they work in the construction field, the representative said ‘No’. They deal with a subset within the industry called “low voltage” which includes: IT workers, electricians, security (provides with key cards, passcodes), remote controlled shades, home automatization and home custom installation.
LincEdge works in residential areas mainly, but plan to expand to commercial in the future.
A few days later we phoned the client to ask some questions only she could answer:
What do you like about your current website?
I like the concept of the icons (the ones used on the “Five Advantages” section)
What don’t you like about your current website?
- The top navigation bar (View image below)
- The contact page (which is unexpected to find inside a “More” button, it should be easier to pinpoint)
- The features page, specifically the layout is not working, there is a lot of space in between the text and pictures.
- The customer types pages, we could remove them.
- Not all everything should be iPhone examples because the app will also be available for Android.
The Problem
Their current website was created using Wix, which according to the representative it has limitations in regards to social media and analytics. That’s why the client wanted the website to be done in WordPress.
In the skilled trades industry, when people need to find projects or resources they usually use their list of contacts instead of an app to search for them. It is a challenge for LincEdge to find ways to change that behaviour.
An easy-to-use app that does the job it promises might change the users’ opinion about using technology. Although our team is not involved in the making of the app, we’d have to make the website convincing and informational enough to make users want to download it. Which take us to the website goals…
Website Goals
Must-haves
- Increase LincEdge credibility.
- One way is adding testimonials.
- Better written content clearly indicating the product offered is an app
- The user should see the value offered immediately.
- The user should feel convinced to download the app.
- Give user enough information to make a decision right there or to contact the company.
- Conversion of clients through the contact form. And it would be nice to have a registration/sign up form in the future.
Nice-to-have
- A blog to write industry related articles with advice and tips drawn from her expertise.
- Also, have a forum to answer doubts from people. Encourage them to share their story.
Discovery of Company Mindset/Brand
“LincEdge’s mission is to create and grow a network for owners of skilled trade businesses and freelancers, making it safe to connect, source and share labour as needed.”
According to the client when visiting the LincEdge website the user should feel trustworthiness, credibility, innovation and progress.
Area of reach and Timeline
Currently, LincEdge primary reach area for both the website and the app is Vancouver.
Timeline: We have a space of 3 weeks to complete the project, with both UX and UI phases.
Research
Next, we created a survey and sent it out through Facebook, Twitter and Reddit and also to 10 contacts the clients provided to us. However, after 3 days passed only one person had responded the survey.
During those 3 days, we also looked for people within our reach that we could interview. We were able to interview some people, around 5. But we still needed more data.
It might have been that the target respondents we needed were very specific: owners, hiring managers or supervisors, and workers in the skilled trades industry. It could also have been their lack of time or interest in sharing their experiences with strangers. It was a big contrast to the previous client project I worked on which was in the rental industry where so many people were eager to share their opinions and their stories. People were more opinionated about it.
In any case, there was no time to wait for more answers, because we had to move on to the next phase. So we looked at other ways we could collect information. In helping with that, one of our teammates took out his box of IDEO Method Cards which describe methods used at the famous design studio IDEO to inspire great design. They serve to inspire new approaches to design always considering the user as primordial.
One was of the suggestions was conducting Customer Journeys, another requesting the Google Analytics from the client.
Customer Journeys
It’s called this way because is a visual representation of the journey a customer has while experiencing a product or service. This is an important tool to identify users pain points and therefore areas of improvement.
For this, we showed people the current website and asked them 3 questions:
- What do you think this website is about?
2. What type of people do you think use this website?
3. Are you prompted to take any action, and why?
We got these answers:
About the hero photo of an orange-helmet worker with the sentence ‘Skilled trades are closer than you think’, one person commented:
“Without the phrase, I’d have thought it’s about electrical installations”.
While another individual thought “That phrase doesn’t give me a clear idea of what they are. It’s a good catchphrase, but it’d be better if it describes what the company wants to do”.
“Not clear what industry this is, are they focused on construction or something technical?”.
“The homepage hero image screams construction workers but doesn’t match the customer types page”
About the 2 cellphone images after the big photo made people comment:
“I guess they have an app for the companies and the workers to see what both parts can do together”. Other person commented “Looks like the website wants you to install an app, then they should include a link to that app”
“It’s for owners and the workers, I guess you need both parts or the app wouldn’t work”
Referring to the phone’s images with the titles: ‘Find jobs’ and ‘Find work’ people thought:
“It’s for companies that need to hire personnel…and also for the subcontractors”. “Seems like the companies can post jobs and the workers can look at those job offers”
The opinions on the About Us page were the following:
“I don’t feel like reading because is a lot of text”. Another person declared: “Isn’t clear about what the company does”
Regarding the Customer Types page:
“Better to call it ‘Testimonials’, also they call us ‘customer types’ that’s not good, does it mean I have to pay for the app?”. Another interviewee expressed: “It should have testimonials — social proof is big for me”
About the contact page, one individual suggested “Contact page should be alone or inside the About us page”
After gathering all these opinions we created the following journey map with the collected results.
Google Analytics
We requested this analytics about the current website because we wanted to know how it was performing. The website total views to that day were 1,100 views, the home page and the about page the most visited ones. But still, they were doing badly as the bounce rate for the homepage was 36.91% and 74.36% for the About Page. Bounce rate meaning the percentage of visitors who navigate away from the site after viewing only one page. Yes, after only one page the users were leaving the site. Which means the About page was clearly driving away viewers, and in general they didn’t find the value for them on this website.
Regarding the Average time spent on the pages, Home was at 1 min 15 sec, while the About page was 2 min 57 sec. Plans and Features average view time was 11 sec, and 35 sec respectively. which was pretty low considering they contain a lot of information, but seems like people weren’t interested. Now the challenge was for us to make the pages more appealing to retain the visitors.
We also viewed at the demographics of the users in order to create a user persona later on. We found out that most of them were male between 25 to 44 years old.
About the devices used to visit the LincEdge website it was found that 74.79% of users used their desktop computers, followed by 21.90% visitors using mobile, and the least used device was the tablet, at only 3.31% users.
We realized we could use these percentages on the creation of the user persona described a bit below to indicate how frequently that persona uses his/her devices.
After looking at all the interviews, customer journey map and the analytics we saw a great opportunity in here to make the website more appealing and informational for users to keep reading and to understand what the company does, that the main product is an app, that it will be available to download soon for iOS and Android and that it is meant to be used for skilled trades business owners and freelancers.
Planning
Affinity Diagram
This is a tool to collect all the main information that we gathered during the research part. All the UXers write information on post-its to later on rearrange them into groups according to each person own judgement. It is done in a time boxed manner for 6 minutes and without speaking in order to not influence other people’s categorization. This process can be done with the UI designers as well. That way they get to know about all the snippets of data that UXers collected and they’ll be able to design a better aesthetic.
After the 6 minutes have passed, we can talk and discuss about our arrangements and move some post-its around if they make more sense in another category. Then we put a name to said category. Below is a picture of the final affinity diagram.
Key findings
The main findings we obtained from the research were about:
- The website’s lack of authenticity
- Devices they use
- Their pain points
- About the environment they work in
- Their methods of communication
User Personas
After identifying the research key findings we could move on to creating a user persona, which a ficticious person made with real data from the research. So the name is imaginary, but information like their age, occupation, goals and frustrations, device the persona uses were taken from the google analytics and the interviews with real people.
We keep the user personas in mind all the time during our design process, and if at any point we are unsure about what to do, we’ll ask ourselves: what would Jeff Knuckles do?
Yes, his name is Jeff Knuckles considering he is a tough kind of guy since he is working on the skilled trades industry. The age of 34 was taken from the google analytics of the LincEdge user’s demographics which is 25 to 44 years old. As well as the devices’ percentage of use was taken from the analytics graph described above in the research section.
The bio, the goals and frustations were taken from words the interviewees share with us about their own goals and their pain points working in this industry, in the manner we filled out all the other sections. Now you have read how a user persona is made.
Scenario & Storyboard
Next we created one scenario, a possible short story that could happen to a person in real life (in this case our user persona) which sets the reason of why they would benefits from the LincEdge app.
Company Owner Scenario
You are the owner of a small contract firm in construction, after a long day at work, you are planning the next couple of weeks of work. You notice that one week you are waiting for a site to be ready, while there are 4 jobs going the following week. You realize you don’t have enough personnel to work those days. You struggle to find a way to source credible skilled workers for the upcoming work ahead and wonder what to do with the guys given a likely work shorter on a quieter week.
User Flow
Afterwards we created a user flow which is a tool that helps to identify the steps the user persona would take to complete a task(s) and spot where there are confusing or dead-end paths.
The starting point is entering the website and we had two exit points:
- User request to beta version of the app, or
- User subscribes for email notifications.
Site Map
We created a site map to have a visual representation of all the pages the new website will have and therefore we’d have to design. As we drew this map on paper first it helped us to decide how many main buttons the navigation bar would have and the names of this buttons.
So of course this tool is very useful to visualize how much work we had ahead. In this case we realized there weren’t many pages only 7, including the home page.
Design
Finally into the design phase, the most fun part of the whole process, at least for me, but that couldn’t be made effectively without all the research and the planning.
Design Studio
For this stage both UX and UI designers gathered together in order to quickly sketch out screens. In order to do it this is again a time-boxed exercise: sketch everybody draws the same screen for 7 min, then has 2 minutes to present their concept to the others, and repeat the process until the sketches start looking similar meaning the sketches had improved by incorporating elements from the other drawings.
We used this technique to design the main screens, the ones that were more content heavy.
First we starting doing design studio with the Navigation bar (aka nav bar) because we needed to see how many pages we had to design and which pages were nested inside the buttons.
Then we sketched the Home page. These are some examples of the kind of sketches you get from 3 different designers.
And these are some sketches examples of the About page.
At the end of design studio we collected the elements that we thought were the best solutions for each section and drew them together in the same paper to have start making our paper prototype to be tested with people later on.
Individual Sketching
Further sketching was made for the rest of the pages until we decided on the most adequate layout and we added those sheets to the paper prototype.
Paper Prototype
After all the screen sketches were made we could move into the testing phase.
Testing
Low-fidelity Testing
Low fidelity refers to a paper sketch. What we did is ask people around if they wanted to test a prototype of a website. We gave a small introduction to the purpose of the site and some task or task fro them to accomplish, that way we could observe if they got confused or lost in some part, which meant that we had to go back to the drawing board and fix that section.
We tested on 14 tests, obtaining over 5 pages of valuable data.
A/B Testing
We also asked people to choose 1 of 2 options for the Contact form and the ones that got more votes was the one applied into the final design.
Iterations
Reading the all the comments from the testers we identified the common problems they experienced and we concentrated on fixing those.
The changes made in the design process are called ‘iterations’. We proceded to make those in the next phase of design:
Mid-fidelity Wireframes
This is the process of digitizing what we had on paper. We use a software called Sketch. On the wireframes, we establish the grid and organize the elements (text, images, buttons, etc.) in the best way possible for easy navigation for the user persona, in this case, Jeff Knuckles. Also, we include placeholders for future pictures which are indicated with a cross X inside a shape. If the client already provided text we’d use it the wireframes, if not we’d write some text ourselves or use “Lorem Ipsum” placeholder text, which is a standard in the publishing and graphic design world to demonstrate the placement and styling of text.
Building the Prototype
Having this mid-fi wireframes we exported them to an online tool called InVision where we make a digital prototype, in order to have the basic interactions, such as clicking buttons, hovers, scrolling. The digital prototype is created in order to conduct more testing with people.
Mid-Fidelity Testing
After testing the Mid- fi InVision prototype, we made the pertinent changes and then we passed on the files to the UI designers in our team.
Here you click on the mid-fidelity prototype. You can observe how is mostly kept in grayscale, but all the layout and arrangement of the information and images (the design decisions) had been established so that the UI team doesn’t have to make them.
Hi-Fidelity Design
What the UI designers do is apply their art direction that they were developing at the same time we UXers where doing all the process explained in this case study. They UIers then applied that art direction to the wireframes and convert them into something polished and ready to present to the client and ready to update into the InVision prototype. Below is an example of one screen taken to high-fidelity (hi-fi), the About page.
And here is the same About screen side by side in its evolution from low-fi (paper) to hi-fi (digital).
Prototype
Here you can click on the desktop prototype and mobile prototype and observe the interactivity.
In the 2 previous images the About button was displayed in its “open” form, but here in the prototype so can actually see it opening and closing when you place your mouse over (called ‘hover’) the main buttons. Not all the buttons needed a dropdown menu because they didn’t have more options nested inside.
Also in the mobile prototype, you’ll be able to see how the nav bar becomes a ‘hamburger menu’ and uses the whole screen because in smartphones you have less real state and but also the text has to keep on a readable size.
That was the final prototype as it was presented to the clients and instructors at the end of this 3 weeks.
Future Considerations
We also had some future considerations of features that would be good to include in this project but given the time constraint they couldn’t be made at the time. But they can be incorporated later on if the client desires them.
Conclusion
Another series of lessons in UX well engraved into my mind through putting everything in practice for a real client. When I had to revise what the instructors taught in class, read again the notes I took, read the presentation slides and visit again all those useful links shared by the teachers that is when I learn the most, through repetition and applying it in a real setting.