Challenge Summary
At the end of this challenge, we are looking for best-in-class designs that will help us build the user interface for the online magazine. The best website designs will be the ones that consider the end-to-end challenge statement and the related user experience.
Round 1
Initial design for client review (desktop & mobile):01. Home Page
03. News Page
03a. News Detail
07. Polls
08. Opinion
Round 2
All screen requirements like stated in challenge details with client feedback applied (desktop and mobile):01. Home Page
02. Search Results Page
03. News Page
03a. News Detail
04. Analysis
04a. Analysis Detail
05 Profile
06 Idea Submission
07 Polls
08. Opinion
08a. Opinion Detail
During this challenge, we would like for you to take the provided design problem, explore the wireframes which highlight user navigation, experience, and information flow across the online magazine, and design a beautiful, visually appealing user interface for this online magazine.
Challenge Timeline and Checkpoint
- Challenge Starts: 12:00 EDT 10/27/2016
- Checkpoint: 12:00 EDT 11/01/2016
- Challenge Ends: 13:00 EDT 11/07/2016
We are offering an award to the top 3 designs! Plus 5 $125 Checkpoint prizes!
1) $1900
2) $700
3) $350
Checkpoint $125 each for 5 selected submissions.
Background Overview
Today, there is no "one-stop-shop" website or channel for HR 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.
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
Challenge Goals
- For this challenge, we would like for you to focus on the interface and visual design for this responsive website – how does a user interact with this online magazine? What mechanisms can you employ to create a beautiful interaction?
- Promote readability through use of typography and white space
- Be obvious and intuitive
- Be consistent both throughout the interface and with external patterns / conventions
- Be clear - with distinct and easily understood, non-ambiguous messages and labels
- Emphasize the most important elements and minimize clutter
- Focus on creating scalable layouts for fully responsive website (this site will often be read on mobile / tablets instead of desktops)
Target User
- This challenge will focus on 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.
Challenge Scope
For this challenge, we are designing design concepts 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-750 word articles/graphics.
- Analysis - 1000-2000 words articles/graphics written by the magazine's leadership team and contributors. These will be written on various topics and trends in the HR space, such as Talent Acquisition, Leadership & Development, Company Culture, etc.
- Opinion - These blogs are written by thought leaders, researchers, and visionaries in this space and will be posted on either a weekly or monthly basis.
- Poll results and archives - Site will have a weekly or bi-weekly poll 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.
Existing Artifacts
Wireframes
- We recently ran a wireframe challenge through Topcoder and have a great starting point for the content, information architecture and navigation of this site.
- It is important to note that these wireframes are merely a baseline. We have several new requirements we would like you to address which are described below.
- Additionally, we are excited to see the new and creative ideas that you bring to the table for this online magazine.
- Please note that this site needs to be fully responsive. As you review the wireframes please consider how you can account for responsive design in your visual designs.
- You will find the desktop and mobile wireframes in the files attached.
Screen Requirements
Below are a list of the screens for the online magazine and the requirements for this design concepts challenge:
01. Home Page
- We would like for you to design the visual layer for the home page for this online magazine. This will serve as the landing page for readers and subscribers as they navigate the site. This homepage should be creative, modern, and enticing to readers. It features new and “hot” content (news / analysis), open polls, opinion content, and announcements.
- As you design the interface, please consider the wireframes as a baseline for your layout, but there is no need that you adhere completely to these.
- One thing to consider is that the client may not have access to a wealth of stock photography or illustrations. With this in mind, how would you suggest the client uses imagery (e.g. for every article on the site?, only for analysis content?, for random content?, rotate custom illustrations?, other?). The current wireframes are quite reliant on imagery and we are very excited to see your ideas for how you design this site so that it still has a similar layout and visual hierarchy, but is less reliant on imagery. Please feel free to elaborate on your recommendation in the notes file.
- Additional requirement – please incorporate a link or button in the header of the homepage that a user will click to sign up for a weekly digest newsletter. The user will need to enter their email address and potentially answer a small number of demographic questions (e.g. Occupation, Industry, Title) to sign up to receive this newsletter.
02. Search Results Page
- The search results should display results based on user search. Results can be filtered by author, content type, and publication date. We are looking for you to design a filter that does not take up significant screen space (perhaps collapsible). We also would like for this filter to be friendly for both mobile and desktop form factors.
- Please refer to wireframes for layout / IA guidance, but do not feel the need to adhere directly.
03. News Page
- We would like for you to design the visual layer for this News page which will supply an overview of all News on the site.
- This page should be creative, modern, and enticing to readers. The goal of this page is for a user to be able to view and browse different news content on the site.
- As you design the interface, please consider the wireframes as a baseline for your layout, but be creative and design the best content browsing experience possible.
- How would you layout this page to create a clean browsing experience for a user?
- We like the idea of including filters to do this (if they are unobtrusive), but we dont love the way the filter is implemented in the wires as it leaves a lot of whitespace when it is collapsed.
- Similar to the homepage, how can you remove some of the reliance on imagery in the wireframes?
- We are looking for your creativity and design experience on this page!
03a. News Detail
- Once a reader selects a specific piece of news from the homepage or the News page, he / she should be able to view content detail, including but not limited to title, story content, and comments section for the story.
- How can you design this page so that you do not overwhelm the reader with content?
- We want this page to be completely focused on the reading experience. It should use typography and white space to establish clear hierarchy and readability.
- Use the wires as a starting point and feel free to add other details or interactions where you feel they make sense.
- We love the sticky social media icons suggested in the wires for this page!
04. Analysis
- We would like for you to design the visual layer for this Analysis page which will supply an overview of all Analysis on the site.
- This page should be visually consistent with your design of the “03 News Page” and have a similar layout / look / feel.
04a. Analysis Detail
- Once a reader selects a specific piece of analysis from the homepage or the Analysis overview page, 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.
- How can you design this page so that you do not overwhelm the reader with content?
- Please note that Analysis pieces are 1000 – 2000 words in length and much longer than the news content – how might you break this up?
- Similar to the news, we want this page to be completely focused on the reading experience. It should use typography and white space to establish clear hierarchy and readability.
- Use the wires as a starting point and feel free to add other details or interactions where you feel they make sense.
- We love the sticky social media icons suggested in the wires for this page!
05. Profile Review / Edit
- User can view his / her profile, edit key information, and manage their subscription.
- A user should also be able to access their reading list, comments, and submitted ideas from this page.
- Feel free to use the wires as a starting point.
06. Idea Submission
- 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 and vote on the submitted ideas of others. How would you design this functionality?
- Please use wires as a starting point to design your interface.
07. Polls
- Users should be able to view and vote in the open poll.
- Users should also be able to view the list of archived polls and their results. Each poll entry should include the Polling Question, 300 word commentary on poll, and a visual summary of results.
- What interesting graphics or visualizations can you use to display results for each of the polls?
- We would like to generate some strong visual interest on this page and encourage users to participate in poll.
- In the wires you will see thumbnails or image placeholders for each of the polls, we would like for these to be thumbnails or snapshots of the poll results. What’s the best way to design this?
08 / 08a Opinion / Opinion Detail
- One of the 4 types of content for this online magazine is Opinion, which is essentially a blog by key thought leaders, researchers, and visionaries within the HR / Talent space.
- ***NOTE***: Please note that we would like for you to redesign this page and create a different layout than is suggested in the wireframes.
- This page should be designed like a blog. This should not feel the same way that a news / analysis article feels.
- Think about how do you browse and read blog entries and design a great browsing experience for this page.
- This page should be creative, modern, and enticing to readers.
- Keep in mind that there will not be images or illustrations associated with each Opinion entry.
Things to consider as you design:
- How can you make this incredibly appealing visually?
- Where is the right place to use images vs. text considering the client illustration / image constraints?
- How can you design interface elements that play well in a fully responsive website (e.g. layouts, fluid elements, avoid dropdowns)?
- How can you design the visual layer in a way that does not overwhelm the user with content?
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Design Inspiration
1. http://alistapart.com/
- Why we like it: this is a simple site. We like that it feels clean and content-focused, despite the prevalence of text. There is a clear visual hierarchy on each of the pages, established by typography and font hierarchy. The clear attention to typography on this site makes the content incredibly readable and authoritative.
- What we don't like: although we like that this manages to be clean and crisp without images or color, we do find it to be a little dull. We are looking for a good balance in our site that will be attractive and visually appealing, without having a high quantity of images.
2. http://www.newyorker.com/
- Why we like it: this site is beautiful. We like the balance of imagery and text and the variety in sizing. We love the specific content pages of this site (e.g. http://www.newyorker.com/culture/culture-desk/getting-close-to-fascism-with-sinclair-lewiss-it-cant-happen-here). These content pages are solely focused on the content and create an elegant reading experience. We like the overall style of this site and its minimalism. The overall design is clean and structured – enabling the content to stand out and speak for itself.
Look and feel
The goal of this website is to be the "authoritative" voice in HR and Talent content. Therefore this website should give the user a sense of trust and confidence. Key words that we would like to hear users say after visiting our site:
- Authoritative
- High-quality
- Content-focused and content-driven
- Professional
- Elegant
- Clean
Branding Requirements
- See attached style guide documentation. Please be sure to design an interface that is compliant with these standards.
Screen Size
Desktop: 1280 px width with height adjusting accordingly
Mobile: 750 x 1334 px (height can be adjusted)
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Completeness and accuracy of the designs.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Stock Artwork Policies
You can only use stockphoto in this challenge, stock icons not allowed for this challenge.
- 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
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
Please provide all original source files of the submitted design. Files should be created in Adobe Photoshop (layered PSD file) or Adobe Illustrator (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.
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.