Visa pleaser

 

Project A website and IA review - 3 months

Client Visa

Sector Finance

  • Review a Visa website and assess the design system

  • Study research, analytics and propose a testing plan for the new IA

  • Wireframe and prototype new site pages

  • Present to client with new additions to design system

 
“Andy was dropped into a highly complex, technical project with demanding timelines and he nailed it. He got up to speed quickly, made everyone feel informed and confident in his work, and delivered an outstanding IA. Impressive. My only quibble is that he won’t come and work for us permanently!”
— Jane Austin, Chief experience officer, Digitas
 

Visa are one of the most valuable companies in the world, outside of China it commands a 50% market share of total card payments.

My role was to assess a Visa product site, arguably the best in market, that wasn’t landing with the user. My challenge was to review a new IA, redesign 6 - 10 key pages and present to the client regularly.

The first presentation was just days after I started.

New homepage wireframe

First steps

I wanted to understand the product and the project. So I asked for any recordings of client presentations, keynotes, analytics and research to understanding the site, the product and the client and user needs.

  • The priority was a milestone presentation just a few days away to show the UX direction for the next quarter.

  • I wanted to clearly identify what success looked like

  • Study the brand guidelines and design system - what was I working with

  • Analytics - did this back up the client assumptions

  • Competitor review

I reviewed each of the key pages; home, landing, product and contact us form page. This image is my homepage wire and this is the current site. I’ve removed several elements, sharpening the message and adding much needed hierarchy to the page. Chiefly:

  1. Fewer primary buttons

  2. Less information but doing more with it

  3. Delineation between sections

  4. Adding variety to how information is laid out

  5. More granular choices further down the page

New IA and header

Another proposal was the new IA and header design. The current is failing on a few fronts; too much text, a layout you can’t scan, and the main link appears bottom left which is often missed.

These new wires, image 2 and 3, show the proposed layout with:

  1. Clearer focus on the nav labels

  2. Expose the level 3 options

  3. New ‘Developer’ sub-domain top right

  4. Less text in the panel - just a short, single line for context

 
“Thank you for saving the project”
— Jane Austin, Chief experience officer, Digitas
 

New Blog page

The accompanying image showsVisa design on the left, my two wireframes are centre and right.

Again, lots of changes here:

  • Add a filter and sort

  • Lose the corporate, inauthentic imagery

  • Fit three posts above the fold

  • Read order for each post to be: title, body, author, read time.

  • Use four card grid further down the page to be more economic and less repetitive

 
 

PRODUCT PAGE & MOBILE

Each product page had a set structure to match how a user would explore and assess:

  1. Promote video content to the top of the page

  2. Answer the questions the user would ask

  3. More variety on the page, not just text and image

UI additions

These examples are for the panel component UI suggestions, to make a more attractive, unified design.

 

The outcomes:

  • Client approval - the first presentation achieved approval for Q1

  • Rehire - digitas were very keen to keep me around

  • Coaching - I coached the team on the benefits of UX and testing. The client need often ld conversations and decisions, so I’d be the voice of the user.

  • Steady - When I joined the project was a little frantic. I helped to calm the waters, meet the early deadlines and set the correct course

  • An office! - my first visit to an office in two years

“You taught me a lot!”
— kris owen, lead strategist

Thanks for the marquee image Nathan Dumlao on Unsplash