Embedded Files
WEB DESIGN / UX DESIGN
Portfolio / Summer 2022
Chinese Traditional Color is a color swatches website.
It based on the book:
《Chinese Traditional Color——Color aesthetics in the Forbidden City》.
We give designers：
convenient and easy color swatches and systematic color stories.
Challenge:
Challenge:
Color swatches is a small function that takes up a little space of the whole page.
How to make it immersive and create a good user experience?
Solution:
Solution:
Create full screen-sized color- select page and stroy-show page to make the whole experience immersive.
Reduce the presence of the navigation bar.
My Role:
My Role:
UX designer designing this website from conception to realization.
Empathize ＆ Define
Empathize ＆ Define
User Research
User Research
“ I like the Chinese traditional colors. It seems that every color has its own story.
Sounds exciting! But where can I read it? ”
“ I want to use Chinese traditional colors in my work, but I can just find a few of them.
Isn't there a website to show more? ”
“ When I suction color from the screen, sometimes it's not what it shows before.
It made me annoyed. ”
User Persona
User Persona
User Painpoint
User Painpoint
IDEATE
IDEATE
Site Map
Site Map
Hi- fi Prototype
Hi- fi Prototype
Itreate
Itreate
“ It's beautiful. But I feel a little uncomfortable,
I don't know where. ”
“ Isn't there a color catalog help me quickly find suitable colors?
Or must I have to search myself? ”
What should we do to synthesize such a huge number of colors
to make the pages more united?
There are just two functions that constitute our website,
How might we add more functions in the future？
What should we do to make our users
stay a longer time on our website？
What if users want to view color swatches themselves?
How to make them more enjoyful？
Make Changes
Make Changes
①
①
Adjust our homepage structure to reserve space for other functions in the future.
②
②
Add a main color to unite the huge number of colors.
③
③
Add game and community functions to hold our users.
④
④
Create a matrix model between swatches and shades and color details.
Hi- fi Prototype
Hi- fi Prototype
Page updated
Google Sites
Report abuse