BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to REPOST - WOOL Magazine Responsive Website Design Challenge.

We need your help to come up with a brand new design for the WOOL magazine responsive website (by Wipro). We are looking forward to seeing out of the box concepts that improve the user experience, specifically the online reading experience of the magazine, as well as increasing the branding presence and social engagement.

Best of luck.

Round 1

Submit your design for a checkpoint feedback.

1. Homepage (Desktop and Phone)
2.1. WIB Main page (Desktop and Phone)
2.2. Events Details (Desktop)
3. Interviews/Articles(Desktop - one single  layout)
5.2. Previous Edition Details (ToC)

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

Round 2

Submit your final design plus checkpoint feedback.

1. Homepage (Desktop and Phone)
2.1. WIB Main page (Desktop and Phone)
2.2. Events Details (Desktop and Phone)
2.3. Event Details page after event finished (Desktop and Phone)
3. Interviews/Articles (Desktop and Phone - all three unique layouts)
4.1. Trends Listing (Desktop and Phone)
4.2. Trends Details (Desktop and Phone - all three unique layouts)
5.1. Editions Listing (Desktop and Phone)
5.2. Previous Edition Details (ToC) (Desktop and Phone)

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

The goal of this challenge is to design the look and feel of a website for the WOOL magazine. You are provided with the existing website, branding information, features and suggestions to get started.


WOOL Magazine Overview

WOOL is a quarterly thought leadership magazine which publishes original content at the intersection of technology, design and business in the different formats – including interviews with and guest contributions from industry leaders and influencers. WOOL maintains a forward looking stance in its writing, which is independent of Wipro’s point of view or services.

WOOL comes in both print and online versions. This brief is specifically for the design of online version of WOOL. The print version is currently published once in 4 months and has 6-8 articles. For the online version, in addition to providing the digital version of print issues, we also intend to add digital only content on a more frequent basis (at least once in 2 weeks).


Project & Design Goals
We are looking for a new website design of the magazine that creates an engaging online reading experience, in line with some of the leading publications which provide premium content to a similar audience.

Other basic features required for the success of the design include (open to suggestions):

  • Browsing the latest issue, previous issues.

  • Searching for content by various themes, formats, tags

  • Social engagement: sharing and liking the content, signing up for newsletters or alerts, etc.


 

The design should be inline with the following goals:

  • Create an engaging reading experience for online audiences (increase time spent in reading articles).

  • Lift brand perception as a premium source of thought leadership content delivered in a convenient format.

  • Build loyalty, credibility and virality.

 

Important! Things we learned during the repost process that you should seriously follow for this  competition:

  • We do not want boxy designs (avoid squared shapes).

  • We do not want corporate designs. We do love the white spacing but design should be creative.

  • We like splashes of creativity, well used colors, playful shapes, chic aesthetics, eye-catching backgrounds.

  • We do not want you to copy or take any inspiration at all (layout/design wise) from our current website. Forget about that.

  • We REALLY like the references we provided. Take inspiration out of those.

  • Wipro logo should no appear in the design.

  • Wipro guidelines must not be used at all. Consider this a brand new side project.

  • Visually, we’re looking forward to seeing a dynamic modern website with minor micro-animations. Very well spaced, clean, vivid and fun. Avoid cluttered looking layouts. Information must breath and be easy/fun to read.

 

Supporting Documentation

https://drive.google.com/open?id=1bZOQXISKXCLRjrBqrvufQFNnrh9C6Cow

1. Branding: contains WOOL logo files.

2. Magazine Issues: previous editions of the magazine (PDF/print version).

 

Screens Requirements
Overall

  • Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.

  • Please suggest how to organize this content and group them into screens, we are looking forward to see your unique proposals, be bold.

  • Propose a navigation system that makes sense and considers all the required features below. You should consider the following items for navigation:

    • Home

    • Issue 7.0

    • Previous Editions

    • Women In Business

    • About WOOL

    • Articles

    • Videos

    • Trends

  • Please provide font options for the headline and body text. Headline font can be played around with but the body text for interviews should remain constant.

 

1. Homepage (Desktop and Phone)

A very important page! In most of the cases, user lands on this page first time. We need to capture his/her attention, providing a smooth reading and browsing experience of the available issues and articles/videos. The purpose of the homepage (first-fold) is to act as a showcase for the big interviews that the magazine is featuring.

 

This page should contain at least (open to suggestions, be bold!):

  • Combination of articles from previous and current editions but almost always has a featured story from the current edition, prominently featured.

  • Featured stories

    • Each story should have:

      • Thumbnail

      • Title

      • Issue

      • Brief

  • Women in Business

    • This is a brief condensed overview of the WIB section (see requirement #2 below).

    • Besides any reference to Women in Business, make sure to display three (3) video items, they will link to a separate mini site (WIB).

      • Thumbnail.

      • Brief.

      • Read more link.

  • WOOL Videos

    • Display video items, these belong to the WOOL website production, they should be reproduced in our website.

      • Thumbnail.

      • Duration.

      • Brief.

      • Read more link.

  • Trends

  • Social Connect (live social stream): latest tweets, Instagram photos, etc.

 

2. Women In Business Section (Desktop and Phone)

The most important page/section! This is a separate section of the website. You can think of it as a mini site contained in the WOOL Magazine website. Users would land on this page from links in the home page, shared links, ads, and so on. This section will primarily feature a women in business (WIB) video series with a WIB events section within the same webpage. Video interviews with high achieving business and technology women leaders which inspire a diverse and inclusive talent strategy. The series will explore a broad range of topics with these thought leaders – from their personal stories, business and technology visions and opinions on a spectrum of relevant issues.

 

This section should be unique on its own way. It shouldn't include the same overall heading/navigation than the new WOOL website design. It's possible to include the WOOL by Wipro logo but maybe in a minor prominence compared to the magazine website, in fact, this section could benefit of having its own identification brand (logo/headline, slightly different colors, etc).

 

This section should contain at least three pages (or whichever mechanism you decide to use to display all the required content).

 

2.1. WIB Main page

This is the landing of the Women In Business section. It should display an overview of what this section is about, prominent photography and brief. Normally, we are having an announcement made by an important feminine figure in business, you could some sort of photo of a woman talking plus the brief below (20-30 paragraphs).

 

Videos

Display prominent video interviews that users are able to reproduce. There could be between 3-6 videos that scroll horizontally.

 

Each video should contain title, duration and play features.

 

Events

WIB will be discussed in different live events. Display a visually enticing list or grid of events. Each event should contain:

  • Photo thumbnail.

  • Title.

  • Place.

  • Date.

  • Time.

  • Read more link.

 

2.2. Events Details

User is able to see specific details from a selected event. This page should contain all the details in a more visual way, take advantage of the space to make these details bold and engaging.

 

2.3. Event Details page after event finished

Design a case of the events details page tailored for the scenario after this event finished. It should display photographs of the event, maybe some stats (amount of visitors, etc). Open to suggestions.

 

3. Interviews/Articles(Desktop and Phone)

User should be able to see a prominent details view of articles. List page is not needed, just details view.

 

User should be able to search for articles through tags, title, etc. It can be either global search or only available in the articles page, up to you.

 

The article details view will feature:

  • A portrait image (use a portrait photo as sample).

  • Headline.

  • Summary

  • Body: text, photos, videos.

 

Design three (3) unique templates for this page (same content - different layouts) which will be used on a rotational basis.

 

4. Trends (Desktop and Phone)

All the 4 trends are currently being featured on the home page can be used as sample.

 

WOOL curates 4 technology & business trends each quarter. They have a separate fold on the homepage, with each trend leading to a separate webpage which describes that particular trend in greater detail. The homepage only has a couple of lines worth of information for each of the trends.

 

4.1. Trends Listing
Display a list/grid to allow the user browsing the available trends of the moment.

4.2. Trends Details

Full details view of a selected trend. Create a prominent page with full details of a trend. Layout of trends MUST BE DIFFERENT than articles details page.

Design three (3) unique templates for this page (same content - different layouts) which will be used on a rotational basis.

 

5. Previous Editions (Desktop and Phone)

Magazine thumbnails for each edition which lead to an overview/ ToC (table of content) for that particular edition.

 

5.1. Editions Listing

Display a mechanism to browse previous editions of the magazine. User should be able to see prominent covers of previous magazines, release date and issue number.

 

5.2. Previous Edition Details (ToC)

Once the user clicks on a previous edition they should see the table of contents of that issue. Design a ToC with dummy content or take content from the provided issues in the drive folder.

 

User should be able to see all the articles (index) and click on them to open details views of those articles. Something similar to this but of course inline with your design.

 

Note that maybe listing and details view could be somehow merged for this one. Up to you consideration.

 


Branding Guidelines

  • Use logo provided in the resources folder.

  • Branding colors and typography is open to suggestion as long as they are inline with the design goals. It’s fine to take inspiration from the print issues, or not, as per your judgement.

  • Adjectives we identify the WOOL brand with - cool, trendy, chic, dynamic.

  • WOOL branding is independent from Wipro branding, do not bring anything from Wipro guidelines into this project.

  • Keep things consistent. This means all graphic styles should work together.

 

References

Use the following sites as inspiration. DO NOT COPY anything. We love the bold personality, micro-animations and would like you to consider that in your design, as well as unique layouts!

 

Screen Specifications

  • Desktop: 1366px width. Height as much as needed.

  • Mobile: 750px width. Height as much as needed.

  • Make sure your work is in a vector format, for retina scaling and high fidelity.

 

MarvelApp Presentation

  • Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30073601

  • Do not use the forums to request for MarvelApp.

  • Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.

  • Provide the MarvelApp shareable link in your notes during submission upload. See example.

 

Stock Artwork (Illustrations, Icons, Photography)

  • Stock artwork is allowed for this challenge.

  • You can use stock from the WOOL magazine website.

  • Make sure to declare all your assets properly or you might fail screening.

  • You don’t want to fail screening? Read this.



Target User
WOOL’s print issue is distributed to CXOs of global enterprises – the core audience it addresses. WOOL’s online version is open access and is promoted to a much wider audience, including IT and Business decision, 160,000 employees of Wipro across the world and potential employees.

 

Judging Criteria

  • How well you plan the user experience and capture your ideas visually.

  • Are mobile-first principles properly applied to your solution?

  • Cleanliness of your graphics and design.

  • Creativity and ease-of-use is key to the success as it must be engaging to users.

 


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
All original source files of the submitted design. Files should be created in Adobe Photoshop, Adobe XD or Sketch. Layers should be named and well organized.

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

Topcoder Open 2019

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • Sketch
  • Adobe XD

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30073601