public/subjects/user-experience/piscine-ui/building-an-interface

Styleguide

Context:

In this quest, you’ll have to build your own interface.

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.

The very last step will be to test it on users to detect the impressions they get when they discover your app.

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".

Deliverables

• A Figma moodboard that includes:

  • Pictures

  • 2 to 3 main colors

  • Examples of typography applied to graphic elements:

    • Title
    • Description or subtitle
    • Content
    • Button

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 but don’t overload your design with too much details!

Resources:

• Video tutorial on Figma
• Beginning graphic design
• Gareth graphic studio
• Example of a Style Guide in UI

Design system library

Instructions

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 but don’t overload your design with too much details!

Resources:

• FIGMA FILE (to duplicate)
• Introduction to design systems
• Create a design system - Figma course
• Building a design system library - Lyft
• Examples of UI Buttons library

Design screens

Instructions

Based on the wireframes and your design system library, take your mid-fidelity prototype to a high-fidelity level!

Select 5 screens that will show the user flow of a customer who:

• Arrives on the homepage.
• Browses the content.
• Checks one product page.
• Adds the product to the cart.
• Checks out.

Use your components, call to actions and visuals to complete the wireframes.

Deliverables

• 5 high-fidelity screens from 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 but don’t overload your design with too much details!

Resources:

• Unsplash for visuals

second Animation

Instructions

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 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

Quote:

"Speak human: Use the words your users use.’ Dan Saffer | Microinteractions.

• From low-fidelity to high-fidelity

Desirability testing

Instructions

Run a desirability test!

The point of this phase is to make sure the values and the spirit you chose for your design.

• 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.

Deliverables

• A desirability testing board with 25+ different adjectives.
• Pictures from the desirability test.
• A PDF document with the outcomes of the desirability test.
• If the outcomes are not consistent with the values, 3 suggestions on how to make the moodboard and design library evolve.

Don't forget to:

• 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”.
• Add a title within all written documents.

Tips:

• 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 but don’t overload your design with too much details!

Resources:

• Desirability Testing analyzing an emotional response to a design

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