UX/UI-design

UX/UI-design

Construction Company

Construction Company

Client

Client

A construction company

Brief

Help a client create a digital platform for handling work offers and requests - procurements with various and several construction businesses.

Time

February - June, 2020

Tools used

- Sketch
- InVision
- Abstract
- Zeplin
- Slack / Google Teams

My role & work

UX/UI-design
In this project I also worked with two co-workers. Robert Lundberg, leading up to high-fidelity wireframes; and Philippe Sainz, who created the design concept along with the logotype and styleguide.

About the client & the project

About the client & the project

The client has a long experience of working in the construction field, leading their own construction business as a building contractor.

My work was to help make the construction business (the client) more effective by creating a digital platform for handling work offers and requests - procurements with various and several construction businesses.

Disclaimer!
This client and its product are still under development and I will not reveal any possible business secrets out of respect for the client. Therefore, I cannot show any clear (I have blurred them) documents, insights, analysis or wireframes at this stage. The product is planned to be released in fall 2020.

buildings

Designed by Philippe Sainz

The work process

The work process

From UX research to UI-design delivery.

From UX research to UI-design delivery.

image_hw_building

Client homework

We asked the client to explain and teach us as much as they could about their situation by asking questions and had them answer in a document. Example of questions asked were: Target groups? Possible competitors? Goals? KPI’s? USP’s? Inspiration?

Competitive analysis

By looking into other digital platforms and other businesses, we learned how the market works today, and could find both pros and cons in what way others face the various challenges. 

I usually check out the user flows, to see where it is working well and/or where it can be improved. Along with this, I also look to see what our client’s needs are for their future users. This is a phase where I also take a lot of notes and compare the notes with all the various platforms.

image_competitiveanalysis-building

Interviews with professionals

Questions were structured in a document, starting with short introductory questions, followed by more informative questions about the person’s work process, dreams, and ideas on how it would be or work; and, finally, ending with more specific questions based on the person’s profession.

Open-ended questions were used and all interviews were recorded. I transcribed - not word for word - key information from the interviews. Since we worked from a structured setup, it was easy to compare answers, analyze, and find key insights from all the interviews.

Debrief document

Debrief document

The debrief document included the client’s homework, information based from the sales pitch the client gave us at the very beginning, notes from meetings, some interview insights, and the competitive analysis. The main goal of the debrief document was to summarize all gathered information and to provide as a check that we were all on the same page before moving forward. The debrief document ended with a few additional questions for the client to answer. Through the information obtained and summarized in the debrief document, we found three key concepts: cooperation, risk-minimizing, and effectivity.

image_userjourney1_building

User journeys & User flows

User journeys (based on two different roles)

The user journeys were based on two different main roles - the contractor and the subcontractor. The journeys were structured by what steps are involved, such as: “preparation”, “handling”, and “ending”, what the roles do, what kind of activities they engage in, what needs they have, and their experience while they’re doing all the above. In this way, we could find the pain points we want to release and make easier; and also easily see what is already working, but that might also be a challenge once everything is digital. The setup of the user journey included the use of face symbols for “happy”, “so-so”, and “sad,” to help give us an easy and fast visual view of the two different roles experiences.

image_userjourney2_building
user-flows-blurred2

Research & insights document

Research & insights document

We gathered all the new insights and information found after the debrief document. We summarized the debrief and wrote more in depth about the key words that had surfaced throughout the work process so far. We also summarized the interview insights and ended the document with conclusions of the user journeys.

image_postits-building
image_conceptSummary_building

Summarized & documented key functions

Summarized & documented key functions

With all of the knowledge from earlier steps in our work process, we listed possible key functions to be presented in the final product - the digital platform. These functions were also based on ideas from client themselves, interviewees, competitors, and earlier material.

Created concepts

Created concepts

Based on the user journeys, we created detailed concepts built from the steps that the contractor or the subcontractor might take. We dug deep into each area, listed possible scenarios, and structured how to solve potential challenges. With the user journeys, we also created visual concepts as well. We kept the face symbol from the user journey documentation and presentation in order to make it easy to follow, but also in order to go into a deeper understanding and ideation with functions in various concepts. Example of concepts could include: Dashboard, communication, activities, and time frames.

concept document
wireframes

Wireframes

Wireframes

We created low-fidelity wireframes with some views/pages in order to organize the hierarchy of the pages. Then, I moved on to create around 60 high-fidelity wireframes based on the concepts we worked on in the earlier phase. The wireframes were iterated with the client on a regular basis, and then had a final approval in order to close the UX-design phase before moving over to the UI-design phase.

Design components & component library

Design components & component library

The visual designer presented logotype ideas, the branding design concept/mood board, and worked with the client to finalize the visual design brand expression. Once it was approved by the client, the designer started applying design to some key pages of the platform and started the design component work.

I structured the component library and added components that did not exist, based on the design the visual designer had agreed on with client. I continued to assist my colleague, when needed, throughout the process.

Zeplin delivery

Zeplin delivery

Once several key pages and components were designed and structured with various states, we delivered the design, by uploading everything to Zeplin in order to be available for the developers.

Disclaimer!
The digital platform is very complex and the goal was not to design all pages, possible scenarios and functions on the platform, but to deliver several pages where same or very similar components were available.

Disclaimer!

The digital platform is very complex and the goal was not to design all pages, possible scenarios and functions on the platform, but to deliver several pages where same or very similar components were available.

Challenges

Challenges

The learning curve

The learning curve

As always, when starting work on a new project and with a new client, there is bit of a learning curve. In this case, the client was a construction business, something of which I have no previous experience. There were many new terms and construction jargon to learn. However, that is also the charm of working with different clients - there will always be new knowledge to gain in the process of creating a product tailor-made for a specific business.

A lot of documentation

A lot of documentation

With a complex system and a branch with new terms and lingo, it was extra important to document and communicate everything to make sure the client followed along, agreed, received input and insights, and so forth. This took time to document. Time, I sometimes felt, was very limited and, therefore, I needed to be very focused at all times. On a very positive note, it was well worth it! Good communication minimized possible misunderstandings and created a way for the client to be involved throughout the whole process, thus making this a team effort.

Covid-19

Covid-19

I have said it before. Covid-19 sucks. I was (and still am) really careful, and therefore, worked remotely most of the time. Communication worked seamlessly by using Slack, Google Teams, and other digital tools such as InVision to present wireframes/design providing the possibility for the client to make comments along the way.

What I have learned

What I have learned

#1

The possibility to learn about a product/business increases even more when talking with the experts. Communication is key. It is important to be in close contact with the client by having regular meetings in order to deliver a quality product to a satisfied client.

#2

#3

It is important to make sure one phase is approved, before starting the next phase. In this way, the process works smoothly and minimizes the risk of misunderstandings.

#3

By documenting everything, it is possible to consistently show results to the client; but it also serves as a way to make sure that nothing is left out and that the project moves forward.

Final words

Final words

The platform is under development as I write this (June, 2020).

The platform is under development as I write this (June, 2020).

Selected Works

Everlasting RunesUX/UI-design & User tests

Construction companyUX/UI-design

Various ClientsUX-processes

© 2021 - Lina Eriksson | All rights reserved.