
INTRODUCTION
What is Mestamaster?
"Let's say you're a company leading the construction of 400 new apartments over 10 different buildings. You manage 15 teams, each with 10 people and 100 individual tasks that needs to be performed and reproduced in exactly the right order. In order to make sure the project is finished successfully on time and on budget, swift collaboration between parties and synchronizing an efficient work schedule is truly essential. This is where Mestamaster come in."
Mestamaster is a digital toolkit designed to enhance the management and scheduling of construction projects using Takt time methods. It provides software solutions and consulting services to improve predictability and efficiency in project management, reducing overall project timelines and idle times on worksites.
Takt planning is a construction project management approach that aligns work sequences with specific, evenly-paced time intervals, ensuring continuous and efficient progress across different work zones.

My role
As a Freelance Designer for Mestamaster, I led a comprehensive rebrand, streamlining design across mobile, web app, and website platforms. I developed cohesive low-fi and high-fi UX/UI designs emphasizing ease of use, functionality, and aesthetic appeal while aligning with the brand identity and considering existing brand recognition.
My contributions included creating a unique logo direction, defining the color palette and typography, and providing feedback to enhance mobile and website UX. I designed web UX/UI wireframes and high-fidelity screens, principles, produced a sales material template file, and defined the web platform’s general layout and structure. Additionally, I addressed navigation specifics such as the sidebar, information structure and actively participated in project meetings and discussions.
Scope
What the company provide is divided over two products based on use case:
The mobile app is mainly for team members managing their daily on-site tasks.
The web app is for managing the projects and teams, more as a whole.
The main problems identified were design inconsistencies across different platforms (mobile, web app, website) and a lack of principles and guidelines for the layout and visual representation of the Mestamaster brand.
Deliverables
Three main project deliverables were determined. Rebrand was made first, followed by the sales material and then the web platform designs.

Web platform

Brand guide

Sales material
WEB PLATFORM
Preview
Method
I started by exploring the mobile app and the web platform to map the differences and similarities between the different designs. I made sure to take notes of issues, weaknesses and strengths in the current platform. It was also important for me to understand the product as well as I could, since it has considerable product complexity and depth.
As per request I also provided some quick feedback with my initial impressions of a UI component for the mobile app.
I also reviewed wireframes and prototypes that the product team had previously made, taking note of desired approaches or solutions they were interested in exploring further.
The client communicated priorities as to which screens and components currently were the most important. I started by analyzing current designs and wireframes. Then breaking down screens and components into function specifications, listing a priority of information fields and actions.
I then started wireframing a component for what is called a takt train template. This is a sequence of configured tasks that can then be applied to spaces within a given construction project.
The component itself is a condensed summary of a larger item that is configurable in its own screen. I started with this component because I wanted to introduce an overview screen where you could browse, find and edit all takt train templates in the project. This was mostly for UX and navigational purpose. And would also help with crystalizing information structure and priority.

Iterating with different approaches for the takt train preview component.
I also created a wireframe for some ideas regarding another screen. This screen was deprioritized and focus shifted on the screens and components related to the takt train templates.

I then designed, structured and iterated the full overview screen and the sidebar, focusing a lot on the navigation, information architecture and general layout. The client requested guidance particularly when it comes to margins, structure, layout, paddings and sizing.
Margins and paddings were reduced as one of the leading principles requested by the client was information density. A real UX challenge was to still provide clarity and simplicity without compromising the amount of provided information and technical context.
Moving on from that focus was then shifted towards the screen where you configure a takt train template (edit screen).
It is composed of a sequence of so called “wagons” that together form a “train”. Each wagon contains individual tasks that are assigned to a team and estimated for how much time they take to complete. Train → Wagon → Task.
Wireframes for a column (and its collapsed version, to allow for increased information density) were drafted and feedbacked in various rounds with the team.



Iterating on concepts and solutions.





Meanwhile awaiting feedback on the wireframes for the edit train template screen, I started taking a look at the user flow for when creating a new task and explored two different options for handling the create task interaction. I feedbacked wireframes + annotations with the team.

I drafted a new functionality for quickly cloning tasks and curating collections of tasks. The client expressed interest for having a panel where you can browse, manage and apply task templates. I visualized this in wireframes.

I then continued by creating high fidelity designs based on the wireframes, applying the visual principles and guidelines we previously defined. The designs were made in Figma. This application of the new visual brand will provide further guidance and an example of how the company can apply it to their own designs moving forward.
BRAND GUIDE
Preview

Content
The brand guide handles and provides guidance for various aspects of a new Mestamaster brand.
🌟 Identity and core principles
🔤 Typography
🏷️ Logo
🖼️ Visual elements
🎨 Color
🔄 Brand adaptations
Project Brief
These are the identified qualities and considerations that were requested by the client:

Simple and result-driven
In part due to budget- and time constraints along with the customer profile, the work on the company brand and -products would rather be focused on delivering value within various scopes and functionality rather than deep diving too much into particular details.

Direct and to the point - a “no bulls**t” principle
The clientele was communicated to sometimes have limited experience in usage of tech-products and resistance to adapting new technology. A direct approach when it comes to market communication and UX writing was therefore desired.

Accessibility and clarity
The company products will often be used in construction environments where there’s limited visibility due to glare, dust etc. In some scenarios there might be lower resolution devices being used as well.
Method
I started by doing some research on the current brand and making notes of its background and how it is interpreted. I asked around for what the company wants to convey with the branding.
Among various points there were some internal concerns regarding the “Master” part of the name negatively conveying superiority, which over time affected my decision to suggest separating the “Mesta” and “Master” parts of the name and over time rebrand to only “Mesta” and make “Master” a product name in their toolkit, that might be easier changed later. Hence “Mesta Master” instead of “mestamaster”.
Reading up on ethymology for the current brand name and its associations. I’ve always been interested in linguistics.
When exploring different options and directions for the logo, I used generative AI to analyze and break down visual elements that are associated with the brand identity. During the weekly meeting we concluded to only make minor adjustments to the logo design due to brand recognition purposes.
I then propsed different alterations of the current logo design and tried new approaches for brand typography. Option B (see image) was concluded to be the most suitable way forward for now due to only being a very minor adjustment to the current logo.

Logo iterations combining different typefaces and logo variations.
As for color schemes I wanted to convey associations that resonates with the construction industry and urgency and planning in construction sites. Since Mestamaster is a project planning tool with an emphasis on meeting deadlines, tracking delays etc., the semantic colors will be a very large part of the product experience and also important tools in conveying actionability and urgency.

Color explorations.

The company expressed that they wanted to maintain the primary color and opt for a conservative rebranding approach where they gradually transform the brand.
The new color scheme offers a more comprehensive brand direction and a wider color scheme will help to further develop the product and company offerings.
From there I continued working on the other sections of the brand guide, trying to holistically cover as many areas as possible in the limited time available.
The brand principles I defined early on provided valuable structure for making design decisions regarding the remainder of the brand aspects, making sure each decision align with the brand profile.

Brand adaptations for diversifying products and slogan variations
SALES MATERIAL
Preview

Project Brief
The main platform the company uses for producing presentation material is Google Slides. When I did some deeper evaluation of the capabilities of the platform, I came to some concrete conclusions regarding what is possible to achieve.
This helped to make decisions regarding detail level, structure and functionality. In conjunction with the client we decided to keep it simple and focus on accesiblity and legibility.
Method
I started by scouring the web for inspiration when it comes to layout, design components and techniques that I liked.
Then made some notes regarding what design elements and approaches I liked.

Themeboard & inspiration expedition.
I made some initial wireframes of general structures that I might explore further.

General layout wireframes.
And applied visuals and brand principles, that I presented to the client to evaluate together and know what design direction they liked.

Low-fi concepts for layout templates.
Then I continued by analyzing the company’s existing sales material and pitch deck to break down what slides they typically contain. In order to provide extra customer value I also added a few archetypes that I saw were common practice and my elevate the quality of the slides material.
I looked at the structure and layouts and decided on a set of slide layout templates. Then designed and tested in an iterative process to ensure things looked as intended and matched the high demands for legibility and clarity.
A theme/template file was created and annotated with some notes and instructions for usage.
These Mestamaster projects proved to be both challenging and transformative.
The product itself is a complex, technical and industry-specific tool. This meant it’s inevitable putting considerable effort into researching and understanding the product and how it is currently being used as well as should be used. I think my background in engineering and technically advanced companies and products really helped me grasp the product and its use case quicker.
During the middle part of the project there were issues with communication in regards to work method. The company has a very short and iterative feedback loop. This is highly desirable and has many benefits, but was sometimes difficult to enter quickly as a freelancer in a project with a very limited allocation of hours.
I found myself to be worried about spending too much time on the communication itself and meetings rather than working on providing hard deliverables. The concern was that I as a freelancer wouldn’t provide enough concrete value to the client. One of the negative results was that I found myself being too strict with what I spent my paid time on and focused on the need to perform work efficiently rather than continously.
The client was disappointed about the general speed of the project and the intensity of feedback loops.
We evaluated and discussed the project progress and made these realizations whereupon we changed the collaborative methods and shortened the feedback loops considerably, ending with a much more compatible work flow.
I bring with me many learnings from this project, in particular:
Scoping is incredibly important. Defining what should and should not be included in deliverables. While also being able to change this during the project as customer needs and prioritizations might change. Prioritizing work continously together is essential to stay on top of the right tasks.
More communication is better, even if it’s brief. Include allocated time for communication and meetings in future projects.