Short looping studio video of Lian Li coding.
To present web design and photography as one practice.
I led the project end-to-end: defining the structure, designing the interface, building the front-end, and validating the experience with usability testing.
This self-initiated case study looks at the redesign of my own portfolio website. The challenge was to present two related areas of work — web design and photography — without making the site feel split or unclear.
The redesign gives web design a clearer lead role, while keeping photography as part of the overall practice rather than a separate experience.
Adobe Portfolio is built for photography, which made it difficult to present my web design work in a clear and intentional way. To show website projects properly, I had to create a separate site, and the templates limited how the work could be structured and experienced.
The result felt fragmented and harder to understand than it should be.
I designed and built a custom static site so I could control layout, navigation, and pacing properly. I organised the work around case studies rather than loose pages, which makes the site easier to scan and easier to grow over time.
The previous site was built on Adobe Portfolio when photography was still my main focus. As my work shifted towards UI/UX and web design, the platform’s template structure made it harder to show both areas of work in a way that felt clear and intentional.
As the amount of work grew, it also became harder to shape proper case studies. Navigation, pacing, and emphasis were limited by the platform, so the site often needed extra explanation instead of letting visitors understand it for themselves.
The strongest decision in this project was separating two disciplines while keeping the experience cohesive.
Outcome: primary web-design route, separate photography section, simplified mobile navigation.
This sitemap shows how the site is organised so visitors can find things fast.
A single style board to keep type, colour, and components consistent.
Screens that prove hierarchy: primary path, secondary exploration, optional depth.
Let’s work together
I design and refine websites so people can understand what you do.
Designed + built by me • validated with 5 users
How I planned, built, and checked the site.
I began with hand-drawn wireframes to work through layout and navigation, then moved into Figma for the moodboard, low-fidelity wireframes, and site map. From there, I built the site in code and refined it as the structure became clearer.
I also use Copilot to help spot errors and speed up troubleshooting while I work. The design decisions and final edits are still mine, and I check the site myself across different screen sizes before publishing.
Tools: Figma, HTML/CSS, Tailwind, JavaScript, GitHub Pages.
In short: wireframes → Figma → build in code → refine → test.
Accessibility
Early signals from usability testing and direct feedback (no analytics baseline yet).
Most people understood what I do within the first few seconds.
People were able to find web design work and contact details without needing help.
Simpler labels and clearer cues reduced hesitation on mobile.
Summary: The new structure makes the offer easier to understand and removes the need for explanation.
I tested the site with 5 people (ages 35–60) to see how easily they could understand and move through it, especially on mobile.
Sample: 5 participants, ages 35–60.
Result
Testers described the site as easy to use and were able to move through it without guidance.
These constraints shaped the decisions and explain why the structure works the way it does.
About the author
Lian Li is a UX/UI designer and garden photographer working under the name L by Lian. She designs mobile-first websites with clear structure, thoughtful visual hierarchy, and strong image direction.
