Challenge Summary
Welcome to Gamification - Responsive Website Design Concepts Challenge.
In this challenge, client is looking to create a website that helps in tracking the gamification process (Leaderboards, Points, badges etc..) for their employees. Participation in the gamification website is rewarded with donations to winners choice of Non-For-Profit Charities. So not only are the particpants in this gamification site having fun and competing with their coworkers, they are doing it for good by donating to charities.
Round 1
Initial Designs for a checkpoint review
- User Pages (Desktop + Mobile)
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.
Round 2
Your Final designs for all the required screens with all checkpoint feedback implemented.
- User Pages (Desktop + Mobile)
- Admin Pages (Desktop + Mobile)
Feel free to add any other additional screens which are necessary to explain your concept and flow
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.
The Purpose of this challenge is to come up with initial design concepts for a gamification website that will be used internally by company employees to track their leaderboards points and badges, add/edit activities and allows an admin to create a contest as a part of gamification process within their company.
Our client is a leader in ehancing the quality of life for consumers and providing a cleaner and healthier environment for future generations.....that's the way they think. And now we want you to help us come up with a design that fits their mission and their corporate culture to bring a level of fun to their daily jobs through this gamification website.
We want you to focus on a few key concepts to bring into your design.
1. Emphasize innovation
2. This is a game where employees can have a little bit of fun and
3. It's for a good cause...so please participate!
For this challenge, you will be provided with a initial wireframes (Desktop and Mobile mockups) which helps you to understand the entire website.
Challenge Assets:
Files for this challenge are available on Google Drive.
Please ask permission to bwalles"at"appirio.com and csystic"at"gmail.com
IMPORTANT!! Design Considerations:
- Follow the branding guidelines (colors, logo and its usage) as provided in the guidelines
- Please be modern and on-trend on designs.
- Think clean deisgn, good use of white space, fresh and "airy" layouts
- We have provieded the wireframe images for reference, please DO NOT COPY the layout exactly, use it as a reference for required UI elements in each page.
- For design and gamification inspiration please view Reference 1 (please use it as reference and make sure you DO NOT COPY)
- We are looking for the site to be responsive, so we need the below screens sizes
- - Desktop (1024px as width and heigth as required)
- - Mobile (320 x 480 px)
Required Pages:
Below are the pages required for this challenge..we have provided the wireframes to help you get started..
User Pages:
Login:
All users to this application will need to be signed in to access the leaderboard and other sections of this gamification website.
- User logs in with their User ID (email) and password.
- We need to have option to allow the user to retrieve password, please add "Forgot Password" link
- This page could have an image in the background that speaks to the fun and personality of this APP
- Consider how you should treat the explanation and link of this game to the benefit of playing which is namely the abilithy of winners to donate to a charity of their choice. (See wireframes)
Home Page:
This page is NOT represented in the wireframe set...but is needed.
- After successful log in, a user will be brought to the home page.
- This page should have some messaging around playing games for fun and emphasize the charity aspect of this gamification site
- A user will be able to select from 1 of 3 contests available to play
- Each contest should have an icon and a brief description area for that contest (Contests should be 1. The Game of Innovation 2. R&D 3. Recycling etc..)
- This page should be very graphic in nature and act as a visual introduction to the gamification site...it's imagery should generate excitment for people to participate in contests
- Make sure to emphasize the benefit of playing....which is to play for a charity of choice where Company Name will be donating money to winner's choice of charity.
Leaderboard:
This page will show the leaderboard based on the points received by the users.
- After selecting "The Game of Innovation" from the home page....the user will be taken to the "Dashboard" view for The Game of Innovation
- This page is a user's dashboard showing leaderboard, and basic profile information such as your scores and accomplishments
- We have attached the wireframe for your reference, we are looking for you to improve it further.
- Client likes the concept of badges to exist in the gamification process - how can it be included in this page? We would like to see some of your ideas around icons or badges that we can use to represent accomplishments
- Do we need to show user profile information in this page as shown in the wireframe? Should their be a separate "My Profile" page. We're looking to you for suggestions on how to handle this.
- For levels (badges), we want you to use an "animal" theme. For instance:
Level 1: Curious Cat
Level 2: Brainy Beagle
Level 3: Bulldog
Level 4: Bull
Level 5: Lion King
This animal theme is just to help you get started, if you have better suggestion - please feel free to show them in your designs.
My Scores:
- A user will be able to view their activity and scores
- Please show hover states and roll over hints as indicated in the wireframes
- A user has a "bragging URL" that shows their scores and is a way for an user to share their accomplishments with their coworkers. How should this look? It should be an iteration of the scores and accomplishments that a user has achieved and we are looking for creative ways of displaying this. Please show a preview version of this page. Please show and highlight the charity that the player is playing for.
- A user is allowed to delete an activity from this page if it is inaccurate. Deleting an item should trigger a "Are you sure you want to delete?" modal window message with appropriate buttons. Once deleted a user will have to re-enter the activity through the submit activity page.
Submit Activity:
- A user comes to this page to log their activities into the gamification site to get point rewards and acheive badges and accomplishments
- Consider showing a list of a user's most recent activity
- Show the status of that activity item...has it been audited, or is it currently being audited. (Show the status)
- A user is allowed to delete an activity from this page if it is inaccurate. Deleting an item should trigger a "Are you sure you want to delete?" modal window message with appropriate button. Once deleted a user will have to re-enter the activity through the submit activity page
Help:
- The Game of Innovation Page will be a basic "About this Game" page. It should be a simple page with some imagery relating to the game and a place for a description of the game and it's rules. Please use the provided Innovation logo (lightbulb.jpg) on this page.
- The contact page should be a basic form for participants to contact the admins of the game with their questions. Include space for a drop down of pre-populated common topics or questions as well as a custom field for users to enter their questions in to
Admin Pages:
- Below are the admin screens required for this challenge.
- In addition to the above pages - an admin will have access to these.
Contest:
Contests could be for charity, prizes/giveaways, a certificate or simple leaderboard recognition.
- This page will show a table with "Names of the Currently Active Contest" and an option to edit it.
- Come up ideas on how edit option can be shown within the table (icons?)
���- We also allow the user to create a "New Contest". Don't worry about what this flow will look like...we are only looking for this screen.
- A contest may be to get the most ideas logged in some fixed amount of time.
Activities:
- This page will show a table with "Activities" and an option to edit it.
- Come up ideas on how edit option can be shown within the table (icons?)
��� - We also allow the user to create a "Add an activity". Don't worry about what this flow will look like...we are only looking for this screen.
Badges:
- In this page, admin will have options to manage the badges which they use for each contest.
- Badges will be listed in the page based on the contest, come up with a table to show this listing and also have an option to edit it.
- Admin will have options to create a new badge by specifying the Badge name, point's range and also an image for the badge.
Additional pages:
- Please include any additional pages that help illustrate your concept.
Branding Guidelines:
- Please use the logo, colors from the given branding guidelines
Target Audience:
- The targed audience will be internal IS Employees
Judging Criteria:
- How well you design the pages based on the given requiremnets.
- Any ideas you suggest through your design concepts.
- Cleanliness of your graphics and design.
- Design looks and User Experience.
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
Please upload PNG images in a zip file with all requested contest requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors.
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.