1. Designing a User-Friendly Product Registration Page in Figma

Objective: The aim of this assignment is to design a highly intuitive and visually appealing product registration page for a bakery using Figma. This registration page should not only align with the brand’s aesthetic (feel free to be creative in creating a unique brand identity if you wish) but also offer a seamless user experience that encourages new users to register their products/baked goods.

Problem Statement: Users often face product registration processes that are cumbersome and poorly designed, leading to frustration and a potential loss of customers. A well-designed product registration page should simplify the process, encourage user completion, and ultimately drive up the registration numbers.

Task 1: Research and analyze existing product registration forms to identify common design patterns and user pain points. Pinterest is a great resource for collecting visual ideas or doing a simple Google search. Also, think about what information would be pertinent to ask of the user in registering their baked goods to the site.

Task 2: Create low-fidelity wireframes for the product registration page that organize the necessary fields into a logical, user-friendly layout. Focus on a user interface's basic structure and layout, using simple shapes, placeholders, and basic text. This can be done in Figma.

Here, you can view more information about low-fidelity mockups.

Task 3: From your selected wireframe develop a high-fidelity prototype in Figma of the product registration page incorporating the wireframe layout, company branding, and all UI elements.

Expected Outcomes:

Task 1: A list that outlines best practices in product registration design and a list of identified user pain points. You can add this to the final Figma Prototype.
Task 2: 1-3 wireframes that demonstrate the layout and flow of the registration process. These should be clear enough that someone unfamiliar with the project can understand the proposed user journey.
Task 3: A completed Figma prototype that visually communicates the final design, ready for feedback, testing, or development handoff. One section should be different from our class wireframe with a short description about what you changed and why.

Lesson 1: Assignments | UI/UX Principles and Prototyping