Challenge Summary
Round 1
Submit your initial designs and any notes you might have for checkpoint review.02) Floor Picker (Desktop)
03) Normal room (Desktop)
04) On Stage Experience (Desktop and Mobile)
04A) Audience View of Stage and Table (Desktop and Mobile)
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your initial designs plus checkpoint feedback implemented for the final review.00) Navigation, User Experience and Interaction (Desktop)
01) Login and Audio Video Check Screens (Desktop)
02) Floor Picker (Desktop)
03) Normal room (Desktop)
04) On Stage Experience (Desktop and Mobile)
04A) Audience View of Stage and Table (Desktop and Mobile)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
- If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2
CHALLENGE OBJECTIVES
- UI/UX design concept for web and one mobile screen.
- Design for 4 unique scenarios
- Provide a design concept that is possible to implement for the production.
- How well your design solves the problem and provides a seamless user experience.
PROJECT BACKGROUND
Indigo is a digital venue platform, used for digital events, virtual office space and everything in between. It is an always on place. Users enter the space, see a visual representation of the space including groups of other users in conversations (in tables / rooms) and can move around to join conversations.
PROJECT OVERVIEW
- User interaction and experience is the first priority. Seeing a presentation from stage is second (still important to be way better than a screen share but not as important as interaction between users). It's all about the attendees, not the content pushed at them.
- Active engagement (people talking, moving around, interacting) is key. This platform is not for passive content consumption events.
- Simplify everything. Remove every feature possible. Remove all friction to getting in and moving around the venue.
- Create and support human connections
- Provide small group experiences even in a larger group setting
- If you're in the venue, you are present - not a passive participant with a window open to just “listen in” a webinar.
- Rethink and challenge everything. How should we interact with each other online for virtual face-to-face?
- We are focused on environments of under 500 people, not massive events/spaces.
THINGS TO AVOID
- Do NOT mirror the physical world on screen. Ideally no pictures of tables, chairs and offices. This is a rethink of how we should interact and engage online, not just taking the offline world onto the screen.
- Do NOT copy the features of every video meeting and event platform. For example: we don’t want a regular scrolling chat window but we love the idea of chat bubbles floating above people’s heads in the video itself or some other way for people to communicate via text but not in a traditional scrolling chat.
TARGET AUDIENCE
- Organizer
- Indigo users
SCREENS / FEATURES REQUIREMENTS
For this challenge, we are looking for you to create a set of screens that are easy to use for the following scenarios. Remember that this is only a starting point, so feel free to take creative liberties when designing the screens and create ENTIRE NEW FLOW.
00) Navigation, User Experience and Interaction
- Your design needs to be implementable in most modern web browsers.
- Provide additional pop-up, loading, any interaction which will make a seamless journey.
- In a room, multiple screens can be shared or presented at the same time.
- In a room, participants in the video should not be pushed off screen. Everyone in the room should be visible.
- As audience or presenter, users should be able to hand a virtual postcard to people - possibly with an email address, web link or other content.
- Should be able to invite someone to a private video conversation.
01) Login and Audio Video Check Screens
- Before entering a digital event, users need to log in first.
- Need to provide username and password to verify their credentials.
- After successfully logging in, users can adjust their audio and video settings. Users can select their mic, speaker and Camera source.
- Think on how to make this experience straightforward and simple.
02) Floor Picker
Here allow user to pick which floor of the venue they want to enter
- Venue: is composed of floors.
- Floor: is a map of tables/rooms. Tables and rooms are the same thing (a grouping of people). For events we call them tables, for office spaces we call them rooms.
03) Normal room
- Show the experience for a small group of 4-6 people.
- In the normal room users should be able to see the: people in the room, map of the floor, audio and video settings, share option, etc.
- We would like you to show two views mode:
- View 1: screen share by multiple users with the map of floor.
- View 2: screen share by multiple users without the map of floor.
- Map of floor:
- Shows different rooms, tables, stages etc.
- Shows users where everyone is and if they are currently in conversations with the others at their table.
- Users can see and talk to the people at their table while seeing/hearing the stage simultaneously.
- Users should also be able to access the floor picker again to change floors
- An organizer should be able to create, edit, delete room, and post content in a room that anyone walking through will see.
- Audio: can mute or unmute their audio.
- Video: can turn on/off their video.
- Share option:
- Users should be able to pick and share presentations, videos, etc.
- Multiple users should be able to share their presentations at the same time.
04) On Stage Experience
This stage screen should show: speakers area, Presentation area, Stage layout, Content sharing area
- Speakers area:
- Show different speakers or presenters on the stage.
- When a speaker is speaking, his profile gets highlighted.
- Presentation area:
- Everyone on stage can share their screens. Any currently shared content will be shown as thumbnails that the producer can pick as the live content for their audience
- The content shared can be simple presentations, videos, Miro boards, etc
- Stage Layout (Presenter and Producer View)
- This is a producer panel which is only accessible for event producers and speakers.
- The producer panel can be shown and hidden so that speakers only see others on stage and the currently shared content.
- Presenters and producers will be able to:
- The producer should be able to turn the video on/off of the people individually
- Select a layout for the audience: content + presenter, presenter only, content only, or audio only.
- Should be able to change the stage background color
- Content Sharing
- Will show a list of content that can be presented
- Producer can pick which content to show to their audience
- Should be able to Create a board for embeddable content on stage which contains the title of content and URL to the content. Boards appear as a list of buttons the producer can click on.
04A) Audience View of Stage and Table
- People at their local table can all see each other and the stage. The stage has a colored background.
- The layout changes based on the producer controls on stage:
- Show the 4 layout views: presenter and content, presenter only, content only, or audio only.
- During a stage presentation, users can see and talk to the people at their table while seeing/hearing the stage.
- Audiences can select a table to move to and show which will consist of video of people in the same table.
- Audiences can access maps and move to any table which they are allowed to.
JUDGEMENT CRITERIA
- Creativity: Impactful; the solution is different or unique from what is already out there and can be implemented.
- Exploration: Out of the box; consider the screen requirements and guidelines as a draft or start point. Provide alternate experiences or workflows to achieve what we are proposing in the requirements and satisfy the user goals.
- Aesthetics: Hybrid; while keeping the visual appealing, we want you to focus on ideas and workflow in a creative way.
- Branding: Open; propose a fresh new branding option.
DESIGN ASSETS
Find the challenge assets in the forum.
DEVICE SPECIFICATIONS
- Desktop: 1920 x 1080 pixels (no scroll if possible).
- Mobile - iPhone X: 1125 x 2436 px (no scroll if possible). It is recommended for you to design in @1x (375 x 812 px, and export your design in x3).
DESIGN TOOLS
Figma: client preferred, but this is not a limitation or will be a judging criteria. You can also use: Adobe XD and Sketch.
BRANDING
- Font, color, iconography are open.
- Your design must be modern, easy to use, comply with accessibility.
MARVEL PROTOTYPE
- We need you to upload your screens to Marvel App
- Please request for marvel app in the challenge forum
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)
SUBMISSION AND SOURCE FILES
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
- Declaration files document contains the following information:
- Stock Photos Name and Links from allowed sources
- Stock Art/Icons Name and Links from allowed sources
- Fonts Name and Links source from allowed sources
Source Files
All source files of all graphics created in either Adobe XD, Figma or Sketch.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.