Berlin Law Firm Re-Branding & Website Redesign
Team
with Anna Zimmermann & Eduardo Noguira
Time
9 months
ROle
Visual Design, Interaction Design
External Customer Communication
Stakeholder Management
Tool
Figma
Project Objectives
Mueller Legal is a modern & highly efficient law firm offering a broad service range available to everyone who needs them. By continuously optimizing their services, Mueller Legal's partners reached the point that their online representation was not consistent with their values & services.
Phase 1 - Research
Gaining knowledge about the field and understanding of the current status of the website
We value close collaboration with our clients as we understand they are the experts in their fields. To build this collaboration we did a kick-off workshop. The goal was to gain a deeper understanding of the challenge & target audience. With design thinking methods, we collected the business & team requirements. In addition, we created proto personas of the target audience and emphasized their expectation & needs towards Mueller Legal. Proto personas are representations of the primary target audience; we call them proto personas because it's the first draft of a user persona, not yet based on in-depth research. We use this method to manifest from the start a user-centered approach & communication with our clients.
Afterward, we conducted a competitor analysis to understand the market better & to discover possible opportunities for Mueller Legal. We darted global and across all areas to have a broad range of input. In addition, we created mood boards for sharing our first ideas for the visual direction.
Even though we already looked for inspiration for our concepts; we aimed to understand the problem space during the research phase. An excellent method to analyze the current state is the Heuristic Evaluation. Here we work as a team of three Usability Experts and measure the website thoroughly with the help of the 10 Heuristics (see visualization). Evaluating the website together allows us to locate and rank the usability and design weaknesses on a scale between 1 - 5. The ranking helps prioritize design decisions and communicate them transparently with our clients.
Phase 2 - ideation
Within this project, we usually start the ideation phase with individual iterations and weekly feedback group sessions where we present and evaluate each other's work, always aiming to add multiple perspectives to our designs.
With the user needs and business requirements in mind, we created Information Architecture (IA) alternatives. AI is a standard deliverable in the UX design process and offers a blueprint for content and navigation structure.
With the iA in our hands, it was time to sketch multiple layout alternatives, exploring distinct solutions to the opportunities identified during the research phase. The heuristic evaluation, for example, let us determine that the layout needed a more efficient way to accommodate heavy text areas.
(Picture of a component progression)
Phase 3 - Design system documentation
Design systems provide accessible interface design documentation to other stakeholders. They allow you to keep brand consistency and easily replicate the brand visual language into many devices. At our team, we use Figma - a visual design tool - to build and document the interface elements in a modular fashion. This framework lets us implement global changes quickly and check if the layout supports different content and usage scenarios.
For Mueller Legal, we designed a modular system with four categories:
Primitives
Primitives are the founding and unique elements of this visual identity. Here you will find the guidelines for typography, color, scales, shapes, and animation.
Widgets
Widgets are the combination of two or more elements. They usually can work isolated or combined into a section. Here we placed navigation bars, multiple text combination containers, and cards.
Elements
Elements are the combination of primitives to form a simple structure. Here we allocated buttons, input fields, and dropdowns, for example.
Layouts
Layouts define the possible sections of the website, combining all the previous categories.
Phase 4 – Usability Test
Usability Tests: Is our concept solving the user's problem?
Involving users in the design process is essential to ensure we are on the right track. For that, user -interviews & usability- tests are the necessary methods for each design process.
For the usability test, we built an animated prototype of the website, which we could show the participants. We asked our participants to solve several tasks to see if a new page structure allowed them to achieve their goals at a satisfying level. With the user's feedback, we detected some minor issues and finalized the design for the handover with the development.
