iOS Design - Workshop To Workplace Design Challenge

Welcome to iOS Design – Workshop To Workplace Design Challenge!

This challenge is focused on creating design concepts/visual ideas to create an application for Vitruvius; Vitruvius is an organization that equips individuals, teams, and organizations to accelerate innovation through the use of a curated set of Human-Centered Design (HCD) methods.

Today these methods are taught to students in K-12, Fortune 500 businesses, non-profits, and governments primarily through in-person learning experiences lead by Vitruvius instructors.

To help students who are trying to apply these methods to their work when they return to their schools and offices, Vitruvius would like to build a native iOS app that can help students document, and share the outcomes of meetings and working sessions that employ HCD methods in service of solving challenge

Round 1

Submit your design for a Checkpoint feedback:
1. Your initial design and you can skip login and sign up page designs for first round.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

Round 2

Final Design plus any Checkpoint feedback:
1. Your final design.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

Challenge Description:
Our primary goal of building this iOS app is to provide people using LUMA’s 36 Human-Centered Design methods in their daily work with a quick and easy way to document, share, and browse photographic examples of the successful application of these methods.

While applying these methods during an event like a meeting or working session, people create a large number of physical artifacts like flip-chart posters, whiteboard drawings, and large clusters of post-it notes.

At the end of the event, the outcomes of these methods must be documented photographically and shared with peers during the course of a project..

Please note: the primary concepts at work in this domain are projects, which are comprised by multiple events over time (which may be described in a plan or agenda before hand), during which participants meet to apply method(s), to problems they are facing, which always results in the creation of artifacts.

Please note that Vitruvius is code name for client.

We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).

Screen Sizes:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp! It will be great if you can provide the landscape version.

Supporting Documents:
- Can be found on Google Drive, please ask for access in forums by sending your email address so we can share the folder with you.
- Client thoughts (2016-01-11-W2W-Storyboard.pdf).
- Example of the LUMA System of Human-Centered Design Methods: (LUMA-Methods.pdf)
- Logo-Files.zip
- Method-Icon-Files.zip

More Context and background about LUMA client:
- Please watch this video:
-- http://www.luma-institute.com/platform
- A link that provides more context on LUMA and our story:
-- https://www.luma-institute.com/story

Branding Guideline:
- Please see our brand guidelines document (LUMA-Brand-Guidelines.pdf)
- In addition, you can refer to client website for branding guidelines:https://www.luma-institute.com/

Design Considerations:
- Your design needs to be responsive; please consider that while designing the pages.
- Focus on the user experience of each page and make sure each page has a complete flow.
- Give importance to the overall layout and think about how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path, so we can see how the interactions fit together in the application.

Main Features:
A successful solution will need to support the following tasks (for more detail see: 2016-01-11-W2W-Storyboard.pdf):

1. During the event, use the app to photograph the artifacts created during each activity. Typically three types of photos are taken during these events: process shots that show participants working on artifacts, wide shots that give a sense of the overall artifact that has been created, and detail shots of specific post-it notes or handwritten text.

2. Following the event, use the app to review all of the photos from the event and select a series of key images to be shared with participants and other interested parties. This will help maintain a shared understanding of progress, and insure the appropriate next steps are taken.

3. After selecting photos, people must be able to quickly “tag” any photo in the sequence with one or more of LUMA’s library of 36 Human Centered Design methods, in addition to custom tags created by the user. When applicable, the methods that preceded or followed the in-person session could also be tagged.

4. Users of the app should also be able to associate the event with a project and/or problem the event was trying to solve, indicate who participated in the event, use text to annotate or describe photos, and adjust the sequence of images.

5. Using the app, the final sequence would then be sent to participants.The text and images would tell a story about the in-person session, feeling like a simple powerpoint presentation or a Tumblr page. The output would be viewable in the mobile app itself, and also through a simple desktop view of the event for those who are not accessing the shared link though the native app or mobile device. Note: somewhere in the UX workflow the user creating the final sequence to be shared should have the ability to determine whether the final summary is shared with all LUMA practitioners and hence visible to everyone who has the app, or “private” and only visible to a select group (who are designated by their email addresses). The experience of making this distinction and the terminology used within the interface is open for discussion, and should be addressed by the designers within this challenge. The default selection for this setting would be “All LUMA practitioners” with the option to change that setting. We would also want to have a sentence explaining that LUMA coaches will always have access, like: “In order to ensure a great experience, LUMA coaches will have visibility into this event.”

6. After events have been shared, they should be easily browseable through the app by event name, event date, the problem (or goal of the event), event creator, participants, or methods used during the event.

User Flow:
- Please refer to 2016-01-11-W2W-Storyboard.pdf document for workflow.

Required Features:
- We are looking for you to provide design concepts and click-paths. This is the first step in planning our user experience!
- Please read the user flow and target audience sections and make sure to capture what the client is looking for.

Suggested Screens:
What follows are possible screens that could support the critical tasks we have outlined within the “Main Features” section above. Please use what follows only as an example, and when in doubt refer to “2016-01-11-W2W-Storyboard.pdf” to guide the design of the experience. Our goal of this challenge is to hear from you what features, screens, or workflows should be put in place to support the desired experience we have described above.

Possible screens may include:
1. Log In Screen:
- Each user needs to sign in by filling:
-- Username.
-- Password.
-- Forgot password link.
-- Remember me checkbox.
-- Login button.

2. Sign Up:
- Here the user the user needs to fill his information:
-- First name.
-- Last name.
-- Nickname.
-- Email.
-- Confirm Email.
-- Password.
-- Confirm Password.
- User will be able to connect using his google plus or linked in information.
- Accept Terms Checkbox.

3. Dashboard:
- User can see a list of meetings/work sessions that he is involved in:
-- Clicking on an existing meeting/work session will show all shared images in that meeting and feedbacks.
- User will have the ability to create a new meeting/work session by clicking on a button.

4. Creating new meeting/work session:
- User needs to fill:
-- Meeting/Work session name.
-- User snaps a photo of artifacts during an event  or uploads a photo of an artifact he has already taken on his mobile.
-- Add a name a description to that image.
-- Share that photograph of  an artifact with a peer or LUMA coach.
- User receives feedback in the form of a text and or image comment on what they shared:
-- Users will get native notifications from the application once they get feedback.

5. Meeting/Work Session Details Page:
- Here we will have everything related to this meeting/work session:
-- Meeting/Work Session artifact photograph and comments.
-- Meeting/Work Session artifact photograph Feedback.
-- Meeting/Work Session photographs of the physical artifacts generated by the meeting (sketches, posters, clusters of post-its); we will need the ability to take photographs from this page.

6. What Else?
- Please share with us what you think can help us bring the idea more to life.

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:
- Students in K-12, Fortune 500 businesses, non-profits, and governments.

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Your design should possible to build and make sense as a mobile application.

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.