Living Progress - Sheventures - Responsive Application Design Challenge

Welcome to Living Progress - Sheventures  - Responsive Application Design Challenge!

This project aims at creating designs for a responsive application that focusses on empowering women to be better community advocates by providing actionable toolkits and real ­world lessons to enable them to be more effective in creating lasting change within their communities.

We have provided wireframes for content references, please do not copy them!

Also please don’t just color the wireframes, we are looking for you to improve the overall layout, interaction and user experience of the this application. We’ve also provided a set of source illustrations for you to work with for your concepts. We recognize that a lot of your time could be spent on working on a custom illustration...which is not the goal of this challenge. However...we wanted to give you some base assets to start with. Feel free to customize the illustrations as you see fit.

This challenge is part of the HPE Living Progress Challenge Blitz Program (Secure top placements in the leaderboard to grab additional cash prizes).

Good luck and we look forward to your design!

Round 1

Submit your initial designs for Checkpoint Feedback

01 Landing Page
02 Customization of Character
03 Dashboard
04 Story Details
05 Scene Details
06 Story Completion Screen

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.

01 Landing Page
02 Customization of Character
03 Dashboard
04 Story Details
05 Scene Details
06 Story Completion Screen
07 My Profile
08 About the Application
09 Style Tile

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

The Purpose of this challenge is to come up with the the look & feel and flow for this web application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).

Design Ideas:
- Looking for modern, intuitive user interface
- Focus on the design being a great user experience, think simple but effective solutions!
- Come up with designs that shows out-of-the-box solutions.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Please make sure your capture every details in the wireframe.
- It is not required, but we’d like to see your thoughts on a “SheVentures” logo or even possibly a different name for our application. 

Branding Guidelines:
- Branding is open to the designers
- We have provided a character style guide, please follow them to design the characters! Please note that we recognize the amount of detail and time that goes into creating a custom illustration like this. This is where we want the app to go, but for this challenge we will be focusing in on the user experience and game play. We have provided a set of illustration assets for you to work with for your concept. Please start from here and be sure to focus in on the screens and user experience demonstrated in the wireframes.

Design Size:
- Please have your designs of size 1280px width and height as required.

Current Problem:
Everyone should be able to receive an education, to speak freely, to live free from violence and to participate in the political processes of their country. However, millions of women and girls are denied basic rights just because they are female. Community organizing and advocacy (public support) are proven and powerful tools for women to gain power, but few have experience or opportunities for training in this field.

Solution; Open Narrative Gaming Platform:
Sheventures is ���an open narrative gaming platform designed to help women around the world learn how to advocate for change within their communities. Narrative games, or playable stories, are text and image ­based open game worlds where players choose their responses to prompts in an evolving story where they are in control. This fun and interactive adventure will take women and girls through a number of exciting journeys where they make decisions on how to manage an advocacy campaign to advance the rights of women in a fictional environment. Their successes and failures will teach women how to effectively advocate for political, economic, social and institutional change developing real­-world advocacy skills to apply in their communities. 

The adventure narratives within the game will be based upon real world examples and advocacy methodologies with demonstrated impact through NDI’s (National Democratic Institute) 30 years supporting global organizing. The platform framework is designed to be adaptable, growing easily to add new narratives or language translations.

References:
- Inspiration and Mood Board

Required Screens:
01 Landing Page:
- This page will have the main call-to-actions and also shows information on the purpose of the Sheventures, display case-studies, etc
- Should provide a way for the users to login to the application, they will be able to login via Facebook, Twitter, Google Plus or register via email.
- When the player selects ‘New Game’ they’re given the option to login in using their social media accounts or play anonymously.
- If they choose to login via social media (Facebook in this example) then they’d be directed to the Facebook login page where they’ll be asked to authorize the integration of the game with their social media account. If the player chooses to play anonymously, the game is immediately launches.
- If a player selects “Load Game” instead of “New Game” from the landing page, they’re given the option to do so via their social media account or using an ID that the platform generates for them.
- - - When a player clicks on “Load a game by ID” they see this screen (how these IDs are generated on the backend is unclear from the UI, but it’s a clever way to maintain a players anonymity, while allowing them to interact with the game on a continuous basis):
- - - Players logging in via social media will need to acknowledge that their profile information (i.e. profile picture, social media name, list of friends, etc.) will be accessed when initiating a game (disclaimer, should be the same one show when users delete their account.) 
- A user should be able to choose whether or not they log in to play or play anonymously before seeing the list of available stories and starting their journey. 

02 Customization of Character:
Reference: Dashboard > Create Character
- Players will create and personalize their own characters and provide some basic demographic information such as age, gender and country of origin These are the graphics that will represent the players in the game, these will allow the players to build their own character at the beginning of the game (important to include characteristics of all cultures around the world) Good reference: https://bitmoji.com/
- - Female   
- - Character body type - short, tall, small, large
- - Character skin tones - 5 (?)
- - Wheelchair, skateboard, rollerblades
- - Outfits - Sari, dress, pants and t-shirt, suit, …...
- - Hats and items for the head - baseball cap, glasses, turban…...
Etc…. 

- How do you think, a user needs to set-up their character?
- How do we show the progress to the user and also the changes to the character as we select the options?
- Looking forward to your thoughts, make it fun!

03 Dashboard:
- User can see which stories they have viewed, show progress, and percentage complete.
- They will be able to launch a new game or load one that’s already in progress..
- This needs to show the “the stories I’m reading, recommended stories to me, and completed stories”.
- We would like to incorporate the leaderboard, featured story, space for educational content, friends how are playing and my badges section.
- We would like to have the hover state on the stories in a cards view to give a user a quick summary of the story, do you have any better ideas...feel free to show them!
- Omit "Recent updates" section in the dashboard.

Header and Navigation:
- How should the top header need to be designed, it will have the notifications (show how this need to be shown) and provide a way for the user to logout.
- Where and how do we show the main navigation?
- Should provide easy access to all pages of the site

04 Story Details:
- Navigation for a story would be scene based where in a user clicks on an object or building to then explore the interactions within that scene (Please see "Sample Story Navigation Scene Selector" in the Inspiration and Mood Board).
- We look for your help in coming with a design for overall story scene navigation for this “Story Details”, make sure to show a overall scene as shown in "Sample Story Navigation Scene Selector" and then a user will be able to click on a scene!
- Once a user clicks into a object from the overall story scene navigation...they enter or brought into the individual scene interaction where their character interacts with the characters of that scene. 

05 Scene Details:
- We will need you design individual scene's based on the provided Story Details.
- Show us how the overall scene framework need to be laid out and make sure a user can pause, save, and come back to the story at any point!
- At the beginning of each scene, user will be given some background information about a particular issue in their community of which will be modeled after real­-world events.
- Story Details is broken down in to two sections "Town Wandering Component and The Chapter Adventure Itself", we wanted you to create a overall screen navigation for this and how a user dives into individual scene node...when we say individual scene node - it refers to the "Scene 1, Scene 2, Scene 3 and Scene 4" under Obstacle 1...please look to create designs for these individual scenes.
- Once a user is in the scene they will follow a flow very similar to Wondercity, they will follow a linear story pattern where they can advance through screens. It will be primarily text and static image based as it relates to the subject matter. We’ll need to explore interactive flyouts, suggestions, and multiple choice questions at key frames of the story - if you got some great ideas (a better approach) feel free to show them in your designs. I think they there should also be some flexibility here for each story line to have different end points depending on what decisions the player makes, an if-then logic that is coded into game by the game creator (not necessarily completely linear, see below).

Game Logic:
Player Action - This is when the player clicks a button or makes a selection on a drop down list, this action will determine the next step in the game.
- - Clicks Next
- - Selects from a drop down
- Character Dialogue - This is where a character says something.
- Feedback Icons - Mechanism for showing player that they are progressing in the right way - For this game it could be in the form of Community Cheering - a graphic to be integrated to show user is making good decisions in the game. It will be a png graphic of a crowd that lines up along the right and left bottom of the gaming space with little thought bubbles cheering the user on. (this is necessary especially if the game itself can have different outcomes depending on choices player makes, it also makes the story a lot more engaging)
- The basic idea here is that each scene can be coded to have different end points depending on what decisions the user makes, we will make sure to provide an example of this in the story we are putting together.

We need your help to make certain changes to the wireframe as per the below comments:
- In Scene Details page, please remove option to select additional avatars from an “existing collection” when a player initiates play (this is show once the user clicks on "Start" in Scene Details page).
- While the user is in the game, we don't the commentary shown at the bottom when player makes a selection in the game
- Please remove progress bar from scene details page as they aren’t fitting for the game, since it’s not a linear narrative. Instead, consider widgets like a countdown timer, money tracker and/or a community support tracker (in the context of community organizing or advocacy work), looking for your thoughts.
- At the completion of a scene, players should be able to unlock achievements, but not in the form of a certificate as outlined in the wireframe. Instead, the reward for completing a story is the successful completion of a story and a “badge” or “achievement” earned for successful completion. We’d like designers to keep this in mind when designing the game play for the application.
- Omit "Survey" option at the completion of a scene.

06 Story Completion Screen:
- After interacting with all of the “nodes” or scenes within a story, the user is brought to a completion/ summary screen where they are either presented with a “success” message, next steps, additional reference materials on the subject matter, and social sharing/ badging….OR….a “unsuccessful” screen message where they are told what they didn’t get right and given the option to “play again” as well as be presented with badging, and additional reference materials. 
- Looking forward to your design thoughts on how both these success and unsuccessful messages can be shown!

07 My Profile:
- This need to show user’s personal information, their achievements & badges, friends who play this, their current level and overall progress
- How do you think this need to be laid out?
- User should be able to edit their profile information
- Should be able to share their profile in social medias!

08 About the Application:
- We need to show the purpose of this application, team information and also any awards that has been received.
- Would it be good to show some statistics information (number of users who played/total stories completed, etc..) looking forward to your thoughts on what can be shown here. 

09 Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles: Reference 1,  Reference 2

Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)

Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers.
- Paragraphs.
- etc.

Stock Artwork:
- For this challenge, you can use icons from the other sources as mentioned in the stock artwork policy below!
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN

Target Audience:
- Women interested in organizing for improved rights for women or other social improvements in their societies. Women around the world that have little to no experience in advocacy, but are very interested in becoming advocates themselves.

Judging Criteria:
- Is the design styled to be appealing and desirable?
- Is the design visually resolved and does it evoke an emotional connection with the user?
- Does the design convey the function and use unambiguously and intuitively
- Does it clearly convey what the app is supposed to let you achieve / what problem it is designed to solve.
- Is the design easy to use and understand?

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.