Client UX/UI Project

Microsol Website Redesign

UX/UI Design · User Research · Figma · Squarespace

A research-led redesign of Microsol Science's website, improving how scientific and business audiences understand the company's technology, services and expertise.

Working with a real client, the project followed a complete UX/UI process — from understanding users and restructuring information to usability testing, design iteration and implementation within Squarespace.

Role UX/UI Designer
Team 2 Designers
Project Client Website Redesign
Tools Figma · Squarespace
01 — Define

The Challenge

Microsol is an aerosol technology startup supporting the development of orally inhaled and nasal drug products.

The project focused on restructuring its existing website to create a more accessible and intuitive experience for pharmaceutical companies, biotech clients, investors, partners and potential funders.

This meant the challenge was not simply visual. The website needed to communicate complex scientific information while helping different audiences find the content most relevant to them.

01

Complex Information

Scientific information needed to remain credible while becoming easier for visitors to understand and scan.

02

Content Structure

Existing and new content needed to be reorganised into a clearer information hierarchy.

03

Multiple Audiences

Scientific, business and partnership users approached the website with different goals and expectations.

02 — Research

Understanding the Users

The UX process began by identifying Microsol's main audience groups and understanding what each type of user needed from the website.

Two personas represented the project's key audiences: a scientific user seeking technical credibility and capabilities, and a business-focused user looking for company value, partnerships and opportunities.

John scientific user persona
John — Scientific User
Emma business user persona
Emma — Business User

Mapping the User Experience

User journeys were developed for both personas to explore how they would move from discovering Microsol to evaluating its expertise and deciding whether to make contact.

Mapping these journeys helped reveal where clearer content, stronger navigation and better communication could support the experience.

John scientific user journey
Scientific User Journey
Emma business user journey
Business User Journey

Competitor Analysis

Competitor and SWOT analysis was used to understand how comparable scientific organisations communicate complex technology, services and credibility online.

This research helped identify opportunities for Microsol to create clearer navigation and stronger visual communication while maintaining a professional scientific identity.

Microsol competitor and SWOT analysis

Restructuring the Content

Card sorting was used to organise existing and proposed website content into logical groups.

The resulting structure informed the information architecture and helped determine how users could move through the redesigned website more efficiently.

Microsol website card sorting

From Structure to Wireframes

The research and content structure were translated into wireframes before visual styling was introduced.

This allowed the layout and hierarchy to be evaluated around user needs before moving into higher-fidelity interface design.

Microsol website wireframes
Personas
Journey Maps
Competitor Research
Card Sorting
Wireframes
03 — Test

User Testing

User testing was carried out with six participants, representing both scientific and business-focused audiences.

Participants completed realistic tasks such as finding services, scientific capabilities, partnership information and contact routes.

6 Participants
3 Scientific Users
3 Business Users
Microsol user testing results

Turning Findings into Design Decisions

Testing showed that users generally viewed the website as professional, but some participants found it difficult to quickly understand what Microsol offered or locate specific information.

These findings were used to guide the next design iteration rather than treating testing as the end of the process.

Finding

The company's purpose was not immediately clear to every user.

Design Response Strengthen the homepage value proposition.
Finding

Important content could require too many steps to locate.

Design Response Simplify navigation and information structure.
Finding

Technical information could feel dense when users were scanning the website.

Design Response Introduce stronger visual hierarchy and clearer content.
04 — Design & Iterate

From Research to Interface

The research findings and wireframes were developed into higher-fidelity interface designs in Figma.

The design was refined through multiple iterations, incorporating client feedback, content requirements, usability findings and practical development constraints.

Initial Microsol Figma design
Figma — Initial Design
Refined Microsol Figma design
Figma — Refined Design
Research
Wireframes
Figma V1
Client Feedback
Testing
Final Design
05 — Build & Deliver

From Figma to Squarespace

Following the design stage, the new website structure and interface were implemented within Microsol's existing Squarespace environment.

The final design aimed to maintain Microsol's scientific credibility while improving navigation, content hierarchy, readability and communication across the site.

Homepage

Before → After
Microsol homepage before and after redesign

Our Science

Before → After
Microsol Our Science page before and after redesign

Responsive Design

The final layouts were also reviewed at mobile sizes to maintain readability, hierarchy and navigation across different screen sizes.

Final responsive Microsol website designs
Outcome

What This Project Demonstrates

Microsol allowed me to work through a complete client-led UX/UI process rather than focusing only on the final visual design.

The project developed from user research and information architecture into wireframing, testing, iteration and final implementation within a real website platform.

Research

Personas, user journeys and competitor analysis.

UX Strategy

Card sorting, information architecture and wireframing.

Validation

User testing, client feedback and iterative design.

UI Design

Figma interface design and responsive layouts.

Development

Squarespace implementation and practical web constraints.

Client Work

Professional communication, feedback and final delivery.

Full Project Documentation

Explore the Complete UX Process

View the full case study for detailed personas, competitor research, user journeys, user flows, card sorting, testing results, design iterations and development documentation.

View Full UX Case Study ↗