Bloomberg BNA - Design Test

 

The Basics

Project Responsive web app
Tools Sketch, Invision

Background
Create a small prototype of a web-based application that will allow users to rank who they think will win an upcoming professional bicycle race (top 5 cyclists in order). There will be 200 cyclists entered in the race. The user who is closest to the actual win when the race happens will be informed they have won a batch of BBQ sauce. We want the BBQ sauce to feature prominently since they are the sponsor for the website. We will need some way to inform the user that they won the prize. You should be able to demonstrate your thought process through wireframes, mockups or prototype. 

 
 

brainstorming

Initial sketches and wireframes centered around browse ability of cyclists and a prominent area where users could see their currently chosen cyclists. Since the list was finite, (only 200 results) I thought it could be beneficial to present each cyclist result in a visual display.

Additionally, I thought it would be useful for users to have a snippet of information about each participant while also having functionality for someone to click through to a more thorough profile of the participant. This profile could include their past race results to help the user make a more informed decision for who to include in their leaderboard.

Obviously, users would also need to create an account in order to be able to submit their predictions. 

 
 

Initial Wireframes

 
 

Design & Iterations

The requested features of the site seemed to align well with standard search behavior. It occurred to me that a basic list of all the users might not be very useful to users, even though the entire list was limited to only 200 results. Therefore, I added in filters (gender, hometown, finish time, and age) for users to be able to slice the results to find the cyclist best suited to their desired qualifications. I also added in options to sort the list or change the view from card to table layout. 

On the leaderboard panel I chose to display empty cards in order to communicate to the user that they can fill those specified slots. When there is a cyclist selected in the leaderboard, users can choose to remove it or use the grip icon to move the order to their liking. 

My hypothesis for the post-race results was that users would be more interested in how well they did in the competition, not how well their picks did in the race. For this reason, I chose a very simple splash screen where they would be prompted to see the full race results to get more clarity if they desired.

 
 

advertising

The advertising slots were high priority, but I focused on integrating them after I nailed down the ideal framework for the pages. I chose to go with a more subtle ‘Presented by’ label with logo since standard ad slots seemed too generic. I included the sponsorship tagline on almost every page. On the browse page I also included an additional custom ad placement that would display underneath the filters. The desired behavior for the filters is that they would be ‘sticky’ and therefore the ad would always be present when users were scrolling through the participants list.

 
 

High-Fidelity Mocks

 

next steps

Since this is a light prototype / proof of concept, next steps would include:

  • Understand advertising/sponsorship requirements more thoroughly. If ‘presented by’ is too subtle, what are we contracted to provide?

  • Build out more page states (ex: success message after user submits, table view of results, how to display edge cases like no photo, what to display when a user already submitted predictions, responsiveness of the pages, etc.)

  • Understand the data we’re getting on each participant to see it it can support the UX.

  • Circulate within design team, SMEs or other stakeholders to understand if this meets business requirements.

  • Conduct user testing to find areas of confusion or opportunities for improvement.