Competition overview

I began by researching competitor websites, focusing on their user-facing content, how they structured it, their key messaging, and their sitemap or Information Architecture.

Creative direction

I performed visual research online to find a look and feel that aligned with the brand's personality. The website examples I gathered served as direct inspiration for the UI design.

Personas & User Stories

I developed two primary personas: Anna, a B2C consumer seeking an easy way to buy personal beauty products, and Beata, a B2B salon owner needing a complex system for professional supplies, including features like bulk ordering and specific pricing.It quickly became clear that Beata's extensive B2B requirements pointed towards an entirely separate product, distinct from a consumer-focused platform. Therefore, to ensure a focused and effective design, I made the strategic decision to scope this project specifically around Anna's B2C user journey. Addressing Beata's unique operational needs would best be achieved through a dedicated B2B solution.

Site map

Based on information I gathered from the competition, I created a sitemap for the new website and mapped out the main user flow based on Anna's persona.

Content plan

I created a content plan on simple mockups to organize the information architecture and ensure that the website is easy to navigate and user-friendly.

Home page

Recognizing the homepage as the primary entry point and key to the initial user experience, I focused on its design first. My goal was a simple, modern aesthetic with an earthy feel, achieved using ample whitespace and a natural color palette. These choices aimed to align with the brand's personality and create a welcoming visual hierarchy for users.The design process for the homepage was highly iterative, involving trial-and-error and several revisions. This iterative cycle, where each 'mistake' becomes a learning opportunity, is fundamental to the UX/UI process and ultimately strengthens the final design and user experience.

Styles, colors, fonts and variables

Once I finalized the homepage look and feel, I set visual styles—like colors, typography, and key variables in figma. This established a strong foundation, ensuring design consistency and making the website easier to scale and update.

Other pages

I used the same style guide for other pages. I wanted to make sure that the website is consistent and easy to maintain.I created other pages like Product Listing page, Product page, User Login page, Checkout and basket and a 404 page.

Mobile version

Once the desktop version was complete, I began designing the mobile version. The key objective was to ensure the website was responsive and provided an intuitive user experience on smaller devices.To achieve this, I adapted the layout for a more compact view and adjusted typography styles to enhance readability on mobile screens.

Styles

I formalized design tokens on separate Figma pages for easy developer navigation. I documented key elements like color styles, typography, spacing guidelines, and asset aspect-ratio specifications.

Figma components

Based on Atomic Design concept I created a Figma component page with a comprehensive variants specification. This page includes all the components used in the project, providing a reference for developers to implement the design consistently.

Design process

A critical learning from this course was applying a complete design process. I gained practical experience with each stage, from initial research and user definition (personas, sitemaps) to UI design, creating style guides, responsive prototyping, and developer handoff. This structured approach was key to developing an effective digital product.

Building and Utilizing Design Systems

This course provided significant learning in building and using design systems. I learned to define styles (colors, typography, spacing) and create reusable UI components with variants, understanding how design systems ensure product consistency, scalability, and efficiency.

Streamlining Developer Handoff and Collaboration

A key learning was streamlining developer handoff. I learned best practices for preparing Figma files, using Dev Mode, creating design specs, and preparing assets, understanding how this ensures design fidelity when collaborating with developers.

• Choose a different topic: I now (1,5 years later) truly understand how complex e-commerce design is, especially when you're just starting in UX/UI. Looking back at this course project, I'd advise my past self to begin with a simpler type of website to first build foundational skills. E-commerce sites have many detailed parts, like complex many detailed parts, like complex user flows (for checkout and cart management) and a big need for clear calls to action. As a beginner, handling this wide scope while also learning core UI/UX principles was a challenge. A project with a narrower focus, like a portfolio or a basic informational site, would have allowed me to better master fundamentals such as layout and component design before tackling the many specific demands of e-commerce.
• Lack of User Research: I focused more on the design process and less on the user research. I should have done more research to understand the user's needs and preferences.
• Main Call-to-action: The primary conversion goal was for users to purchase the product. However, I didn't sufficiently emphasize this in the UI. A clear call to action was missing.
• Animations: I tried to use animations to enhance the user experience, but I initially overused them, which made the interface distracting. I learned that animations should be applied sparingly to guide, not overwhelm, the user. Additionally, the animations needed to be much "snappier"—quicker and more responsive—to contribute to the feeling of a well-optimized and polished experience.