Living Progress - Sheventures - Desktop Wireframe Challenge

Welcome to Living Progress - Sheventures - Desktop Wireframe Challenge! 

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

We are looking for wireframe (axure) solutions based on requirements from our client. We’re also looking to the community to come up with interesting ideas for the workflow - we’re absolutely open to creative solutions!

At the end of this wireframe challenge, we are looking to have a complete solution for the user experience and flow of the application.

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

Round 1

Initial Wireframe Concepts of the below scenarios for checkpoint review.
01 Login / Landing Page
02 Profile
03 Dashboard
04 Story Detail
05 Chapter Detail (Journey)

Any additional features or screens that will help explain your idea.

Round 2

Final Wireframe Concepts for all given requirements with any checkpoint feedback implemented.
Any additional features or screens that will help explain your idea.

This application helps educate women and girls on how to lead effective advocacy campaigns through engaging narrative games.

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.

Wireframe Expectations:
- You must create traditional wireframe call-outs and notes
- Provide us with your interaction and click-path thoughts and suggestions
- The website must be very easy to use and intuitive. Keep that in mind when create your solution for the layout and flow information.
- Have your wireframes of size - desktop : 1024px width and height as required.

References:
Inspiration and Mood Board
(Please click on "comments" icon in the above mood board to see additional comments from client for each of the reference image!)

Suggested Screens:
Below are some of the screens that we suggest based on the above concept, feel free to expand on your concepts..

01 Login / Landing Page:
- Provide a way for the users to login to the application, they should have the ability to login via Facebook, Twitter, Google Plus or register via email.

Example from Brookings game released earlier this month (see screenshots and explanation below):
* Ref_01.png: Main landing page that gives players the option to launch a new game or load one that’s already in progress.
* Ref_02.png: When the player selects ‘New Game’ they’re given the option to login in using their social media accounts or play anonymously.
* Ref_03.png: 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.
* Ref_04.png: 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.
* Ref_05.png: 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.)

* Ref_06.png The Brookings game illustrates this well. Players that choose to login via their social media account will need to authorize the use of their public profile. They have the option to review the information they provide in advance and are notified that the app will not post content to their page:
* Ref_07.png: The same rule applies when connecting via Google Plus.
- - -  Players registering via email could select a display name to setup their profile and be given the option to upload a picture as their avatar (this could be their real name, but doesn’t have to be if they choose to be anonymous) We should note that at profile creation: ‘If working in a dangerous environment please don’t use your real name.’

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

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/
- Male or 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…

02 Profile:
- Users should be able to personalize their own profile.. 
- how will a user initiate editing of their profile? 
- If they want to delete their profile, there should be an option to delete, will need to include disclaimer about what happens to their information, something like, “Your privacy is important to us. We will not disclose your information to third parties”
- This page should track a user’s progress (i.e.overall performance and achievements) and the badges that they have earned, also showing them what they have still yet to learn and achieve. 
- We might also include a leaderboard that shows the badges a player has received relative to their social media friends, since players will be invited to share their progress in the game already. A list of those friends who have also connected their social media account with the app could also be displayed here to promote more sharing and interaction. 

03 Dashboard:
- User can select from list/grid of available stories - Administrator should have ability to select which stories are open for users to play initially and others that require getting to a new level to play. Those that require leveling up should be foggy in color.
- User can see which stories they have viewed, show progress, and percentage complete!
- Show suggested educational content and recent updates to the application.
- Feel free to show anything that you think would be appropriate.

04 Story Detail:
- Once a user chooses an adventure, they should be able to view the synopsis of the overall adventure and a list of the chapters  within that adventure. Once they make their first selection they jump right into the game.  

05 Chapter Detail (Journey):
- Once a user is in the chapter 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 (more better approach) feel free to show them in your wireframe. 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 chapter 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.
- At the beginning of each chapter, the user will be given some background information about a particular issue in their community of which will be modeled after real­-world events ­ for example, the experiences of Malala Yousafzai and the ongoing women’s rights issues in Pakistan.
- User can pause, save, and come back to the story at any point
- The only chapters that will be available will be the ones that the game creator has selected as being available for play. If the game creator decides that each chapter has to be completed before moving onto the next then that is how they will appear for the player.

Upon completion of the adventure:
- Call To Action: Each Chapter should also have the option of including a call to action at the end of the game, an image upload with a link that prompts the user to click on it bringing them to an outside site. This should happen within the game experience of itself right at the end. Not all chapters will have this, so it need to be optional.
- Badge: After game is finished user is awarded badge or some sort of gamification to their profile. They might be more impactful if the badge titles are customized. For instance: Congratulations!!! You Have Leveled Up, Show Your Friends Your New Certificate: Level 1 Women’s Rights & Advocacy Certificate.
- Resource Section: The app also provides links to educational content around that subject matter (could be displayed within the application or external websites) - These links need to be regionally specific, For instance we might want to break this game up into 6 different regions for the resource section. So the users IP would dictate which resource section gets presented.
- Player will be presented with an overview of the lessons learned in that particular chapter

06 Story Survey / Quiz:
- Upon completion of the story the user will be presented with a survey or quiz to explore the “lessons learned” from that story, we would like to keep this optional.
- User will rate the story experience and provide feedback/comments.
- Possible social share of the story out to users social networks, social sharing should definitely be optional at the end of each game, and linked to the badge or certificate the player receives.

07 Resources Section:
- We need a section of the application that contains educational resources as it relates to the subject matter. This section has already been covered underneath upon completion of story. “The app also provides links to educational content around that subject matter“.

New to axure RP, get started right-away!!
Here are some quick tutorials to help you get started http://www.axure.com/support

Target Audience:
Women interested in organizing for improved rights for women or other social improvements in their societies.

Judging Criteria:
Your submission will be judged on the following criteria:
- User experience
- Completeness and accuracy of the areas of functionality and content
- How well your wireframes provide a consistent user flow and clear information architecture for the application

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

Submission File
Generated HTML files with all the requested contest requirements stated above.

Source Files
Wireframes should be built in axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.

Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.