This website is a case study too!
Building my portfolio website was a personal and exciting challenge that allowed me to put my UX and UI design skills to the test.
Key Features
Design Process
To create a portfolio that stood out, I began by analyzing other designers' portfolios to understand what is essential, gather inspiration, and figure out what works. I used a user-centered design approach to ensure the portfolio was user-friendly, intuitive, and easy to navigate. My goal was to keep the design simple but engaging, while also communicating my personal brand effectively.
I started with paper sketches to brainstorm ideas, followed by digital sketches in Figma. The main challenge was to keep the design fun yet simple, ensuring ease of navigation. My focus was on creating a straightforward and intuitive structure.
Some of my early digital sketches and wireframes where I explored the website layout, design style, spacing, and what worked or didn’t.
For the visual design, I used purple as my signature color, pairing it with other fun and vibrant tones to create contrast. The color choice for each individual project was based on the dominant color of that project to keep things cohesive but personalized.
My typography choices were grounded in simplicity, but I incorporated occasional fun elements. I created my own custom buttons and UI elements.
After finalizing the design, I created interactive prototypes to visualize how the portfolio would work. I focused on interactions and worked on responsive design, adapting it for desktop, tablet, and mobile to ensure a seamless experience across devices.
UI Kit
Responsive design for my case study of food delivery app
I experimented with different versions of the app to ensure the responsive designs felt natural while maintaining a consistent style across all devices. I adjusted certain elements to enhance clarity and make the experience more intuitive.
Responsive design for my Homepage
I focused on making the homepage feel intuitive and clean on all screen sizes. I refined layouts, resized images, and restructured content to keep things easy to navigate—whether viewed on a phone or desktop.
Responsive design for my About Me page
I wanted my About Me page to feel like a peek into my world—light, visual, and a little playful. I included a small photo gallery to bring in personality and made sure the layout stayed fun and functional on every device. Whether viewed on a phone or laptop, the experience stays dynamic and engaging.
The Tools I Used
Figma
Framer
Challenges & Lessons
1 Mastering New Tools & Staying Focused:
Challenge:
Learning new design tools came with moments of confusion and frustration, which made the process feel overwhelming at times.
Lesson:
I discovered that I stay calm under pressure, take a breath, and plan my next steps to keep moving forward efficiently.
2 Managing Time & Mental Space
Challenge:
Balancing learning, designing, and deadlines made time management difficult and sometimes mentally draining.
Lesson:
I work best when my mind is clear, so I created a system of focused work sessions that helped me stay productive without burnout.
3 Designing with Accessibility in Mind
Challenge:
Incorporating accessibility pushed me to rethink color contrast, font choices, and interaction design more intentionally.
Lesson:
I now see accessibility as a creative and essential part of the design process—not an afterthought, but a mindset.
4 Building for Every Screen
Challenge:
Making my designs responsive across devices required multiple layout adjustments and a deep understanding of visual hierarchy.
Lesson:
I learned how to create flexible designs that feel natural and consistent across screen sizes, improving the overall user experience.
5 Simplifying with Purpose
Challenge:
At first, I struggled with wanting to add too many details, which sometimes led to visual clutter.
Lesson:
I realized that less is often more—intentional simplicity creates clarity, balance, and impact.
