After designing your own style guide with a moodboard, colors and typography, you can use the series of consistency principles, atomic design structure, the techniques to build you own library and then a series of screens. Step by step, you’ll have built an animated high-fidelity prototype.
Once again, feel free to get as much inspiration as you need from existing design systems. Dribble, consistency and structure are your best friends!
### Instructions
Your agency works on a digital product to create an e-commerce app for second-hand electronic devices. You collaborate with a UX designer from your team. They have designed the wireframes and pass it on to you!
Design a style guide (= a moodboard with typography + examples of typography with buttons, title, description and content).
Also think about the values and spirit you want to spread through this moodboard, we’ll get back to it in exercise "Desirability Testing".
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within the file.
**Tips:**
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
Based on the moodboard you designed in the previous exercise "Styleguide", create a design system with at least 30 elements, including atoms, molecules and organisms, and include multistates.
### Deliverables
- A Figma file with a library including:
- At least graphic design 30 elements.
- At least 5 atoms.
- At least 5 molecules.
- At least 5 organisms.
- At least 10 multistate variations.
Don't forget to:
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within the file.
**Tips:**
- Start by asking yourself what key elements may appear in an e-commerce app.
- Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
Animate your 5 screens on Figma. Think about multistate!!
**Deliverable:**
- An animated high-fidelity prototype on Figma.
Don't forget to:
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within the file.
**Tips:**
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
**Resources:**
- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372)
**Quote:**
"Speak human: Use the words your users use.’ Dan Saffer | Microinteractions.
- Get back to the values and spirit you chose in the "Styleguide" exercise and extract 2 to 5 adjectives.
- Prepare a board with 25+ adjectives, randomly distributed.
- Show your design to 5 different people, and ask them to select the adjectives among the list from the board that they are inspired with.
- If the selected adjectives chosen by the users are consistent with the ones you had chosen, congratulations!
- If the selected adjectives chosen by the users are not consistent, that’s fine! Make 3 suggestions about how to make your moodboard and library evolve.
- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
- Avoid confirmation biais: don’t tell them the values and ask them to approve them!
- Good to know: Desirability testing is great to assess the impressions a design gives to the users. Whereas Usability testing is great to understand what users understand your prototype and how they navigate across the product.
- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- [Desirability Testing analyzing an emotional response to a design](https://www.slideshare.net/megangrocki/desirability-testing-analyzing-emotional-response-to-a-design-11262575)
**Quote:**
- "Interaction design focuses on the design of behavior of a person’s interaction with a digital interface. It is also concerned with satisfying the needs and desires of the people who will interact with a product or service.’ Alan Cooper, About Face: The Essentials of Interaction Design
