Challenge Summary
Welcome to Topcoder Website UX Redesign - Topcoder Website UX Redesign - Search and Navigation 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) Search Overall Results (Desktop and Mobile views)
3) Members Search Results by Skills (Desktop and Mobile views)
4) Members Search Results by Name (Desktop view)
5) Pages Search Results (Desktop view)
6) Quick Search Bar (Desktop view)
7) 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) Search Overall Results
3) Members Search Results by Skills
4) Members Search Results by Name
5) Pages Search Results
6) Quick Search Bar
7) 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 Search and Listings sections (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 HD: 1366px 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
-- Understand what’s happening on Topcoder and the kind of things I can do.
-- Find challenges or matches in my areas of interest.
-- Find other members and learn more about them.
- 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.
-- Find other members and learn more about them.
-- Find content related to my areas of interest.
- Customers (potential and existing)
-- What type of work is done on Topcoder and by whom?
-- Has Topcoder done work in my area of technological need?
-- Are there members who have the type of expertise I need?
Key Requirements
- Browse website and identify critical information. What do users care about the most when browsing listings and searching?
- 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
- All target users should be able to search for content in the same UI component and results/listing.
How search is integrated with the main navigation of the website.
-- Think about the best position of the search component.
-- How and where should the navigation be placed? Consider sub-navigation as well.
- How to perform search for the different type of content that could exist in the entire Topcoder domain.
-- Challenges
-- Members
-- Keywords (Member skills or challenge technologies)
- Pages: blog content, community stories, tutorials, forums, and many others - browse the site!
- Events
- How search (global search component) is reflected within the existing challenge listings page (with filters).
- Filtering the challenge listing (part 2) is very closely reflected to Search.
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
Case Scenarios
- I’m a new member interested in learning JavaScript and want to see what kind of work and resources Topcoder has in this area. I search for “JavaScript” in the quick search bar, and see info across the many categories of Topcoder, including challenges, members, and content pages.
- Similarly, I could be a new customer looking to understand Topcoder’s expertise in JavaScript.
- I’m a competitive programmer and want to browse upcoming SRMs, so that I know when to register and compete.
- I’m an experienced designer that works on Topcoder full time. I’m continually checking the challenge listings to plan my time. I want to be able to quickly tell: when there are new challenges, whether I should compete in a challenge, whether a deadline is coming up in a challenge for which I’ve registered.
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) Search Overall Results
- See this screen for reference.
- Think about the page goal? What’s the best way to display such amount of information here considering the different type of info.
- There should be a way also to get to the other types of information (challenges, member, etc). Sub navigation maybe?.
2) Challenges Search Results
- See this screen for reference.
- Focus on the highlights of a challenge listing page according to the provided search criteria.
3) Members Search Results by Skills
- See this screen for reference.
- User should be able to find members by skills. Let’s say I want to find users who has experience with Flash. How do you show this information?
4) Members Search Results by Name
- See this screen for reference.
- As you can see, this is the same InVision screen from #3. As an initial thought they were together. We think it’s good to separate them. If you find a different way to display this, even though it means merging this with #3 it’s ok, show us!
5) Pages Search Results
- See this screen for reference.
- User should be able to see the items corresponding to content related to the Topcoder website pages (blog, events, etc).
- What’s the best way to display this information? Consider there could exist sub categorizations in one same result. Let’s say I search “TCO15”, there would probably be content in blog updates, also for the event sections, and many others.
6) Quick Search Bar
- Show us how the search component UI (on the top) would work.
- Think about the best visual way for splitting the type of information according to the live input (autocomplete) results such as most search/recent searches, popular, etc.
- Needs to be simple. We don’t want to distract the user here.
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.