Phase 1: Prototype

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.


    Definitions

    Based on your individual explorations (from the module you picked in Part 2) about the given subject, decide of a common research question for your group. Then, imagine 2 projects that try to answer this question.

    Reminder: to formulate a great research question, refer to the methodological tips in Part 2 of the course.

    Basically, you already have a theme and a subject, that your tutor has picked for you. Now, you should find a research question within that subject, and two projects within that research question. Have a look at the diagram below for more insights 👇 (or click here to show it in full).

    You're free to imagine anything as long as your project remains a Web project (or uses Web technologies): rather than targeting people directly affected by the United Nations goal, who might not have access to the Web, you could provide tools/services to NGOs dealing with these topics.

    So choose two concepts you want to work on during these 4 weeks.

    Remember that even if you are allowed to imagine anything, your prototype will have to be tested later, and for that you’ll need to go on the field and get feedback from your users. If your concept is too offbeat, you will not be able to find users to perform the tests.

    Once you and your group have determined a common research question and decided on two concepts that you like, remix this Glitch template and fill it to document your two projects.

    Only one member of your group has to remix the template and invite the other members (see video below 👇 or How do I invite collaborators to edit my project? for more detailed informations).
    This way, you will be able to collaborate on the same Glitch project simultaneously or separately.

    Your participation to the projects are tracked on Glitch, it is thus important that each of you collaborate using their own account.

    When collaborating with multiple users on the same Glitch project, you may encounter limits: while being free, a Glitch project is limited to 4000 requests per hour, that is more than enough for most projects but can be reached quickly with multiple editors. You can turn off automatic refreshing of the app preview when you make changes:

    turn off (or on) automatic refreshing of the app preview

    You'll then need to hit Ctrl/Command + R to reload your page and see changes.

    Here are a few great examples from what other students made. Get inspired!

    Note: these are examples using an older version of the template. Yours is slightly different.


    Wireframes

    What is a wireframe?

    • Wireframes are simple black and white layouts that outline the specific size and placement of page elements, site features, conversion areas and navigation for your website.
    • They are devoid of color, font choices, logos or any real design elements that take away from purely focusing on a site’s structure.
    • We often say that they are much like a blue print to a home, where you can easily see the structural placement of your plumbing, electrical and other structural elements without any interior design treatments.

    Nick HAAS,
    What Is a Wireframe? 7 Reasons Why Wireframing Is Important In Web Design

    Along your projects definitions, you're going to create wireframes for each of your projects using Figma, the all-in-one UX/UI solution for designing websites, mobile apps, and more. Using Figma, you can design, prototype & collaborate all in the browser.

    Start by creating your Student Account on Figma.
    Make sure to use your @edu.em-lyon.com or your @edu.emlyon.com e-mail adress, it will provide you a Student Account without sharing limitations.

    Then, validate your Student Account by completing the form as shown below 👇 in order to be able to collaborate with your team.

    Verify your Student Status

    See this article on Figma for more about your Student Status.

    Now that your Student Account is created and validated, and before starting your wireframes, follow this tutorial to discover the basics of Figma:

    Watch out, in the video above, you see the realization of a mockup. You will have to produce a mockup for the next phase. For the current phase, start with a wireframe. A paper wireframe is produced in the video, you have to do the same exercise but on Figma directly ✏️ 💻

    You're finally ready to create a bare minimal app for each of your projects to describe how, from a home screen, your users would access the most important features of your service with as few screens as possible (e.g. for Uber, this feature should be "how to order a driver").

    Figma Community shares hundreds of files to design faster with lo-fi mockups, user flows, simple prototypes, and diagrams. To help you quickly prototype, duplicate this Lo-Fi Wireframe Kit with over 100 wireframing components, and copy elements from this kit to create your wireframes.

    Do not try to integrate graphic resources (images / fonts / …) during this step but focus on users scenarii. Have a look at the Figma project below 👇

    sketch to wireframe to mockup on Figma

    Don't wireframe the sign in/sign up features, pretend your user is already identified on their homepage and focus on the main features of your services.

    Collaborating on your Wireframes
    Figma allows to share your project with anyone. You just have to click on the "share" button on the top right corner of your window, and share the link with edit rights with your team and tutor .

    Here is a list of useful resources to help you create these wireframes:


    Evaluation criteria

    Project 1 definition: 5 points

    • Context definition
    • Target + persona definition
    • Services definition
    • Features + user flow definition
    • Illustrations
    • Benchmark analysis
    • References list

    Project 1 wireframe: 4 points

    • Wireframe quality
    • Usage of a wireframe kit
    • Usability of the main feature

    Project 2 definition: 5 points

    • Context definition
    • Target + persona definition
    • Services definition
    • Features + user flow definition
    • Illustrations
    • Benchmark analysis
    • References list

    Project 2 wireframe: 4 points

    • Wireframe quality
    • Usage of a wireframe kit
    • Usability of the main feature

    Communication: 2 points

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

    Submissions

    Submit the links to your concept definitions and wireframes 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 Glitch project

    When sharing your Glitch projects, copy the link for the result (not the editor view). Then, simply paste that link in the submission box down below. 👇

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

    Definitions

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

    Wireframe 1

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

    Wireframe 2

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

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