Phase 2: Test

Designing with Web

Group

Subject

Your subject is "".

Teammates

    Tutor

    Your tutor is .

    Your appointment is on .

    Part 3 Rules Reminder

    Click here to review rules

    Before the meetings:

    • Know the subject of your appointment.
      You must have read the course modules and prepared the questions you wish to discuss with the tutor.

    • Know how to locate the progress of your team.
      Take the time to formulate the difficulties encountered and the positive points. Don't wait several weeks before reporting problems.

    • Organize a meeting.
      Except in exceptional cases, find yourself in the same place. A suitable place (quiet) with a good internet connection, for the smooth running of your interview.

    During meetings:

    • Your presence is mandatory at all meetings.
      Any absence must be justified to your tutor before the meeting in the Slack channel of your group.

    • Your camera must be on.
      The tutor is there to accompany you synchronously, not to talk to an avatar.

    • Behave like a professional.
      Adopt an employee posture in a company in all circumstances: holding in front of the camera, appropriate language, listening skills, correct clothing.

    • Lead this project in good spirit.
      Your participation in the meetings is mandatory and is part of the course. You are not a cruise passenger. Remember to react to the comments made to your group but also to interact with the other groups present.
      When the tutor gives the speech, everyone must speak!

    • Take advantage of your appointments collectively.
      You must divide up the roles: designate as many "scribes" as necessary for each meeting. It is mandatory to write a group interview report and post it in the group channel at the end of the meeting.

    Outside of meetings:

    • Collaborate with the tools at your disposal:

      • Slack:
        The group communication must be done on Slack in your group channel.
        → If you discuss elsewhere, your tutor cannot accompany you, it is a waste of time, resources and especially advice.
        → Make reports and post them on Slack to get feedback from your tutor.
        → Individual maluses will weight your final score according to your participation.

        Any student who is not on Slack at the beginning of Part 3 will be graded 0 for Part 3.

        Any student who does not participate in the Slack channel of their group will be graded 0 for Part 3.

      • Zoom:
        You can use Zoom in group at any time to chat in video and share your screens: type /zoom in your Slack group channel, a button will appear in the channel to join a Zoom room.

        When launching a Zoom room for the first time, you will have to validate your account by clicking on the "Authorize Zoom" link, then connect with SSO ("Sign in with SSO").
        → In the field "Your company domain", enter "em-lyon".
        → Finally, authenticate on the emlyon portal.

    • Be there for others.
      Reactivity towards your tutor and your collaborators on Slack is essential. Put yourself in the shoes of a professional who leads a project as a team.

    • Document
      You must constantly document what you are doing. Keep as much record as possible of the exchanges and work done so that you can analyze what worked in the project and what didn't.

    From the definitions of your projects and mockups you've done, your tutor will choose the project you're going to develop and document.

    Once this choice done, you will move on to the next step of this project: evolve your wireframes into mockups through user testing.

    The wireframes you've done during Phase 1 are equivalent to the skeleton or simple structure of your website/app used to describe the functionality of a product as well as relations between views (what will happen when you click a certain button). Wireframing helps you take the decisions on what (content/features) and where to put on the website or app. But wireframes do not cover the product’s design.

    During this second phase, you're going to learn about User Interface (UI) and User eXperience (UX) and turn the wireframes you've done during Phase 1 into mockups. Then, you're going to test these mockups on real users that fit your target.

    What is a mockup?

    Mockups are demonstrators of your concepts that will allow you to easily get end-users feedback. They provide a medium-fidelity representation of your projetcts.

    Based on the definitions and wireframes you've done in Phase 1, you'll have to create mockups for the interfaces of the project choosen by your tutor.

    For this you will continue with Figma and start integrating colours, fonts, text (Lorem ipsum), images, logos and anything else that will shape your wireframe. Your result should be a static map of the app.

    Start by duplicating your wireframes on Figma to keep them and work on separate documents for your mockups (share them with your team):

    You'll need to proceed iteratively:

    1. Mockup a feature: Start your mockups with only the main feature of your concept.
    2. Have it tested by potential users (See How to conduct a test below 👇).
    3. Observe and record feedback.
    4. Improve mockups from feedbacks.
    5. If the tests are validated: return to step 1.
      Otherwise: return to step 2.

    Focus on UX as fluid as possible by creating slick UI based on resources provided:
    The less screens users need to access a feature, the better.

    Figma provides UI kits, templates, plugins and tutorials, to start your own designs from existing contents!

    How to conduct a test?

    The funnel approach in interview means asking broad, general questions first, then leading in to more specific, tougher questions.

    Funnel consists of four basic steps:

    1. Introduction
      Introduce yourself, briefly explain the purpose of the test and allow the participant(s) to comment or ask questions.
    2. General information related to the topic
      Query the tester with general questions. Talk about his habits.
    3. Behavior related to particular issues
      Ask him to express himself on your application, product or service. Feel free to use the prototype for this part.
    4. Constructive suggestions for improvement
      Ask him how you could improve your prototype

    To collect feedback, we're going to use Notion, a tool that allows you to write collaboratively and share easily your documents. You can watch the video below to help you get started with Notion.

    Create a free account on Notion with your emlyon email address by clicking here, then activate your education pro account (see the video just below 👇).

    To prepare the user test of your application, you'll have to:

    1. Create your own User Tests by duplicating this template. You have to login to Notion with your account, then click on "menu"" and choose "save as template" like in the video just below.
      Only one member of your group needs to duplicate it.
    2. Share your Notion document with the other group members:
    3. Redact your qualitative interview guide for your concept.
    4. Recruit 2 users for each test session and make sure they match your target user profile as closely as possible.
    5. Lead 2 tests sessions with 2 users for each session. During the test fill your template: the qualitative interview and the user scenarios.
    6. After each user test, collect and write down users' feedbacks.
    7. Don't forget to improve your prototype thanks to the valuable feedback received.

    Because of the current situation, it will be more difficult to achieve your goals, so we ask you to find profiles that match as closely as possible the initial targets in your family, friends, roommates or others.
    You can use Zoom or other video conferencing tools to conduct your tests.

    How to share your prototype ?

    You can share your prototype easily in Figma by sharing the prototype's URL to your users as shown in the video below.

    Resources and going further

    Here are a few great examples from what other students made. Get inspired!
    (These pieces of work were made using AdobeXD, another software that we used in the previous sessions of this course).

    You may also consider using Figma Community to help you kickstart your mockups with some ready-made UI Kits built by the community.

    You will be able to find a looooooooooooooot of ready-to-use resources and inspirational works on Behance or Dribbble.

    An easy-to-use UI does not mean a poor UI: you can use UI kits "Unsplash" plugin for high quality free photos and The Noun Project or the "Material design icons" plugin to find icons for everything, or even download fonts from Google Fonts to include in your mockups, use the plugin "Color-palettes". You can see how to install Figma's plugins right here.

    Evaluation criteria

    Mockup: 10 points

    • Relevance to the concept
    • UI - visual hierarchy
    • UI - graphic design
    • UX - structure & navigation
    • UX - ease of use
    • Use of resources

    Tests: 8 points

    • Testability of the mockup
    • Leading a user test
    • Quality of the iteration

    Communication: 2 points

    • Spelling and writing
    • Communication with the tutor
    • Preparation of the meeting

    Submissions

    Submit the links to your mockups at least 24 hours before your next meeting, which is on .

    These submissions are shared: your teammates and your tutor will also see what you submit, and you can find them in your Progress Overview.

    Sharing a Figma project

    When sharing your Figma projects, make sure they are viewable for anynone with the link. Then, simply paste that link in the submission box down below. 👇

    Sharing a Notion page

    To share your Notion files, click on Share in the upper-right corner, and toggle on "Share to web". Then, simply click on "Copy link" and paste it in the submission box down below. 👇

    Notion file share window

    Mockup

    Before submitting, make sure you check all of the criteria below.

    User tests

    Before submitting, make sure you check all of the criteria below.

    The due date has expired. You can no longer submit your work.