Challenge Summary
Welcome to "Online HR Magazine Responsive Website Wireframe Challenge". In this challenge, we are looking for you to help plan a great user experience for a new online magazine. This will be an online magazine and resource center focused on workplace and talent issues, trends, and news. The purpose of this challenge is to create an intuitive (wireframe) interface and interactions to deliver a brilliant user-experience which will be a key component to making this new online magazine the authoritative voice on these issues. Please check out more details below!
At the end of this challenge, we are looking for best-in-class wireframe designs that will help us design and build the user interface for the online magazine and continue to improve the user experience in the next phase of this project – high fidelity design concepts. The best website designs will be the ones that consider the end-to-end challenge statement and the related user experience.
01. Home Page
02. Search Results Page
03. Specific Page(s) of content (News, Analysis)
04. Idea Submission, Vote & Comment Page
05. Poll Page
06. Blog Page(s)
01. Home Page
02. Search Results Page
03. Specific Page(s) of content (News, Analysis)
04. Idea Submission, Vote & Comment Page
05. Poll Page
06. Blog Page(s)
07. Profile Review / Edit Page
08. Other pages up to your discretion!
During this challenge, we would like for you to take the provided design problem, explore the user experience, and design wireframes which highlight user navigation, experience, and information flow across the online magazine.
Challenge Timeline and Checkpoint
- Challenge Starts: 20:00 EDT 09/22/2016
- Checkpoint: 10:00 EDT 09/27/2016
- Challenge Ends: 14:00 EDT 10/03/2016
We are offering an award to the top 3 designs! Plus 5 $100 Checkpoint prizes!
1) $1800
2) $650
3) $325
Checkpoint $100 each for 5 selected submissions.
Background Overview
Today, there is no "one-stop-shop" website or channel for HR (Human Resources) and Talent information. The bulk of this information is found distributed across a number of different sites and sources, including media sites - which may occasionally post or report on "HR-centric" themes; LinkedIn - which often has a high volume of posts on HR / Talent themes but is limited in quality; and other business outlets which provide limited coverage and insights. The disparate nature of these sources, lack of consistent voice, and poor curation and display across sites leads to a very poor user experience for HR / Talent managers looking to gather information.
This new online magazine strives to become the authoritative voice on HR and Talent related issues through this new website. Users should be attracted to the site by the promise of consolidated content and information, but stay because of the experience. Over time, we expect this online magazine to become THE destination for workplace trends and content, supplanting readers from the WSJ, Fast Company, NYT, and others on related topics.
Challenge Goals
Create an authoritative source of information for workforce and talent related issues. The primary goal of the site is to engage users as often and for as long as possible; therefore the magazine should continue suggesting and pushing new content as the site is browsed. This online magazine will be:
- Business focused, research-based
- Source of high quality, curated content
- Innovative, cutting-edge, and fresh
- Superior in user experience
- Advertisement-free
Target User
This challenge will focus on a target end-users who are mid-level to senior HR professionals and business managers.
- Users are predominantly 30 - 55 years old, both male and female
- The website will target English-speaking users globally, although there is potential to translate the magazine for specific languages in the future
- These users want to keep up with major trends in talent and workforce related topics. Today, they do not have a single place they can turn to for consolidated, curated content on these topics. Individuals who subscribe to this new online magazine will gain value for their own professional development and will bring their new found information / perspectives back to their employer.
- These users are mid to senior-level managers and therefore are very busy with daily tasks and job duties. They seek easy and intuitive applications that enable them to review priority topics and content quickly and take away the major points with ease. They desire an experience that seamlessly integrates with their day to day activities. Reading this magazine should become a part of their routine.
- User Needs: simplicity, information, access to key trends / research, more time
- User Frustrations: lack of time, feel frustrated by disparate sources of information today, overwhelmed by the quantity and presence of advertisements on other content / media sites today, unsure of best way to read through 5-10 sources and select top articles to spend time on
Challenge Scope
For this challenge, we are designing wireframes for the first phase of this online magazine's launch. The first phase of the magazine will contain 4 different types of content:
- News (500 word articles/graphics)
- Analysis (700-800 words articles/graphics)
- Blogs (by thought leaders, researchers, and visionaries in this space)
- Poll results and archives (single choice questions and graphic representation)
This online magazine should encourage social interaction around these features to facilitate an ongoing "stickiness" for users with the magazine. Additionally, as mentioned above the primary goal of the site is to engage users as often and for as long as possible; therefore the magazine should continue suggesting and pushing new content as other content is browsed. Although it is not relevant for this challenge, other content types such as podcasts and videos will be rolled out in later phase(s).
The key website functions for the first phase are summarized below:
- User Registration, login, & profile management: users should be able to sign-up for the online magazine, create a username, password, and profile for their subscription
- Content Organization: content is organized based on the 4 content types (in no particular order): news, analysis, blogs, and polls. Additionally, content is organized by topic and sub-topic. The 7 major topics (in no particular order) include Talent and Workforce; Talent Acquisition; Leadership & Succession; Learning & Development; Human Resources; Org, Culture & Change; Rewards.
- Site Browsing: the site should present articles to the user and suggest other similar content based on what the user has read and hot-topics for that period in time. Browsing can be done by featured content, by topic or by suggested content.
- Site Searching: Users can search for specific content. Results can be filtered by topic and author. Results can be sorted by date and relevance
- Idea Submission: Users should be able to submit, vote, and comment on ideas for content they want to see covered on the site
- Polling: site will have weekly polls which will have a short question and a single select response. Results should be displayed in a visual manner. Polls should be able to be archived and viewed by the users in a list of previous polls.
A note on the registration process:
- Users should be able to read certain content on the site without being registered
- After a user visits the site a certain number of times or has a certain number of reads, he / she will be prompted to register for the site.
- Registration should be incredibly easy and exciting. Users should have to supply minimal information as part of registration process. How would you bring the technique of gradual engagement to life for this magazine?
Suggested Screens
Below are a list of suggested screens for the online magazine. Please note that these are merely suggestions - if you can think of ways to lay out the above functionality and improve the user experience, please do.
01. Home Page
- We would like for you to build the home page for this online magazine.
- This will serve as the landing page for readers and subscribers as they navigate the online magazine.
- This homepage should be creative, modern, and enticing to readers.
- It should feature new and "hot" content (news / analysis), polls, and other key messages.
- The homepage should also serve as a gateway to the rest of the magazine's content though navigation and content suggestions.
- Suggested information to include on the homepage is:
-- Feature content (news / analysis) for the week (include headlines and intro copy, or picture)
-- Additional popular / important news / analysis from the week (include headlines, intro copy, or picture)
-- Announcements
-- The weekly poll question and summary of results to-date
-- Ability for user to Sign up / Register / Get to user profile
-- Ability to log-in
-- Other content suggestions (either tailored to user, or based on most viewed content for the week)
-- Search functions
-- Footer (About, Social Media links, etc.)
-- Navigation elements
- From the home page, users must be able to browse / navigate the site based on how content is organized. Users could be able to navigate to content based on:
-- Content Topic (the 7 major topics – in no particular order – include Talent and Workforce; Talent Acquisition; Leadership & Succession; Learning & Development; Human Resources; Org, Culture & Change; Rewards).
-- Content Type (in no particular order, News, Analysis, Blogs, Archived Polls)
-- User Search
- For browsing by topic, each major topic has affiliated sub-topics. During the first phase of the release, not all topics / sub-topics will have associated content. We will need a creative way to scale this navigation. Keep in mind that the sites navigation is critical to the success of the user experience for this online magazine. Think about how a user would want to find information and design creative navigation that creates a great user experience.
02. Search Results Page
- The search results should display results based on user search.
- Results can be filtered by topic and author, results can be sorted by date and relevance.
- Show us your creative thought for features in this search result page.
03. Specific Page(s) of content (News, Analysis)
- Once a reader selects a specific piece of content (e.g. news or analysis) from the homepage or the "browse by.." pages, he / she should be able to view the key components of that content, including but not limited to title, story content, and comments section for the story.
- What reading experience can you create that is new and different? How can this reading experience engage a large portion of the user community?
- This page should also enable the user to navigate to other related content and parts of the site. Additional features to include on this page could be:
-- "Most Read" or "Readers Also Read" sections
-- An "Announcements" panel
-- Ability to share the content via social media (LinkedIn, Twitter, Facebook, Email)
-- Ability to add the content to a Reading List
-- Any additional features you might want to include on this page. Think about what you want to do after you read a new article. Are there other navigation, content, discussion, or sharing features that could improve the way a reader reviews and digests this content?
04. Idea Submission, Vote & Comment Page
- Users should be able to submit ideas for content they would like to be covered on the site.
- Additionally, other users should be able to view, vote, and comment on the submitted ideas of others.
- How would you design this functionality? How would you organize submissions (popularity, topic, date, etc.)?
- Where should this functionality reside within the website? Is there a way to make this engaging to users?
05. Poll Archive Page
- One of the four content types is "Poll". Each poll entry should include the Polling Question, 300 word commentary on poll, and Visual summary of results.
- These polls also follow the major content topic taxonomy and are organized based on the 7 categories outlined above.
- Users should be able to view a list of all previously archived polls and their results.
- The user should be able to filter this list by date.
- What interesting graphics or visualizations can you use to display polling results?
- Are there other key metrics or details that this page could display for polling? How should this page help a user navigate to other parts of the site? For example, could there be suggested news / analysis for each poll? Please be creative here!
06. Blog Page(s)
- One of the 4 types of content for this online magazine is blogs by key thought leaders, researchers, and visionaries within the HR / Talent space.
- We are looking for you to design the main page for users to view blog entries.
- Users should also be able to view blogs by contributors / topics.
- How can you design this page or pages in a way that is user-friendly and easy to read? Is there a way to create a reading pane for blog entries? Can users comment on blogs and up-vote blogs?
07. Profile Review / Edit Page
- User can view his / her profile and edit key information.
- What key fields could you capture in a profile that might make this online magazine highly appealing to a user?
- For example - could you capture "Topics of Interest" from each user that will then enable the site to make recommendations to each user based on areas of interest?
08. Other pages up to your discretion!
- As mentioned above we are looking for wireframes that create an intuitive and seamless user experience.
- Outside of the suggested pages above - are there are any other functions or features that you would recommend to make this online magazine even more appealing and "sticky" with readers?
Things to consider for intended user:
- Why is he / she opening this website in the first place / what is he / she looking to do?
- What is the "first experience" when opening the application? What is the primary goal of the application and experience?
- What is the priority actions or items a user needs to interact with?
- Where and how will the application be used the most?
- Are there any 3rd party integration options?
Desired Brand Attributes:
- This website strives to become the "New York Times of Talent" related issues.
- The website branding and interactions should feel hard-hitting, edgy, informative, useful, insightful, and different.
- This site should have a modern look and feel.
Target Devices:
- Responsive website
- Create it for Desktop (min width 1280px) and Mobile (min width 750px)
Wireframe Expectations:
- Produce HTML click through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all screens mentioned in required sections below, if any requirement is missing in final submission the client will not look at it, so make a checklist for the required screens to make sure you designed all of them.
- Please show us your proposal as a movie or series of wireframes that communicate the user’s intended interaction with your proposed solution.
- You MUST use wireframes note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
Learn Axure:
New to Axure? Here are some quick tutorials to help you get started.
http://www.axure.com/learn
Judging Criteria
- User Experience of application.
- Completeness and accuracy of the wireframe as defined in the spec requirements.
- How well your wireframes provide a consistent user flow.
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
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.
At the end of this challenge, we are looking for best-in-class wireframe designs that will help us design and build the user interface for the online magazine and continue to improve the user experience in the next phase of this project – high fidelity design concepts. The best website designs will be the ones that consider the end-to-end challenge statement and the related user experience.
Round 1
Initial Submission for client review (Desktop)01. Home Page
02. Search Results Page
03. Specific Page(s) of content (News, Analysis)
04. Idea Submission, Vote & Comment Page
05. Poll Page
06. Blog Page(s)
Round 2
All requirements as stated in challenge details with client feedback applied (Desktop + Mobile)01. Home Page
02. Search Results Page
03. Specific Page(s) of content (News, Analysis)
04. Idea Submission, Vote & Comment Page
05. Poll Page
06. Blog Page(s)
07. Profile Review / Edit Page
08. Other pages up to your discretion!
During this challenge, we would like for you to take the provided design problem, explore the user experience, and design wireframes which highlight user navigation, experience, and information flow across the online magazine.
Challenge Timeline and Checkpoint
- Challenge Starts: 20:00 EDT 09/22/2016
- Checkpoint: 10:00 EDT 09/27/2016
- Challenge Ends: 14:00 EDT 10/03/2016
We are offering an award to the top 3 designs! Plus 5 $100 Checkpoint prizes!
1) $1800
2) $650
3) $325
Checkpoint $100 each for 5 selected submissions.
Background Overview
Today, there is no "one-stop-shop" website or channel for HR (Human Resources) and Talent information. The bulk of this information is found distributed across a number of different sites and sources, including media sites - which may occasionally post or report on "HR-centric" themes; LinkedIn - which often has a high volume of posts on HR / Talent themes but is limited in quality; and other business outlets which provide limited coverage and insights. The disparate nature of these sources, lack of consistent voice, and poor curation and display across sites leads to a very poor user experience for HR / Talent managers looking to gather information.
This new online magazine strives to become the authoritative voice on HR and Talent related issues through this new website. Users should be attracted to the site by the promise of consolidated content and information, but stay because of the experience. Over time, we expect this online magazine to become THE destination for workplace trends and content, supplanting readers from the WSJ, Fast Company, NYT, and others on related topics.
Challenge Goals
Create an authoritative source of information for workforce and talent related issues. The primary goal of the site is to engage users as often and for as long as possible; therefore the magazine should continue suggesting and pushing new content as the site is browsed. This online magazine will be:
- Business focused, research-based
- Source of high quality, curated content
- Innovative, cutting-edge, and fresh
- Superior in user experience
- Advertisement-free
Target User
This challenge will focus on a target end-users who are mid-level to senior HR professionals and business managers.
- Users are predominantly 30 - 55 years old, both male and female
- The website will target English-speaking users globally, although there is potential to translate the magazine for specific languages in the future
- These users want to keep up with major trends in talent and workforce related topics. Today, they do not have a single place they can turn to for consolidated, curated content on these topics. Individuals who subscribe to this new online magazine will gain value for their own professional development and will bring their new found information / perspectives back to their employer.
- These users are mid to senior-level managers and therefore are very busy with daily tasks and job duties. They seek easy and intuitive applications that enable them to review priority topics and content quickly and take away the major points with ease. They desire an experience that seamlessly integrates with their day to day activities. Reading this magazine should become a part of their routine.
- User Needs: simplicity, information, access to key trends / research, more time
- User Frustrations: lack of time, feel frustrated by disparate sources of information today, overwhelmed by the quantity and presence of advertisements on other content / media sites today, unsure of best way to read through 5-10 sources and select top articles to spend time on
Challenge Scope
For this challenge, we are designing wireframes for the first phase of this online magazine's launch. The first phase of the magazine will contain 4 different types of content:
- News (500 word articles/graphics)
- Analysis (700-800 words articles/graphics)
- Blogs (by thought leaders, researchers, and visionaries in this space)
- Poll results and archives (single choice questions and graphic representation)
This online magazine should encourage social interaction around these features to facilitate an ongoing "stickiness" for users with the magazine. Additionally, as mentioned above the primary goal of the site is to engage users as often and for as long as possible; therefore the magazine should continue suggesting and pushing new content as other content is browsed. Although it is not relevant for this challenge, other content types such as podcasts and videos will be rolled out in later phase(s).
The key website functions for the first phase are summarized below:
- User Registration, login, & profile management: users should be able to sign-up for the online magazine, create a username, password, and profile for their subscription
- Content Organization: content is organized based on the 4 content types (in no particular order): news, analysis, blogs, and polls. Additionally, content is organized by topic and sub-topic. The 7 major topics (in no particular order) include Talent and Workforce; Talent Acquisition; Leadership & Succession; Learning & Development; Human Resources; Org, Culture & Change; Rewards.
- Site Browsing: the site should present articles to the user and suggest other similar content based on what the user has read and hot-topics for that period in time. Browsing can be done by featured content, by topic or by suggested content.
- Site Searching: Users can search for specific content. Results can be filtered by topic and author. Results can be sorted by date and relevance
- Idea Submission: Users should be able to submit, vote, and comment on ideas for content they want to see covered on the site
- Polling: site will have weekly polls which will have a short question and a single select response. Results should be displayed in a visual manner. Polls should be able to be archived and viewed by the users in a list of previous polls.
A note on the registration process:
- Users should be able to read certain content on the site without being registered
- After a user visits the site a certain number of times or has a certain number of reads, he / she will be prompted to register for the site.
- Registration should be incredibly easy and exciting. Users should have to supply minimal information as part of registration process. How would you bring the technique of gradual engagement to life for this magazine?
Suggested Screens
Below are a list of suggested screens for the online magazine. Please note that these are merely suggestions - if you can think of ways to lay out the above functionality and improve the user experience, please do.
01. Home Page
- We would like for you to build the home page for this online magazine.
- This will serve as the landing page for readers and subscribers as they navigate the online magazine.
- This homepage should be creative, modern, and enticing to readers.
- It should feature new and "hot" content (news / analysis), polls, and other key messages.
- The homepage should also serve as a gateway to the rest of the magazine's content though navigation and content suggestions.
- Suggested information to include on the homepage is:
-- Feature content (news / analysis) for the week (include headlines and intro copy, or picture)
-- Additional popular / important news / analysis from the week (include headlines, intro copy, or picture)
-- Announcements
-- The weekly poll question and summary of results to-date
-- Ability for user to Sign up / Register / Get to user profile
-- Ability to log-in
-- Other content suggestions (either tailored to user, or based on most viewed content for the week)
-- Search functions
-- Footer (About, Social Media links, etc.)
-- Navigation elements
- From the home page, users must be able to browse / navigate the site based on how content is organized. Users could be able to navigate to content based on:
-- Content Topic (the 7 major topics – in no particular order – include Talent and Workforce; Talent Acquisition; Leadership & Succession; Learning & Development; Human Resources; Org, Culture & Change; Rewards).
-- Content Type (in no particular order, News, Analysis, Blogs, Archived Polls)
-- User Search
- For browsing by topic, each major topic has affiliated sub-topics. During the first phase of the release, not all topics / sub-topics will have associated content. We will need a creative way to scale this navigation. Keep in mind that the sites navigation is critical to the success of the user experience for this online magazine. Think about how a user would want to find information and design creative navigation that creates a great user experience.
02. Search Results Page
- The search results should display results based on user search.
- Results can be filtered by topic and author, results can be sorted by date and relevance.
- Show us your creative thought for features in this search result page.
03. Specific Page(s) of content (News, Analysis)
- Once a reader selects a specific piece of content (e.g. news or analysis) from the homepage or the "browse by.." pages, he / she should be able to view the key components of that content, including but not limited to title, story content, and comments section for the story.
- What reading experience can you create that is new and different? How can this reading experience engage a large portion of the user community?
- This page should also enable the user to navigate to other related content and parts of the site. Additional features to include on this page could be:
-- "Most Read" or "Readers Also Read" sections
-- An "Announcements" panel
-- Ability to share the content via social media (LinkedIn, Twitter, Facebook, Email)
-- Ability to add the content to a Reading List
-- Any additional features you might want to include on this page. Think about what you want to do after you read a new article. Are there other navigation, content, discussion, or sharing features that could improve the way a reader reviews and digests this content?
04. Idea Submission, Vote & Comment Page
- Users should be able to submit ideas for content they would like to be covered on the site.
- Additionally, other users should be able to view, vote, and comment on the submitted ideas of others.
- How would you design this functionality? How would you organize submissions (popularity, topic, date, etc.)?
- Where should this functionality reside within the website? Is there a way to make this engaging to users?
05. Poll Archive Page
- One of the four content types is "Poll". Each poll entry should include the Polling Question, 300 word commentary on poll, and Visual summary of results.
- These polls also follow the major content topic taxonomy and are organized based on the 7 categories outlined above.
- Users should be able to view a list of all previously archived polls and their results.
- The user should be able to filter this list by date.
- What interesting graphics or visualizations can you use to display polling results?
- Are there other key metrics or details that this page could display for polling? How should this page help a user navigate to other parts of the site? For example, could there be suggested news / analysis for each poll? Please be creative here!
06. Blog Page(s)
- One of the 4 types of content for this online magazine is blogs by key thought leaders, researchers, and visionaries within the HR / Talent space.
- We are looking for you to design the main page for users to view blog entries.
- Users should also be able to view blogs by contributors / topics.
- How can you design this page or pages in a way that is user-friendly and easy to read? Is there a way to create a reading pane for blog entries? Can users comment on blogs and up-vote blogs?
07. Profile Review / Edit Page
- User can view his / her profile and edit key information.
- What key fields could you capture in a profile that might make this online magazine highly appealing to a user?
- For example - could you capture "Topics of Interest" from each user that will then enable the site to make recommendations to each user based on areas of interest?
08. Other pages up to your discretion!
- As mentioned above we are looking for wireframes that create an intuitive and seamless user experience.
- Outside of the suggested pages above - are there are any other functions or features that you would recommend to make this online magazine even more appealing and "sticky" with readers?
Things to consider for intended user:
- Why is he / she opening this website in the first place / what is he / she looking to do?
- What is the "first experience" when opening the application? What is the primary goal of the application and experience?
- What is the priority actions or items a user needs to interact with?
- Where and how will the application be used the most?
- Are there any 3rd party integration options?
Desired Brand Attributes:
- This website strives to become the "New York Times of Talent" related issues.
- The website branding and interactions should feel hard-hitting, edgy, informative, useful, insightful, and different.
- This site should have a modern look and feel.
Target Devices:
- Responsive website
- Create it for Desktop (min width 1280px) and Mobile (min width 750px)
Wireframe Expectations:
- Produce HTML click through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all screens mentioned in required sections below, if any requirement is missing in final submission the client will not look at it, so make a checklist for the required screens to make sure you designed all of them.
- Please show us your proposal as a movie or series of wireframes that communicate the user’s intended interaction with your proposed solution.
- You MUST use wireframes note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
Learn Axure:
New to Axure? Here are some quick tutorials to help you get started.
http://www.axure.com/learn
Judging Criteria
- User Experience of application.
- Completeness and accuracy of the wireframe as defined in the spec requirements.
- How well your wireframes provide a consistent user flow.
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
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.
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.