Domepiece Media

Technologies Used:

  • Figma
  • Maze
  • Adobe CC
  • Blender3D

Skills Shown:

  • UI/UX Design
  • Website Design
  • Prototyping
  • Product Mockups

Project Overview

This is a prototype website for a fictional online store, created in Figma for my 'UI/UX Strategy' course. The goal of this artifact is to demonstrate an understanding of core UI principles, and competent use of this popular prototyping tool.

My user flow chart


For this project, students were assigned to prototype a website for an imaginary business. My idea was inspired by sites like or that sell stock footage and motion loops for performers and creators. As per the assignment, user personas, user stories and a flow chart were created to demonstrate the student's understanding of information architecture.

My lo-fi wireframes

User Research

I generated lo-fi wireframes in Figma for each of the pages that would be required to complete my user flows. Using Figma's prototyping tools, I built out the functionality needed to navigate the site. The user flows I created for testing included adding various items to the shopping cart and completing a transaction.

My landing page

Design & Prototype

I went with a design aesthetic I felt was reminiscent of old sci-fi comic books. I used Adobe Illustrator to quickly design a logo. Heavyweight display font 'FatFrank' was used for logotype and headings. Blender 3D & Photoshop were used to generate product mock-ups. Some UI kits were used navigation and social icons, as well as my check-out and payment screens. Other UI elements were generated in Figma.

Heatmaps from my user testing


My completed prototype was then shared with my testing team via the online testing tool Test results revealed a smooth and intuitive experience for most users - heat maps showed that my testers found the primary path with very few extra clicks. A couple of minor hang-ups were addressed during revisions, including giving more descriptive names to some of my links.