Open Science Repository
TIME
Spring 2022
CLIENT
University of Copenhagen
TEAM
3 Scientists, 1 Data Manager,
1 Programmer, 1 Designer (me)
WHAT I DID
Re-design, UI/UX/IA
Design System
Clickable Prototype
Deliverables
Design system / Ui kit
150+ components
80+ screens
Bringing Clarity to a Complex Scientific Platform
Squidr is a platform for discovering and working with scientific studies.
The product contained complex workflows and a lot of information, but one of the biggest UX challenges was making the system understandable from a user’s perspective.
My role was to create a coherent UI/UX across the platform, develop a design system and improve key user flows.
The Challenge
The underlying system was complex, with different functions and workflows connected in ways that were not always obvious.
For a new user, it was not necessarily clear:
- Where to go
- What to do next
- How different parts of the system were connected
- What the system expected from them
The challenge was therefore not simply to design individual screens, but to create an interface that could make a complex system easier to navigate.
Creating Structure
I started by establishing a design system that could bring consistency across the product.
Components, typography, spacing, colours and interaction patterns were defined and reused across the different screens.
This created a common visual language and made it possible to design the product as one coherent experience rather than a collection of individual interfaces.
Guiding Users Through the Workflow
One of the areas where the complexity became particularly visible was the upload process.
Instead of requiring users to understand where the upload belonged within the overall system, I introduced a dedicated upload flow.
The upload became a separate step-by-step experience, guiding the user through the task and making the next action clear.
The goal was simple: users shouldn’t have to understand the system in order to use it.
By moving some of the system logic into the interface, the user could focus on completing the task rather than figuring out where they needed to go next.
Designing Across the Product
With the design system and core interaction patterns established, I designed the remaining screens and states across the platform.
The focus was on creating:
- A consistent design language
- Clear visual hierarchy
- Reusable components
- More predictable interactions
- Guided workflows for complex tasks
- A clearer relationship between different parts of the product
For Squidr, the challenge was therefore not simply designing an interface for a complex system, but finding ways for the interface to absorb some of that complexity, so users don’t have to.
The Outcome
The project resulted in a complete UI foundation for Squidr, including a design system and redesigned screens across the platform.
More importantly, it demonstrated how UX can help absorb complexity.
A complex system doesn’t necessarily need to become simpler. The experience needs to make the complexity understandable.
For Squidr, this meant shifting some of the responsibility from the user to the interface — using structure, consistency and guided flows to make the next step clearer.
Here's a link to the prototype in Figma:
Task flow
Uploading a dataset is a complex task because of a great variation in the design of scientific studies. As this is one of the main user flows, we wanted it to be easy and user friendly. Through iterations we landed this flow.
The structure
We designed an information architecture/ IA to better understand the structure and the relationship and connections between the pages. Eg. this revealed redundancies and pages that could be merged together.
Design principles
The focus is user-centric with the goal to be easy to use. We build a hierarchy by the use of spacing, typography, and product colours, to keep it easy to navigate the interface and be informed about where you are.
Open Up
Your Research
The users
We mapped some user profiles to be further investigated when the system is ready for testing.
Task flow
The hi-fi wireframes show the screens the user goes through to upload a dataset.
