BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to "Saphire - Meeting Manager App Design Concepts Challenge". In this fun and exciting challenge, we will be working with Saphire to design a comprehensive experience for Saphire clients to have a single branded digital experience with every touch point on their projects and interactions with Saphire. The full scope of the application will encompass meeting management, project management, project feedback, and team collaboration. 

In this first installment of a series of challenges for this project, we will be exploring initial look and feel concepts and user experience designs around the meeting management aspect of the application. We are looking to the design community to provide us with some initial user experience and design concepts working from the provided wireframe and screen requirements. 

 

Round 1

01. Dashboard Screen
02. Projects Page
03. Projects Detail Dashboard
04. Calendar (Meetings for day/ week/ month views)
05. Request Meeting Page

Round 2

01. Dashboard Screen
02. Projects Page
03. Projects Detail Dashboard
04. Calendar (Meetings for day/ week/ month views)
05. Request Meeting Page
06. Meetings Detail - Overview
07. Meetings Detail - Pre-Meeting
08. Meetings Detail - Post Meeting
09. Post Meeting Feedback

BONUS Screen:
10. In-Line Comments on meeting recap audio/ video


Background Overview
We are looking for you to create the best UI/UX for the meeting management aspect in our Saphire application. The meeting features can be broken down into 3 areas which are Pre-Meeting, During Meeting and Post-Meeting. More details can be found below.

Supporting Documents:
- Saphire-Digital-Experience-UserFlow.pdf
- Saphire-MeetingMaker-Design-Direction.pdf

Design Goals: 
- Suggest user screen flows and navigation.
- What should the priority features be?
- How quickly could you find information?
- What is the best UI/UX for the apps?

Screen Sizes:
- iPad Portrait: 1536 x 2048px
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!

User Stories:
- Erik is a client of Saphire. 
- He's excited to use Saphire's new application to collaborate with his team, manage projects, and conduct meetings. 
- Previously Eric had to use many 3rd party applications and tools to do his job, but now Saphire has combined the best in practice of these 3rd party tools and has brought them together in a single branded digital experience for it's customers to use when collaborating with Saphire team members on their projects. 
- Eric has several meetings coming up for his project that he would like to set up and manage. 
- He is quickly able to create, manage, and communicate key meeting details thru the application. 
- At every stage of a meeting process, Eric is able to add assets, attendees, reference assets, and communicate with meeting attendees. 
- Pre-Meeting, In-Progress Meeting, and Post-Meeting items are easily accessible and organized in a clean and simple dashboard interface. 
- Tools for conducting meetings are seamlessly integrated into the application allowing Eric to present live, screen share, white board, and capture live notes during a meeting session.  

Screen Requirements
01. Dashboard Screen
- A simple dashboard concept that allows for quick links into the main functions and content of the application.
- This screen will become the default screen every time user open the app.
- This page should provide main navigation so user can easily access all features in the app. Some of the main navigation are "Projects", "Activity", "People", "Tools", "Meetings", "Calendar", "Profile".
- Also in this dashboard page, user will be able to see their summary and recent log activity for quick access, such as recent projects, archived projects etc.
- What is the best UI/UX for this page? Show us your creativity.

02. Projects Page
- Once a user has clicked into a client category, a simple dashboard of inflight, and archived projects are presented for the client to jump into. 
- User should be able to view the project list in 2 different view, thumbnail and listing
- User should be easily identify any project status, whether it's healthy or not. 
- Provide project logo, project name, project status and number of team members responsible in each project.

03. Project Details Page
- After selecting a project to explore, a clean project detail screen is presented with navigation to explore an overview, team members, activity feed, workflow status, project assets, project deliverables, and project meetings.
- By default, this page will show content of "Overview", contains of explanation and description of the project it self (purpose of project, project image, summary information of the project)

04. Meetings Page
- Clicking into the meetings for a project brings a user to a meetings list page with view options for calendar, grid, and list views.
- Show views for the calendar for day/ week/ month
- Show team member availability for these calendar views
- This page will listing all meetings schedule in the projects
- Each meetings schedule will show the information summary like when the meeting will be held, where, the meeting agenda, how many people attend the meeting and assets needed for the meeting.
- For meeting that have today schedule, there should be an easy UX to identify the meeting, maybe by differentiate the meeting color background schemes. 

05. Meeting Request/ Scheduling Page
- As a client, my meetings show up in my calendar that were set up by my Saphire project managers, but I also have the ability to request a meeting. 
- In order to request a meeting, I am required to fill out a meeting form where I detail who I would like to attend, the meeting description, agenda, purpose, and objectives. 
- I'm able to view add attendees and attachments to the meeting as well as browse team member's calendars looking for a the best available time slot for my meeting. A feature that we'd like to explore is if a team member has a conflict with the proposed meeting time, the application suggests an alternate team member who can make the meeting. 

- Think gamified stages:
-- Client makes meeting request
---- allows them to select multiple dates that work for them
---- allows them to ask certain members to be available 
---- allows them to detail the 'why' they are requesting the meeting - purpose, objectives, agenda, deliverables ... 
-- Client can see the Saphire members who can join - reach quorum = meeting is accepted 
-- in app notification/calendar update that new meeting has been successfully scheduled, etc... 

06. Meetings Detail Page
- Clicking further into a meeting detail reveals meeting overview with objectives, agenda, purpose, and action items. 
- Meeting status is organized into Pre/ In-flight/ and Post meeting items with the ability to perform actions for the following content :
* attendees, 
* assets, 
* Notes, 
* and collaborate on smart sheets. 

07. Pre-Meeting Details Page
- Clicking on pre-meeting items, a user is able to communicate, share, and assign pre-meeting tasks to the attendees
- Meeting overview with objectives, agenda, purpose, and action items. 
- This page should show the possible items related to pre-meeting mode :
* Logistics Date, Time, Place, Link to Virtual Meeting - Show user has access to calendaring through this icon or section
* Attendees (visual way to show off who is attending) - Image headshot, Name & Title, Action item designation (an icon that represents if the attendee has an action item 'due' for the upcoming meeting)

08. Post-Meeting Details Page
After a meeting has completed, there are several important content items that will be made available for the meeting attendees. In addition to a meeting survey, a summary of the meeting, meeting notes, recorded sessions, additional assets, next steps and action items will be sent out to the meeting attendees. Think thru some initial exploration and flow for how this post meeting follow up process can work. 
* Meeting Recap Section Showcase art of the possible the most here - large section that allows any attendee to quickly and easily digest the meetings results from the previous meeting
* FEATURE Video Recap (optional) : Allow the scribe or PM to record a lo-fi video or audio recap, so the 'playback' section can be audio/visual and not just copy
* Meeting recap section should mimic the "Meeting Results Digest" that is compiled during the previous meeting recapping : Critical Decisions Made New Identified Issues, Risks Raised, Access to newly attached documents, Next Steps - Owner of that action
* Next meeting type : Daily Standup or Weekly/Bi Weekly

09. Post-Meeting Feedback Page
- A valuable part of this application is the ability to solicit feedback on a meeting from the meeting attendees. Meeting attendees can rate the meeting and provide feedback and commentary on how to make the meetings better and more efficient. 
- A common feedback mechanism is a "1 to 5" star rating system. While this is acceptable, the client would like you to think about other ratings concepts or mechanisms that aren't necessarily a traditional "star rating". Should we use sliders or dials? Should a user "confirm" the meeting was a success by 'tracing' on screen the way some mobile apps ask a user to do to "confirm" or "accept" something? (Think how Uber or the hotel booking app HotelTonight asks a user to trace on-screen a confirmation of value) It's up to you, but the client would like to see something original here that is still as intuitive of a simple star rating system. 

How do we elevate the post-meeting feedback?
- ideation/innovation around what they could be
- ratings slider - 1 to 5 + comment box (see above comments on creating a new experience here)
- survey - rate your experience (again, see above comments on creating a unique experience)
- Can we show the art of the possible. Show another way of creating feedback - preferably, being able to annotate the lo-fi video or audio from the meeting. Similar to Sound Cloud. https://soundcloud.com/
--- be able to rate the meeting (user feedback closing the feedback loop)

10. Bonus Screen: Post-Meeting Audio/ Video Feedback Page
Using Soundcloud as a reference, explore what an initial design could be for our feedback comments on an audio or video recording of a meeting. 
--- be able to make post-event comments preferably, being able to annotate the lo-fi video or audio provided by the Project Manager in the meeting recap 

Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance

Target Audience:
- Potential Client
- Current Clients

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Creativity of your visualization

Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30052082