Mesh Firm is a Copenhagen-based product management consultancy hub.
A community of product managers that helps organizations to elevate their products.
Mesh Firm provides product strategy and discovery, product launch, training and coaching, growth, and leadership. Mesh firm also assists with interim Product Manager and Product Owner roles ready to onboard and deliver value for the organizations.
The Website design was created based on Ux/Ui design principles.
The design process was a close collaboration with the Mesh Firm internal team and was divided into 6 phases, using a Double Diamond process as a reference for our design thinking practices.
---
This work case contains a sample of the results from the user research and user flow analysis.
The intention was to support the firm's success with its main objectives. For instance, some of them were:
This work case contains a sample of the results from the user research and user flow analysis.
The intention was to support the firm's success with its main objectives. For instance, some of them were:
-Accurately communicating about the services they provide,
- Guiding potential customers to find the right content by providing concise information with a clear structure
- Encouraging them to book an appointment with one of their experts (or sign up for a training or workshop event with them).
1. UNDERSTAND - 2. DEFINE - 3. SKETCH - 4. DECIDE - 5. PROTOTYPE - 6. VALIDATE
1. UNDERSTANDING THE CLIENT AND THE USER
Steps:
User research, competitors analysis, market brief, target user description,
visual inspiration boards, design trends (on tech fields).
Having a profile with the characteristics of the archetype of the target customer helped us to focus our efforts on a realistic approach based on the experience of Mesh firm’s consultants. Creating this persona supported us in the process of figuring out how to relate to the audience and make them connect with the company values and work principles (previously shown in this document).
2. DEFINING THE PROBLEM
We analyzed and defined some basic requirements from both the Client (company) and the User perspectives and tried to merge them focusing on the pain points of both. That gave us a direction on what were the critical areas for development and improvement.
Client perspective
-Needs more storytelling and guiding the users to the right places
-Tone of voice: has to establish one, more personal and friendly
-Some of the content paragraphs need rephrasing
-The website needs to be more user-friendly
-We need to show more cases, from the beginning
-Freelancers page, more focused on work and more tactical
-Brand promise, what we offer (Community)
User perspective
-Minimize information and CTA to avoid competing with relevant information
-As a user, I wouldn’t be able to find all the info and different subpages from the landing page
-There are too many CTA buttons and links,
-I cannot know what’s important and what is not so relevant for me
-I cannot know where to go
CORE VALUES
We decided to develop a strategy focusing on these principles to create an appropriate design system and visual identity that could align with the company values building the visual material and complementing the content of the products and services the firm offers. To determine our direction we selected these values and made a list of keywords that help us make sense of the following steps.
INSPIRATIONAL MOOD BOARDS
We used visual references of various concepts only as a reference for creating our guidelines, these mood boards helped us integrate aesthetic aspects of the brand into simplified and minimalistic visuals that serve as a support for the brand communication and content visualization.
4. ESTABLISHING A BRAND IDENTITY (DECIDE)
The following slides compound a set of brand guidelines proposed as a refresh for the company including font styles, logotype, color schemes visual elements for visual branding and marketing material, visual material for presentations and content for the training events, and a component gallery for building the website and creating a design system.
The process of creating these assets was quite cyclical and iterative, bouncing and testing different concepts and refining ideas at every round of iteration. We kept progressing and figuring out the solutions that best suited the company and prioritized the ones that felt more familiar and authentic. In other words, we kind of selected the designs that made the team members feel more comfortable and reflected the energy of the community.
During this constructive process, we tried to be flexible and adjust the visual elements to try to complement the brand across multiple social networks. Just as a note, some of the elements and colors were defined later on in the process after several tests and samples, mock-ups, and prototypes of the visual elements applied to the product.
During this constructive process, we tried to be flexible and adjust the visual elements to try to complement the brand across multiple social networks. Just as a note, some of the elements and colors were defined later on in the process after several tests and samples, mock-ups, and prototypes of the visual elements applied to the product.
Font styles
Color palette
Logotype
Supporting visual assets
MARKETING VISUALS
Short sample of layout design for Social media platforms.
Some examples of Marketing material taken from Mesh Firm's social network:
SERVICE DESIGN (DEFINE)
We had to reorganize some sections and rethink the structure of the pages to make the site more user-friendly and improve the website functionality. The image below shows the general structure of the current website at the moment of the start of the project and a proposal for the new website including critical interactive points such as "Call-to-action" buttons and links between pages and sections.
DESIGN SYSTEM
5. PROTOTYPING and WEBSITE LAYOUT
Landing page
The website was designed using a grid on the layout to keep all the sections responsive within desktop and mobile versions. The design system proposed for the website, including colors, font styles, components, and other visual elements, is meant to be consistent with the brand guidelines and keep a close relationship with the content across social media channels and other platforms.
PROJECT SUMMARY
Contributions, validation, results.
Overview
This project focused on revitalizing the online presence of Mesh Firm through a strategic website redesign. The primary objectives were to enhance visibility, facilitate effective communication via digital channels, spotlight the consultants' expertise, and modernize the visual identity to align with the company's values.
Design concept
The design concept centered around implementing UX/UI principles to create an intuitive and visually appealing website. Mesh Firm, a community of product managers, specializes in offering services such as product strategy, discovery, launch, training, coaching, growth, leadership, and interim product management roles. The design aimed to translate these diverse offerings into a cohesive and engaging online experience for users.
Collaborative process
Collaborative process
The design process unfolded in close collaboration with the internal Mesh Firm team and adhered to a structured approach, utilizing the Double Diamond process as a guide. The six phases of the process incorporated design thinking practices to ensure a thorough and thoughtful transformation of the digital platform.
Results: User research and user flow analysis formed the backbone of the design decisions. The outcomes reflect a sample of the results achieved through this meticulous approach. The redesigned website successfully addresses
Mesh Firm's key objectives:
Accurate Communication: The new design ensures precise and transparent communication about the services Mesh Firm provides.
User Guidance: A clear and structured layout guides potential customers to the right content, facilitating a seamless experience.
Conversion Focus: The design encourages user actions, such as booking appointments with experts or signing up for training events, aligning with Mesh Firm's overarching goals.
6. VALIDATION
Validation of Concept
The validation of the design concept is evidenced by the positive impact on user experience, increased engagement metrics, and alignment with Mesh Firm's strategic objectives. User feedback and analytics indicate improved comprehension of services, enhanced user navigation, and an uptick in desired interactions, validating the effectiveness of the redesign.
My Contribution
The success of this project owes much to the contributions of the design team. Their adherence to UX/UI principles, proficiency in the Double Diamond process, and collaborative spirit with Mesh Firm's internal team were pivotal. The designer's ability to translate complex service offerings into an accessible and visually appealing digital interface significantly contributed to the project's success.
In conclusion, this project not only transformed Mesh Firm's online presence but also demonstrated the value of thoughtful design in achieving business objectives and enhancing user experiences. The results underscore the importance of aligning digital strategies with organizational goals for a holistic and impactful outcome.
