Challenge Summary
Welcome to Topcoder Website UX Redesign - Competitions Listing Concept Design Challenge!
We’re looking to improve the UX of Topcoder and build a better experience for exploring challenges/matches and searching the site. We want your help to better understand what needs to be improved and come up with ideas regarding the best UX.
Plus, it’s an opportunity to learn a new design tool, Sketch. It’s not mandatory, however we’re starting to introduce this tool as an option to the regular tools we’ve been using.
Round 1
For your Round One please deliver the following screens.
1) Challenges (Desktop and Mobile Views)
2) SRMs (Desktop View)
3) Marathon Matches (Desktop View)
4) My Challenges (Desktop View)
5) Document (TXT/PNG) explaining the problems you identified.
Round 2
For your Final Round please deliver the following screens plus applied feedback from checkpoint (ALL VIEWS).
1) Challenges
2) SRMs
3) Marathon Matches
4) My Challenges
5) Document (TXT/PNG) explaining the problems you identified.
We are in the process of redesigning the Topcoder website to improve the user experience. The goal of this concept challenge is to research the existing design, build an understanding of the current UX problems, and come up with concepts for the challenge listing page (responsive, desktop and mobile).
It’s very important to consider all of the user scenarios, research the existing TC site, and identify what’s not working at the moment.
Branding Guidelines
- Look at the following screens for general idea what the UI direction should be. Try to design a better experience, feel free to explore colors, typography and layout.
- Try to create a clean, utilitarian design.
- Keep it simple and subtle, yet expressive.
- Visibility of elements and text need to use contrast and color wisely.
- Explore typography that is readable at small text size, and rich text density.
Dimensions
- Desktop: 1280px wide. Think about the screen limit and how design should fit (at 1024 for example). Designing at overly large scale can be tricky. Think about responsiveness.
- Mobile: 320px wide. Height as much as needed.
User Scenarios
- New Users
-- Find challenges or matches in my areas of interest.
-- Quickly identify what type of challenges match my skills and my interest.
- Existing users
-- Identify which challenges I should focus on next.
-- Sort and filter challenges to match my skills, interests.
-- Find upcoming matches in which I should participate.
-- Find solutions to past problems.
- Customers (potential and existing)
-- Find challenges being run by my company
-- Find challenges in the technology areas I care about.
Key Requirements
- Browse website and identify critical information about challenges. What do users care about the most when exploring challenges?
- Insight on what’s not working and how we can fix it.
- How to improve the UX for ALL THE USERS, not just one group. This is SUPER important!
- Show us the states of the critical components you identified
Design Problems
- Filtering and sorting of challenge and match listings.
- Identify key items to be filtered, which parameters do we get rid off? What do we add to make it useful?
-- Think about the information presented for different stages of a challenge. What is important for the user to see for upcoming challenges, current challenges, past challenges, challenges I’ve registered for? How can we help the user quickly scan through the list? What are they looking for?
-- What sorting options should be there considering the user needs?
-- Which is the optimal layout of challenge lists?
- All target users should be able to see and find challenges they’re interested in.
- Organization of types of challenges and matches on the site. Design, Development, Data Science (including MMs), SRMs. How do we group them? How can we organize them? Tabs? Pages.
- Saving tools that help the user keep tracks of their usual types of filters.
Prototypes
We created a general InVision prototype that captures the kind of ideas we’re looking for. Please review it for your design inspiration, but don’t feel forced to follow the prototype. Use it as a guide around the basic thinking, not as a template you have to evolve. Try to be creative!
Navigation & search, IA: https://invis.io/T357RQHZM
Advanced filters: https://invis.io/7W5CC839J
Save filters: https://invis.io/J45BUZZYB
Case Scenarios
- I just registered as a Topcoder member and go to the compete section. I want to see listings of challenges or matches that match the skills I have or want to develop.
- I organize my graphic design challenges listing page by the closest ending date, making sure I can join before the checkpoint phase ends.
- I take a number of factors into account when deciding whether to register for a challenge. I want to be able to sort by criteria such as time left, prize, and registered users.
- I want to develop my skills in AngularJS and so filter current and upcoming challenges by that keyword and then save that filter; it’s also helpful for me to filter by “my challenges” (challenges for which I’ve registered).
- I want to be able to save the filters I most frequently use in a way that would be easy for me to scan through them quickly, so I can spot the difference between the filtered listings.
- As a rookie or experienced member, I want to see recommendations for challenges or matches.
Design Requirements
- Before jumping to graphic design, please go carefully through the design problem, which is the focus of this challenge.
- If you identify other pages that need to be created, feel free to add them.
- You are encouraged to reorganize this proposal. This is what it is, an initial proposal.
- You are encouraged to deliver the amount of screens you require to expose your proposal and to cover meaningful case scenarios you can come with that considers all of the users.
- Provide a list of all problems you identify. As a text file, PNG screen or Google doc.
1) Challenges
- See this screen for reference. Notice there is an “Advanced view” which shows the typical table view.
- Here we have development and graphic design challenges. Should they be grouped or separated?
- Develop ideas on challenge types of view, list or grid views.
- Filters are an important part of the challenge page. What are the exact filter and sort options? Think about the priority for each parameter, which parameters should be shown; you have total freedom to come up with the best user experience.
- What info is displayed in the listings for each challenge? What are the differences in "advanced" (grid) vs. regular view.
- Challenge details page is not required on this challenge.
2) SRMs
- Develop ideas on interesting SRMs visualization.
- Should filters be used on this page? What suggestions can you offer to make it a useful page for persons who want to see competitive programming matches information?
- What kind of information should be presented? What data for each SRM? Consider both past SRMs and upcoming ones.
- We’re placing them separate, however after your wise evaluation you can suggest a merging if possible maybe?
3) Marathon Matches
- Should Marathon Matches be in a completely separate tab/panel, grouped with SRMs, or under the Data Science track?
- Think about the interesting data that we should offer.
4) My challenges
- See this flow for adding a filter reference.
- Initial idea of a personal area for grouping challenges I’m interested in.
- Basically, users would associate challenges according to certain criteria and they would appear here. This is an idea, if you come up with something else you can suggest it please. If you consider it won’t be necessary because it doesn’t have much usability you can remove it and offer something else.
Judging Criteria
- Design thinking: Did the solution solves the problems?
- Originality.
- Creativity.
Submission File
All requested challenge requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Sketch and saved as layered files respectively.
Preview Image
Create a 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
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.