Ecoshop (2025)
TAFE Assignment
Branding and Web Design
Deliverables: Visual Identity including a custom logo. A responsive website with separate prototypes for desktop and mobile. Key pages include homepage, product listing, About Us, FAQs, Shopping Cart, and a Contact Form/page.
Tools: Figma, Adobe Illustrator
This project was completed as part of my coursework at TAFE. The brief involved creating a conceptual brand and e-commerce website for a fictional business called Ecoshop: a sustainable small business based in High St, Northcote.
User research played a key role in shaping the design. Findings highlighted the importance of clear sustainability messaging, mobile-first usability, and intuitive navigation. The users preferred minimalist aesthetics and were frustrated by disruptive pop-ups and confusing pathways: insights I addressed directly in the user experience.
Brainstorming, sketching, and playing around with ideas
With no existing brand identity, I developed a full visual system from scratch, including a custom logo and brand style guide. Accessibility was central to my design process. I made sure:
All colours meet WCAG 2.1 contrast standards (minimum 4.5:1)
Body text is set at a legible 14px minimum
Clean, sans-serif typeface (Lato) was used for readability
Best practices followed: no justified text, short paragraphs, and clear link styling
Visual inspiration was drawn from nature, with a palette reflecting sky, sun, and water. Icons were adapted from Google’s Material Symbols, and graphics were created in Adobe Illustrator and Figma.
See below for the style guide.
The website was prototyped in Figma for both desktop and mobile, with key pages including the homepage, product listings, About, FAQs, shopping cart, and contact form.
Sitemap
Desktop Wireframes
Mobile Wireframes
User feedback on the prototype was overwhelmingly positive—describing the site as “friendly, approachable, and easy to navigate.” Looking ahead, I plan to further refine accessibility features, such as improving mobile navigation by allowing overlays to close when tapping outside the menu ( I had the desktop set up as a component set).
