(04)
(04)
(04)
Lead Product Designer
Lead Product Designer
Lead Product Designer
8 Weeks
8 Weeks
8 Weeks
UX Research
UX Research
UX Research
B2B
B2B
B2B
Branding
Branding
Branding
Having pivoted from my previous role as an animation director, I needed to create an entirely new website for myself. I wanted to take everything I'd learned during my process of learning UI / UX and make a website based on these design principles that was not only functional, but also a joyful experience.
Having pivoted from my previous role as an animation director, I needed to create an entirely new website for myself. I wanted to take everything I'd learned during my process of learning UI / UX and make a website based on these design principles that was not only functional, but also a joyful experience.
(Context)
(Context)
Originally an animation director, I need a website that showcases my unique skillset and encapsulates my journey as a designer and the standards I hold for my own work—balancing creativity with functionality to inspire and engage visitors.
Originally an animation director, I need a website that showcases my unique skillset and encapsulates my journey as a designer and the standards I hold for my own work—balancing creativity with functionality to inspire and engage visitors.
(The Goal)
(The Goal)
To create a website that showcases not only provides a place for my UX case studies, but reflects my understanding of the importance of storytelling and visual dynamics to UI / UX.
To create a website that showcases not only provides a place for my UX case studies, but reflects my understanding of the importance of storytelling and visual dynamics to UI / UX.
1
1
Research
Research
Market and competitor analysis
I examined the websites of 50 UI / UX designers and discovered they roughly fell into two types, either focusing on finished project UI and omitting UX process, or focused on fully showcasing project research.
I determined that it was imperative to showcase my skills as both a researcher and an interface designer.
From there, I decided on which web-builder service to use, settling on Framer for its interactivity focus and similarity to Figma.
I examined the websites of 50 UI / UX designers and discovered they roughly fell into two types, either focusing on finished project UI and omitting UX process, or focused on fully showcasing project research.
I determined that it was imperative to showcase my skills as both a researcher and an interface designer.
From there, I decided on which web-builder service to use, settling on Framer for its interactivity focus and similarity to Figma.
Competitor research
Competitor research
34 portfolios were beautifully interactive, favoured image-heavy designs and omitted UX research.
16 portfolios favoured text-heavy websites that showcased UX process and were utilitarian and functional.
My website sweet spot
34 portfolios were beautifully interactive, favoured image-heavy designs and omitted UX research.
16 portfolios favoured text-heavy websites that showcased UX process and were utilitarian and functional.
My website sweet spot
34 portfolios were beautifully interactive, favoured image-heavy designs and omitted UX research.
16 portfolios favoured text-heavy websites that showcased UX process and were utilitarian and functional.
My website sweet spot
Web-builder pros and cons
Web-builder pros and cons
(Squarespace)
Pros
No need to learn a new programme
No need to migrate domain over from my existing site
Cons
Limited customisability
The least coveted skill in terms of future employability
(Webflow)
Pros
Considered industry standard so highly coveted for future employability
Fully customisable
Supports code
Cons
Slow to learn
Slow to implement
(Framer)
Pros
Regular updates with new features
Rapidly expanding market share
Similar interface to Figma
Specialises in animation
No need for code
Cons
Not yet industry standard
2
2
2
Functionality
Functionality
Narrowing down the website features
There are several functionalities that are standard for portfolio sites. There are also some features that seemed uniquely suited to my portfolio.
In addition to responsiveness to different screen sizes that is standard for UX design, emphasising interactivity would highlight my skills as a former animation director. So I prioritised these moments to make the site more engaging.
A designated "about" page would be great for my personal brand, but wouldn't necessarily make it into MVP.
There are several functionalities that are standard for portfolio sites. There are also some features that seemed uniquely suited to my portfolio.
In addition to responsiveness to different screen sizes that is standard for UX design, emphasising interactivity would highlight my skills as a former animation director. So I prioritised these moments to make the site more engaging.
A designated "about" page would be great for my personal brand, but wouldn't necessarily make it into MVP.
The MoSCoW prioritisation, evaluating each potential feature of the website.
The MoSCoW prioritisation, evaluating each potential feature of the website.
The MoSCoW prioritisation, evaluating each potential feature of the website.
(Must Have)
(Must Have)
Portfolio pages to showcase my case studies
A "contact" page with links
Aesthetic appeal of a UI portfolio site
Responsiveness to different screen types and size.
(Should Have)
(Should Have)
Interactivity, reflecting my web design skills and animation background
Micro-animations, reflecting my animation background
Interactivity, reflecting my web design skills and animation background
Micro-animations, reflecting my animation background
(Could Have)
(Could Have)
An "about" page to help showcase personal brand
Focusing on interactive moments and micro-animations to bring the website to life.
Focusing on interactive moments and micro-animations to bring the website to life.
Focusing on interactive moments and micro-animations to bring the website to life.
3
3
3
Design
Design
Typography and colour palettes
I chose an elegant and minimalist palette, where greys and white are used to delineate between elements and colour is used to draw attention to the most important information on the page.
For the typography, I wanted something minimal and modern, contrasted with accents of an elaborate Serif font for titles.
I chose an elegant and minimalist palette, where greys and white are used to delineate between elements and colour is used to draw attention to the most important information on the page.
For the typography, I wanted something minimal and modern, contrasted with accents of an elaborate Serif font for titles.
Getting to grips with the typography and colour palettes.
Getting to grips with the typography and colour palettes.
Getting to grips with the typography and colour palettes.
Aa
Aa
PP Editorial New
PP Editorial New
Regular,
Regular,
Bold,
Bold,
Italic
Italic
Aa
Aa
Neue Montreal
Neue Montreal
Regular,
Regular,
Bold,
Bold,
Italic
Italic
Aa
Aa
Inter
Inter
Regular,
Regular,
Bold,
Bold,
Italic
Italic
Primary
#22BA91
Secondary
#25B5CF
Accent 01
#ED5571
Accent 02
#E85DE1
Grey 01
#E3E7E8
Grey 02
#C2CFD1
Grey 03
#4F4F4F
Black
#000000
4
4
4
Learning Outcomes
Learning Outcomes
The implementation of this design solution provided valuable insights into the intricacies of designing a personal portfolio that reflects both my professional identity and creative evolution. The experience emphasised the importance of integrating my background in animation with UX/UI principles to create a site that is not only visually engaging but also functional and user-friendly. Through this process, I learned how to effectively combine storytelling, visual appeal, and usability to craft a cohesive digital narrative that accurately represents my unique skill set and professional journey.
The implementation of this design solution provided valuable insights into the intricacies of designing a personal portfolio that reflects both my professional identity and creative evolution. The experience emphasised the importance of integrating my background in animation with UX/UI principles to create a site that is not only visually engaging but also functional and user-friendly. Through this process, I learned how to effectively combine storytelling, visual appeal, and usability to craft a cohesive digital narrative that accurately represents my unique skill set and professional journey.