SEED Studio
SEED Studio Wireframing
UX document to wireframe to high-fi prototype for a small design agency in Amsterdam.
Wireframing
UX Design
UI Design
Figma
Prototyping
At a Glance
A client communicated their wishes for a new website to SEED Studio, which was then turned into a detailed UX document, which I then turned into a clickable wireframe in Figma, and finally a high-fidelity prototype of their new website.
Situation
My first UX internship was with a small design agency in Amsterdam. Moon Gallery was one of their clients during my time. Their request was an original website.
Action
First combing through UX document and taking note of unknowns and design opportunities. Sketching, wireframing, and iterating with the design team.
Problem
How might a design undergraduate student co-create a comic about an ion trap experiment that is engaging, accessible, and educational?
Result
A clickable, high-fidelity Figma prototype of the website to present to the client.
Design process
Process
Document, sketching, prototyping.
01 Understanding the project
Going through the UX document together with the design team, and stakeholders to define the next stage.
02 Wireframing
Taking the refined document into Figma to make the flow clickable, and refine the layout further.
03 UI Design
Satisfied with the layout and flow, now it was time to work with the visual style. Working with Moon Gallery's visual identity and images, we designed a high-fidelity prototype that worked for the client.
Output
Check out the clickable wireframe and higher-fidelity prototype here:
[Prototypes may take longer to load.]