The Message is the Product
In 2018, the construction industry in the US spent an estimated $31.3B on rework due to poor data and miscommunication. Despite the high costs associated with rework, adoption of digital tools within construction and trades still has a long way to go, with only 18% of companies consistently using mobile apps to access project data and collaborate with stakeholders, according to a 599-person survey conducted by PlanGrid and FMI.
While larger organizations may adopt tools but fail to utilize them, among small to medium sized businesses the tools are simply not in place. As businesses grow, it is easy for them to feel overwhelmed by the complexity of the platforms on offer.
I was part of a project to redesign the promotional website for Level, a mobile app for communication and project collaboration.
Project Scope
Website Redesign for Level
My Role
UX Designer
Project Timeline
3 weeks (Oct. — Nov. 2019)
Level
Level is a central platform for communications and project documents, aimed at those in the construction industry.
The Challenge
The current website provides a way for clients to find the download link for the app but does not generate significant acquisitions or leads. The Level team has discussions with potential customers to explain the value of their platform, but as they grow their business, this approach won’t scale. Wouldn’t it be better if the website could speak to users conversationally and concisely?
The challenge was to clearly define and communicate the purpose of the app to likely clients with different processes and frustrations.
Our Goals
- Create a website that is clear, informative and engaging
- Simplify and streamline the messaging
- Give Level a strong and distinct visual identity
Our Aim
- Increase downloads of the app and demo bookings from visitors to the site
Getting Constructive Feedback
The Level team was a valuable source of information. They were generous with their time and shared stories of their customer interviews. We used this information as our starting assumption for our audience. We used online surveys to gain a broader understanding of our market. Importantly, we wanted to understand who we were talking to so that we could speak to them in a relatable way.
Key Insights
Our survey results reinforced our initial assumptions — inefficient processes, disorganized email inboxes, and the challenge of getting everyone on the same page all surfaced as common frustrations across industry sectors and management levels.
Ease of Use is King
One assumption that was strongly reinforced was an emphasis on ease of use. Respondents highlighted it as their top concern with digital products. It was clear that our messaging had to prioritize the simplicity of Level.
Checking the Field
We compared the websites of our competitors and noted their sales techniques as a set of features. Based on this, we could better understand how the current website fit into the field, what was common about the way features were talked about, and identify opportunities for the website to better position itself.
Compared to its competitors, Level’s messaging is unclear. It does not immediately explain what problems it solves. It also lacks testimonials, a feature commonly used in the industry.
However, Level is uncomplicated and quickly usable. Some competitors provide detailed solution breakdowns but come across as complicated in the process.
Bridging the Gap
To get from research to design we needed to organize and distill our information. We started with an affinity diagram to organize the responses from our online surveys.
Affinity diagrams are a pattern-finding technique useful for identifying groups among varied data points, particularly when those data are qualitative. Data points from our surveys were put onto sticky notes. With all the data points visible, we started moving them around to find what was common among them. In some cases, the groups did not differ much from the questions asked in the survey, while in others we were able to form new groups based on similar responses.
Relating to the Users
We focused our research down into two personas. Our primary users are represented in Andrew, a contractor who is grappling with communication growing pains. We captured our secondary users with Kevin, an HVAC installer who is frustrated by miscommunication.
With Andrew clearly defined, we were able to map out his daily activities and how he would interact with the current Level website. We expressed this through a user journey map which provides a high-level overview of Andrew’s actions, emotions and thoughts.
The journey map helped us to identify opportunities for how the website could better speak to Andrew’s needs.
Mapping it All Out
We started our design similarly to our research, going from broad to narrow. We came up with several features to incorporate:
- Keep the focus on ease-of-use
- Use testimonials for social proof
- Make demo-booking frictionless by providing a booking form
- Make it personable with details of the founders
Having identified what features we wanted to focus on, we developed a site map to give a bird’s-eye view of the site. Our first approach was to keep everything on one page to imply simplicity. Later on, as we began to realize the design, this approach became unwieldy. Breaking it up into a few distinct pages led to a design that allowed the main page to be more direct.
We used user flow diagrams to better understand how visitors would interact with the site on a detailed level. These proved useful for highlighting issues in the design. Our initial design contained multiple calls-to-action (CTAs) throughout the page and our flow diagram helped visualize why this wasn’t the cleanest approach. We simplified the design by making our CTA always prominent and available to the user rather than interrupting the flow of information on the page.
Making the Design Concrete
Our UI designer created mood boards inspired by trends within the tech and construction industries. Core to the approach was giving Level a strong sense of identity consistent with the construction industry while also giving it a warm and inviting feeling reflecting the personalities of the founders and the company’s responsive approach to its customers.
Through iterations and discussions with the client, a comprehensive style guide was developed including typography, colour palette, icons, and buttons.
With our main features identified, it was time to start putting them onto the page. Because the design was for a marketing page, it was important to focus on the copywriting. Here, we used the feedback gathered in our research to relay the value of the platform to potential users.
We created low-fidelity sketches to rough out the design in terms of sectioning and layout. Our lo-fi’s kept to a one page layout and emphasized demo booking.
As we came to turn our lo-fi’s into mid-fi’s, things did not go as smoothly as they had previously. Without a lot of functionality to design and divide among the team, we ended up trying to reach a consensus on many small design details. This caused some friction and slowed down our process. However, our UI designer was able to smartly interpret our designs through a singular voice.
The Final Design
Contractors and trades come to websites looking for solutions to their specific problems and prefer direct language. The main page uses ample negative space and concise statements to communicate the uncomplicated nature of the platform.
The primary CTA for booking a demo is always present, letting the visitor opt-in once they have learned enough about the product. More detailed feature details are kept to a separate page while being contained within brief, memorable snippets.
The demo-booking form gives visitors a sense of accomplishment by providing a set date for a follow-up and keeps things simple and on one page.
Future Opportunities
One major opportunity that was highlighted in our research was SEO optimization. Many of the users we surveyed used Google search to find new products relevant to them but Level does not readily surface as a result in its category. We also identified short videos or animations as an opportunity to better illustrate some of the app’s features.
Looking Back
In the end, we delivered a design that the team was happy with while also providing useful market research and insights to help them position their product as they increase their client base.
The process was valuable in helping me understand the limits of my collaborative abilities and highlighted for me the importance of knowing what kind of collaborative environment I can thrive in so that I can best accommodate the group I am in.
Given the marketing focus of the project, a lot of the research and planning process could have been abbreviated to provide more time to focus on refinements of the high-fidelity version of the design. It would also have been productive to use user testing to assess the intended audience’s impression of the visual design. Moving forward, I think it’s important to recognize the design process as a rough guideline, with the timeframes allocated to different sections to be compressed (or dropped altogether) or expanded depending on the needs of the project.
