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.
Designed by Philippe Sainz
The work process
The work process
From UX research to UI-design delivery.
From UX research to UI-design delivery.
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.
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.
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.
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.
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.
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
© 2024 - Lina Eriksson | All rights reserved.