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.
Ideation
For this project, students were assigned to prototype a website for an imaginary business. My idea was inspired by sites like motionloops.com or storyblocks.com 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.
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.
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.
Testing
My completed prototype was then shared with my testing team via the online testing tool Maze.co. 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.