HEIRLOOM WEBSITE PROTOTYPE
GOAL | DESIGN A HIGH-FIDELITY PROTOTYPE USING FIGMA
YEAR
2021
DISCIPLINES
UI & Graphic Designer
PROJECT TYPE
Academic: BCIT | MDIA 2540
UI UX Strategy 1
APPS
Adobe Creative Cloud
ROLE
UI & Graphic Designer
CONTRIBUTION
Layout & Branding
01. DESCRIPTION
The small business chosen for the project is Heirloom, a local store that sells handmade, elegant, modern, one of a kind, Canadian Arts and Crafts.
The products are carefully curated, with special consideration to functionality, uniqueness, and quality. The nature inspired pieces include pottery, wood, jewelry, paintings, textiles, glass, leather.
02. BRAINSTORMING
User Persona
I created a detailed infographic of a type of user persona for the website, with 6-8 key infographic areas, a pretend photo of what the persona could look like, a short write-up of their likes/dislikes/pain-points and behaviour preferences, and static infographics that showcase the type of user who would be using the site.
Featured Business Goals:
- Promote Canadian Artists:
Foster Canadian art, mostly local. - Protect the environment:
Encourage the use of quality, long-lasting products that can be used generation after generation.
03. VISUAL IDENTITY
My intent was to present the site as a gratifying experience, a website where users can appreciate artisans’ work and enjoy the experience.
One of the challenges was that hand-made products are mostly appreciated in person, by touching, smelling (leather, wood, etc), weighing, etc, so the images had to be large and very good-quality, and offer several visual options so the user can appreciate them through the screen.
The website had to look elegant, minimalist, sober, to let the products be the protagonists.
The use of earthy neutral colours and backgrounds created a calm atmosphere, allowing the user to take the time to appreciate the different pieces and their uniqueness.
The idea was to convey tranquility, no rush, to allow time to enjoy the art in each piece.
Heirloom Style Guide
04. PROTOTYPE
With all the decisions taken during the process, I created a wireframe of the homepage, to start working with the navigation and elements needed for the site.
Finally, I designed the high fidelity Figma prototype for the Heirloom website.
Homepage Wireframe Created with Balsamiq
Heirloom Figma Prototype Components
Check this other project!
UI DESIGN
WINSTON & VARGAS
iPAD APPLICATION FOR AN ARCHITECTURE STUDIO
GOAL | Design a high-fidelity prototype for an iPad App, using Adobe XD