Slide 1: Introduction
Today we’re excited to present our project: EcoLifestyle — a user-centred e-commerce
website that promotes sustainable and eco-friendly living.
The aim was to design an interface that’s clean, intuitive, and accessible, while incorporating
key principles of user experience design. We built the website using HTML, CSS, and
JavaScript, and structured every decision around real user needs, best practices, and UXD
theory.”
Slide 2: Target Users – Personas
“To begin our design process, we developed two realistic personas to represent our target
audience.
The first is Emily, a 25-year-old university student who’s passionate about sustainable
skincare. She’s budget-conscious and prefers brands that align with her zero-waste values.
The second is James, a 38-year-old father who shops for home essentials on his phone. He
values fast, simple navigation and wants clear product information.
These personas helped us focus on different types of users and informed everything from
layout and navigation to content prioritisation and accessibility.”
Slide 3: User Journey & Experience
“We then mapped out the user journey into five stages:
1. Arrival and orientation
2. Product discovery
3. Product evaluation
4. Checkout (planned for future versions)
5. Post-purchase engagement
From the moment a user enters the site, the goal was to create a smooth and emotionally
positive experience. We focused on reducing cognitive load, making choices clear, and
supporting both goal-driven and casual users.”
Slide 4: Homepage Interface and Navigation
This is a screenshot of the homepage interface on desktop.
You can see we used a fixed top navigation bar, clear logo placement, and a highly visible
search bar to orient users immediately. Products are displayed using card-based layouts in a
responsive grid.
This structure supports quick scanning and browsing, and reinforces a sense of order and ease
— which is especially important for first-time users.”
Slide 5: Mobile Experience and Responsiveness
“Here’s how the site looks on a mobile device.
We used a mobile-first approach to ensure the layout adapts to smaller screens. The sidebar
filters collapse, the grid stacks vertically, and touch targets are easily clickable.
This kind of responsiveness is crucial for users like James, who shop entirely from their
phones. It ensures accessibility and usability regardless of the device.”
Slide 6: Product Search and Filtering
“One of the main usability features we implemented was dynamic product search and
category filtering.
As users type in the search bar, products update in real time. They can also filter items by
category or rating without reloading the page.
This reduces friction and enhances user control, allowing for a much more responsive and
personalised browsing experience.”
Slide 7: Key Features and Layout
“Our interface was built to be consistent, clean, and visually aligned with the eco-friendly
brand.
We used a soft green and beige colour scheme, rounded elements, and a clean sans-serif font
for readability.
Product cards show all key information at a glance — name, price, rating, and image —
supporting efficient comparison and evaluation.
Navigation remains accessible at all times, and we structured content in a way that supports
both scanning and deep browsing.”
Slide 8: Accessibility First
“We made accessibility a core part of the design process.
All images have alt text, interactive elements use ARIA labels, and the colour contrast meets
WCAG 2.1 guidelines. The site is fully keyboard-navigable, and we tested it across different
devices and screen readers.
This ensures our platform is inclusive — not just for the average user, but for users with
diverse needs and abilities.”
Slide 9: UXD Principles Applied
“Our design process was grounded in key UXD theories.
We followed Garrett’s Five Planes of UX Design, from defining strategy and user needs
through to interface and visual design.
Don Norman’s principles helped us design intuitive interactions — focusing on feedback,
affordances, and usability.
And Jakob Nielsen’s heuristics guided decisions around visibility, consistency, error
prevention, and user control.
By applying these frameworks, we ensured our choices were not just practical but grounded
in evidence-based design thinking.”
Slide 10: Reflection & Future Improvements
“Looking back, this project taught us how to bring UXD theory into practice through real
development and user-focused design.
We’re proud of the way EcoLifestyle balances usability, responsiveness, and brand
consistency.
In future iterations, we’d like to expand the functionality — including a login system, product
reviews, and a full checkout process.
Thank you for listening. We’re happy to answer any questions.”
