Ash Montes
THUMBNAIL2_cmp.jpg

Sitetour Website

Streamlining the experience for media buyers to select billboards for their advertising campaigns

mockup_sitetour_cover2500.jpg

Streamlining the experience for media buyers to select billboards for their advertising campaigns

Client: Sitetour
Roles: User Research, UX Design, Interaction Design, User Testing  
Tools: Sketch, InVision, Googleforms, UsabilityHub
Duration: 4 weeks
October 2017

 

Sitetour is an outdoor programmatic platform (like “eBay for outdoor advertising”) where Out-of-Home owners list their inventory overlaid on Google Maps while buyers (media agencies) can search, select and bid on outdoor ad panels across different locations in near real-time.
After four years since its foundation, the Australian startup Sitetour is now expanding to new countries and they plan on launching a new version of their website, looking into their UX design to allow for a smooth and easy user flow.

OBJECTIVE

Redesign the website focusing on the buyers' side, making the process to select and bid on a billboard as straightforward as buying ad space on a web page, and providing data that can help improve the impact and measurement of ad campaigns to the buyers.


Process

 

The process here was very much inspired by the principles that underpin IDEO’s human-centred design.

 

 
diamonds_design2-Sitetour-01.jpg
 

Interacting with Stakeholders

Phase 1: Discover

Identifying user preferences and pain points via secondary and primary research

The first step was to understand the problem, what the stakeholders expected and needed, and the current business landscape: the out-of-home media industry is starting to experiment with programmatic media buying. Yet, there are a number of obstacles and challenges to the universal adoption of programmatic media buying in the OOH space.

Secondary research and competitive analysis allowed for a better sense of gaps and opportunities in this market.

 
.SITETOUR_ComptAnalysis2~imageoptim.jpg
 

To expand on the information gathered with the secondary research, interviews with OOH buyers and programmatic media analysts were set up. The goal was to pinpoint the users’ needs/concerns (frustrations and motivations):

SITETOUR_quotesInterviews.JPG

Phase 2: Define

Analyzing research findings to define design problems and challenges

From the Secondary Research and Interviews, we’ve established the following hypothesis:

  • Users from digital media agencies are used to speed and convenience and expect the same from the OOH media
  • Professionals from digital media agencies struggle advertising to people in specific locations - the tools offered by Facebook and Google are not granular enough when it comes to location-targeting and this is a significant advantage that is unique to OOH media
  • The agencies are keen on acquiring data that can be used to impress their clients - estimates on audience, geodemographics and points of interests are key factors in persuading them OOH is worth the investment
  • Real-time trading in OOH is not the rule yet, and any platform has to take into account the ‘latency’ between the bid from the buyer and the response from the vendor
 
 

In order to move forward, I worked on prioritising the product features. This is done by talking to the stakeholders and understanding what are their main strategic goals, and also by examining the current features on the website, where users are getting stuck and if there are other sources of hesitation.
Collating all the data gathered, it is possible to arrive at the question at the core of this process: 

How might we create a more accessible ad-buying experience to non-expert buyers and media agencies used to the speed and convenience of programmatic advertising?

We're aware that programmatic tools (for digital ads on Google, Facebook and others) have created a strong incentive for ad tech providers to develop products for the industry’s longtail – companies like Adstruc, Signkick, Ayuda, Bitposter and Hivestack are all targeting specifically this need.

 

Lessons from Material Design

Phase 3: Design

Ideating potential solutions with sketches, wireframes, and hi-fidelity mockups

The user flow was created to show how the navigation will be structured, identifying what needs to be produced and communicating the relationship between different pages.

As I started sketching ideas and wireframes, I saw there was an opportunity to adopt a consistent design language that is backed by solid guidelines with an emphasis on content legibility. Speaking with the stakeholders, it’s decided we’ll commit to Google’s Material Design. The intention here is to create an interface that is easy to recognize and navigate, especially to new users. Another benefit noted by the stakeholders is the trust associated with the Google brand and Material Design and how it might have a positive impact on user engagement.

Of course, the challenge is to strike a balance between the unique website functions and the core conventions of Material Design and it is what makes it feel thoughtfully-crafted and enjoyable to use.

 
 
1_SITETOUR_HomePAGE.jpg

In terms of color and layout art, the main purpose is to have an unobtrusive user interface design, so that the “emphasis on user actions” remains the highest visual and kinetic priority.

Google recommends to use the primary colour in the toolbars and status bars which usually means using the brand’s colour in those areas. Because Sitetour requires some time invested to research locations on the map, it made sense to use the brand’s colour (pink) only to emphasize a key piece of information so as not to distract the user and have the toolbar follow the blue colour in contrast with the white background.

 

Less friction is better

Phase 4: Test & Refine

Assumptions are put to the test with prototypes and usability testing

 

Since this is a business-to-business platform, one key need is to communicate professionalism and efficiency - without falling into a design trap of making it look boring. To counter this risk, stronger emphasis is placed on user actions, with subtle animations to further highlight the “cause and effect” of user interaction, removing possible confusion and reaffirming user activity by creating a relationship with each input.

 
DrawingPenAnimation_Sitetour.gif
 

By observing usability tests and gathering feedback from users, another important discovery is made. When choosing ads, the user was required to click on each individual pin. This ensured a thorough process, less prone to errors. But, when testing, it caused noticeable friction and stopped the user from choosing a bigger number of ads. The solution, discussed with stakeholders, was to use the drawing tool, a simple feature with the potential to choose multiple pins at a time and the added benefit of providing a very tactile experience to the user.      

 
Sitetour_firsttoSecondItiration

Before / After

The screen on the left shows progress between the 1st and 2nd iteration. Special attention was paid to visual hierarchy, the exclusion of colours (so as not to distract the user), and better optimisation of white space surrounding elements to make the most of the website real estate. 

.Sitetour_AffinityMap~imageoptim.png
ZeplinSitetour2.jpg
 
 

Closing Thoughts

This was my first live project, working with stakeholders - it highlighted the importance of starting with a clear hypotheses, gathering feedback and improving/making adjustments to the original hypotheses.
Getting more feedback from stakholders also meant the iterations had a smaller scope, to ensure a higher speed of delivery on each step of the way.
Working with Google’s Material Design provided plenty of opportunity to expand further knowledge over this visual framework while it offered a challenge to ensure the brand kept its own personality.