Challenge Summary
Welcome to another LUX Challenge! The LUX is a "Live User Experience Design Challenge" that we like to run as a fast design challenge to capture quick exploration and new concepts on a user experience problem.
The "LUX - 48HR - John Hancock Innovation HUB Responsive Design Concepts Challenge" will be run during the next 48 hours. At the end of the challenge, we will take your presentation screens and share your collective creative talent with the live audience at the John Hancock Design Workshop!
The LUX Challenge Series provides you with an opportunity to show digital leaders from some of the largest brands in the world just how good your user interface and user experience (UI/UX) design skills are. LUX challenges are fast, fun, and have more chances for you to capture prize money.
Note: No previous experience in a LUX challenge is needed to compete - jump in and give it a try! Make sure to follow the challenge forum and ask questions as things move very fast throughout a LUX challenge.
The goal of this challenge is to take the provided design problem, analyze the user experience and provide design concepts and visual ideas on how the application might look and work.
Challenge Timeline and Rolling Checkpoint
- Challenge Starts: 10:00 AM EDT 05/22/17
- Rolling Checkpoint will start: 10:00 AM EDT 05/23/2017
- Challenge Ends: 10:00 AM EDT 05/24/2017
We are offering 8 Placements! Plus 8 $50 Rolling Checkpoint prizes!
1) $2000
2) $1500
3) $1000
4) $750
5) $500
6) $250
7) $150
8) $100
- Rolling Checkpoints @ $50 each for the first 8 qualified submissions.
Rolling Checkpoint Review ($50*)
Adam Morehead (adroc) will provide a design review if you submit your initial designs by (10:00 AM EST 05/23/2017)
- The first 8 qualifying* checkpoint submissions will win $50
- Within the hour, we will provide any design feedback/guidance
- You must watch the forum for your feedback!
~
Design Problem
The idea here is for an internal web/mobile application that John Hancock employees and contractors can use to submit ideas (at any time) that they think would positively impact the company. This would be a simple app which would store and archive creative ideas. Users would be able to "Like" and "Comment" on ideas to help develop/build on them. There could also be a leaderboard within the application to help incentivize employee engagement. The application's focus would be two pronged: Company improvement & Employee engagement.
Think ahead about how collaboration, innovation and sharing ideas can be working together in this application!
Design Considerations
- Download the provided brand documents
- Think of our brand and also how this should be engaging (fun) to use and collaborate in-app.
- Think about collaboration, innovation and sharing ideas that bring Positive Impact to company
- The application that is able to store and archive creative ideas and easy to find and browse ideas.
- Explore other collaboration tools and how they can work in the mobile space.
Some example features to think about
- The ability to view ideas and collaborate on them (pin them?, comment on them? Share them?)
- Brainstorming Features (Like, Comment, Rate)
- Promote Ideas?
- Gamification (Leaderboard, Rewards, Incentive)
- Notifications?
- Search Ideas
- Store and Archive Ideas
- Etc....
LUX Challenge Requirements
Application Name
- Create a simple name (JHUB, etc.)
Branding Guidelines
- Follow the provided JH _Brand Book_02r.pdf and John Hancock Logo (attached in challenge details)
~
Mobile Screen Designs
- Design Web/Mobile hybrid screens
- Web Screen size = Minimum 1280px width with height adjust as needed.
- Mobile screen size = iPhone 7 (Portrait view, 750x1334px)
- We only need 7 screens plus a presentation screen - so pick/design what you think will "showcase" your concept and user story of using the application
- In a LUX challenges your "Concepts" and how you present them is critical.
Things to think about (as a user)
- When I first open the application what should I see in the app?
- What is the priority actions or items I need to interact with?
- I quickly want react to an idea or find, submit, or view ideas.
- What are the navigation items (primary and secondary)?
- Notification tools?
- Gamification?
Suggested Application Screens
0) Application Logo and Header
- Create a simple logo for your application
- Something simple and clean that does not distract from your application design
- This is secondary requirements so do not put too much thought on this one, simple logo that blends to your overall design will work.
1) Presentation Screen - 1920x1080 (16:9 Ratio)
- In a LUX challenge, this screen is very important so make it look good!
- If you were walking into a meeting and needed to sell your idea - use this screen to showcase your concept.
- DO NOT put extra text on this screen - use it to showcase your application!
2) Dashboard (Desktop and Mobile)
- Banner: Possibly on all screens a HUB banner that contains:
- John Hancock Logo
- Notification Icon, If clicked on shows the following:
-- Notification when someone has liked an idea you submitted
-- Notification when someone has commented on an idea you submitted
-- Notification when someone commented on an idea you commented on
-- Notification when someone commented on an idea you liked
- Search bar
- Profile picture
- A leaderboard which would display the 10 most active users and their current amount of points
- The ability to quickly "Submit Ideas"
- The ability to "Browse Ideas"
- Some visual metrics which display ideas submitted, i.e. # of ideas, a category of ideas, impact area of an idea, etc.
- How does the user interact with ideas??
3) Submit Idea Screen (Mobile)
- This page would contain the following fields the user would fill out to submit an idea:
-- Name of the idea
-- Idea Owner(s) – should be able to autofill or search from a list of all users
-- Idea Description
-- What pain point, inefficiency, or other area does your idea help improve and how?
-- Idea Impact Area (who does this idea impact? Employees? Customers? IT, HR, etc)
-- Option to add thumbnail picture
-- Option to add attachment
-- "Save as draft" button
-- "Submit" button
-- A "Back" button
4) Browse Idea Screen (Desktop and Mobile)
- A list of ideas submitted, containing the following:
-- Idea Title
-- Idea Thumbnail
-- Idea Owner
-- A glimpse of the Idea Description,
-- A "Like" button
-- An icon displaying the total number of “Likes” received
-- An icon displaying the total number of “Comments” received
- A button to switch the Ideas View from Listview to Gridview
- A “Back” Button
- Sort options
-- Recent (Default)
-- Votes
-- Comments
-- In Progress
-- Complete
-- Open
- Filter options
-- Idea Impact Areas
--- Customer Experience
--- Employee Experience
--- Human Resources
--- IT Operations
--- Investments
--- Insurance
--- RPS
--- Marketing
--- Information Technology
--- Risk Management
5) View Idea Screen (Mobile)
- This is what the user would see if they click on an idea in the Browse Idea List
- Idea Title
- Idea Thumbnail
- Idea Owner
- Idea submission date
- Idea status (Open, In Progress, or Complete)
- Idea Description,
- A “Like” button
- An icon displaying the total number of “Likes” received
- A comment thread for users to enter comments
- A “Back” Button
- View attachment option (if the idea has an attachment)
6) Profile Screen (Mobile)
- This is what the user would see if the click on their profile picture on the HUB
- Their name
- Their job title
- An edit/add profile picture
- Contact Info
-- Phone #
-- Location
-- Email address
- A list of ideas they’ve submitted
- Recent activity
-- Ideas they’ve liked
-- Ideas they’ve commented on
- A “Back” Button
7) Leaderboard Screen (Desktop)
- This is what the user would see if they click on the leaderboard on the home page)
- A “Back” button
- List of Top 5 employees in the following business units
-- Human Resources
-- IT Operations
-- Investments
-- Insurance
-- RPS
-- Marketing
-- Information Technology
-- Risk Management
8) Concept Screens of your choosing
- If you have a concept or idea you want to share. You can replace an existing screen or add more screens. Remember to capture within your presentation screen.
~
Marvel App
- For this challenge - as part of your submission, you must upload your design to MarvelApp so we can provide direct and specific feedback to your designs.
- Please request a MarvelApp link from the Copilot through the challenge forum.
~
Target Audience
- John Hancock employees/contractors
Judging Criteria
- Concepts! How do you tackle simplifying this experience?
- Presentation! This is critical!
- Great modern user interface combined with good mobile usability
- Cleanliness of your graphics and design.
- Your design concepts should be possible to build and implement.
- Creativity and simplicity are the keys to success as it must be engaging to users.
Submission & Source Files
Preview Image
Create your preview image as one 1920x1080 (16:9 Ratio) JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Please upload JPG/PNG images in a zip file with all requested screen requirements stated above. Number your files (01, 02, 03, etc) this will help us to review them in order.
Source Files
All original source files of the submitted design. Files should be created using Adobe Photoshop/Illustrator/Sketch/Corel/GIMP/etc. Layers should be named and well organized.
Final Fixes
Note: This LUX could have final fixes
The "LUX - 48HR - John Hancock Innovation HUB Responsive Design Concepts Challenge" will be run during the next 48 hours. At the end of the challenge, we will take your presentation screens and share your collective creative talent with the live audience at the John Hancock Design Workshop!
The LUX Challenge Series provides you with an opportunity to show digital leaders from some of the largest brands in the world just how good your user interface and user experience (UI/UX) design skills are. LUX challenges are fast, fun, and have more chances for you to capture prize money.
Note: No previous experience in a LUX challenge is needed to compete - jump in and give it a try! Make sure to follow the challenge forum and ask questions as things move very fast throughout a LUX challenge.
The goal of this challenge is to take the provided design problem, analyze the user experience and provide design concepts and visual ideas on how the application might look and work.
Challenge Timeline and Rolling Checkpoint
- Challenge Starts: 10:00 AM EDT 05/22/17
- Rolling Checkpoint will start: 10:00 AM EDT 05/23/2017
- Challenge Ends: 10:00 AM EDT 05/24/2017
We are offering 8 Placements! Plus 8 $50 Rolling Checkpoint prizes!
1) $2000
2) $1500
3) $1000
4) $750
5) $500
6) $250
7) $150
8) $100
- Rolling Checkpoints @ $50 each for the first 8 qualified submissions.
Rolling Checkpoint Review ($50*)
Adam Morehead (adroc) will provide a design review if you submit your initial designs by (10:00 AM EST 05/23/2017)
- The first 8 qualifying* checkpoint submissions will win $50
- Within the hour, we will provide any design feedback/guidance
- You must watch the forum for your feedback!
~
Design Problem
The idea here is for an internal web/mobile application that John Hancock employees and contractors can use to submit ideas (at any time) that they think would positively impact the company. This would be a simple app which would store and archive creative ideas. Users would be able to "Like" and "Comment" on ideas to help develop/build on them. There could also be a leaderboard within the application to help incentivize employee engagement. The application's focus would be two pronged: Company improvement & Employee engagement.
Think ahead about how collaboration, innovation and sharing ideas can be working together in this application!
Design Considerations
- Download the provided brand documents
- Think of our brand and also how this should be engaging (fun) to use and collaborate in-app.
- Think about collaboration, innovation and sharing ideas that bring Positive Impact to company
- The application that is able to store and archive creative ideas and easy to find and browse ideas.
- Explore other collaboration tools and how they can work in the mobile space.
Some example features to think about
- The ability to view ideas and collaborate on them (pin them?, comment on them? Share them?)
- Brainstorming Features (Like, Comment, Rate)
- Promote Ideas?
- Gamification (Leaderboard, Rewards, Incentive)
- Notifications?
- Search Ideas
- Store and Archive Ideas
- Etc....
LUX Challenge Requirements
Application Name
- Create a simple name (JHUB, etc.)
Branding Guidelines
- Follow the provided JH _Brand Book_02r.pdf and John Hancock Logo (attached in challenge details)
~
Mobile Screen Designs
- Design Web/Mobile hybrid screens
- Web Screen size = Minimum 1280px width with height adjust as needed.
- Mobile screen size = iPhone 7 (Portrait view, 750x1334px)
- We only need 7 screens plus a presentation screen - so pick/design what you think will "showcase" your concept and user story of using the application
- In a LUX challenges your "Concepts" and how you present them is critical.
Things to think about (as a user)
- When I first open the application what should I see in the app?
- What is the priority actions or items I need to interact with?
- I quickly want react to an idea or find, submit, or view ideas.
- What are the navigation items (primary and secondary)?
- Notification tools?
- Gamification?
Suggested Application Screens
0) Application Logo and Header
- Create a simple logo for your application
- Something simple and clean that does not distract from your application design
- This is secondary requirements so do not put too much thought on this one, simple logo that blends to your overall design will work.
1) Presentation Screen - 1920x1080 (16:9 Ratio)
- In a LUX challenge, this screen is very important so make it look good!
- If you were walking into a meeting and needed to sell your idea - use this screen to showcase your concept.
- DO NOT put extra text on this screen - use it to showcase your application!
2) Dashboard (Desktop and Mobile)
- Banner: Possibly on all screens a HUB banner that contains:
- John Hancock Logo
- Notification Icon, If clicked on shows the following:
-- Notification when someone has liked an idea you submitted
-- Notification when someone has commented on an idea you submitted
-- Notification when someone commented on an idea you commented on
-- Notification when someone commented on an idea you liked
- Search bar
- Profile picture
- A leaderboard which would display the 10 most active users and their current amount of points
- The ability to quickly "Submit Ideas"
- The ability to "Browse Ideas"
- Some visual metrics which display ideas submitted, i.e. # of ideas, a category of ideas, impact area of an idea, etc.
- How does the user interact with ideas??
3) Submit Idea Screen (Mobile)
- This page would contain the following fields the user would fill out to submit an idea:
-- Name of the idea
-- Idea Owner(s) – should be able to autofill or search from a list of all users
-- Idea Description
-- What pain point, inefficiency, or other area does your idea help improve and how?
-- Idea Impact Area (who does this idea impact? Employees? Customers? IT, HR, etc)
-- Option to add thumbnail picture
-- Option to add attachment
-- "Save as draft" button
-- "Submit" button
-- A "Back" button
4) Browse Idea Screen (Desktop and Mobile)
- A list of ideas submitted, containing the following:
-- Idea Title
-- Idea Thumbnail
-- Idea Owner
-- A glimpse of the Idea Description,
-- A "Like" button
-- An icon displaying the total number of “Likes” received
-- An icon displaying the total number of “Comments” received
- A button to switch the Ideas View from Listview to Gridview
- A “Back” Button
- Sort options
-- Recent (Default)
-- Votes
-- Comments
-- In Progress
-- Complete
-- Open
- Filter options
-- Idea Impact Areas
--- Customer Experience
--- Employee Experience
--- Human Resources
--- IT Operations
--- Investments
--- Insurance
--- RPS
--- Marketing
--- Information Technology
--- Risk Management
5) View Idea Screen (Mobile)
- This is what the user would see if they click on an idea in the Browse Idea List
- Idea Title
- Idea Thumbnail
- Idea Owner
- Idea submission date
- Idea status (Open, In Progress, or Complete)
- Idea Description,
- A “Like” button
- An icon displaying the total number of “Likes” received
- A comment thread for users to enter comments
- A “Back” Button
- View attachment option (if the idea has an attachment)
6) Profile Screen (Mobile)
- This is what the user would see if the click on their profile picture on the HUB
- Their name
- Their job title
- An edit/add profile picture
- Contact Info
-- Phone #
-- Location
-- Email address
- A list of ideas they’ve submitted
- Recent activity
-- Ideas they’ve liked
-- Ideas they’ve commented on
- A “Back” Button
7) Leaderboard Screen (Desktop)
- This is what the user would see if they click on the leaderboard on the home page)
- A “Back” button
- List of Top 5 employees in the following business units
-- Human Resources
-- IT Operations
-- Investments
-- Insurance
-- RPS
-- Marketing
-- Information Technology
-- Risk Management
8) Concept Screens of your choosing
- If you have a concept or idea you want to share. You can replace an existing screen or add more screens. Remember to capture within your presentation screen.
~
Marvel App
- For this challenge - as part of your submission, you must upload your design to MarvelApp so we can provide direct and specific feedback to your designs.
- Please request a MarvelApp link from the Copilot through the challenge forum.
~
Target Audience
- John Hancock employees/contractors
Judging Criteria
- Concepts! How do you tackle simplifying this experience?
- Presentation! This is critical!
- Great modern user interface combined with good mobile usability
- Cleanliness of your graphics and design.
- Your design concepts should be possible to build and implement.
- Creativity and simplicity are the keys to success as it must be engaging to users.
Submission & Source Files
Preview Image
Create your preview image as one 1920x1080 (16:9 Ratio) JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Please upload JPG/PNG images in a zip file with all requested screen requirements stated above. Number your files (01, 02, 03, etc) this will help us to review them in order.
Source Files
All original source files of the submitted design. Files should be created using Adobe Photoshop/Illustrator/Sketch/Corel/GIMP/etc. Layers should be named and well organized.
Final Fixes
Note: This LUX could have final fixes
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.