Responsive Web Design for a Rewards Platform

Project Background:

The UX Team received mockups of a new loyalty platform for Wells Fargo that another agency had done. However, the mockups were not technically feasible and no UX work had been done.

Project Challenge:

How did we, as a team, validate technical feasibility, create a usable experience, and keep the design favored by the client? 

Project Goals:
  • The platform must be responsive.

  • The visual design needed to stay consistent.

  • The technical feasibility needed to be validated.

  • The design needed to meet AA accessibility guidelines.

Added Challenges:
  • The client did not understand what responsive meant visually. 

  • The compressed timeline meant we didn't have enough resources on our own.

  • The client did not agree internally (10 stakeholders) on what needed to be done.

Role & Team:​​
  • Lead UX Designer: Myself

  • UX Designers: 6

  • Visual Designers: 4

  • Client Stakeholders: 10

  • Project Manager: 1

  • Account Executives: 3

Getting Started

We hired some contractors to augment the staff. We worked in an iterative manner so that development could begin work while the UX team continued on other pieces of the platform.

I created a spreadsheet and mapped each page from the sitemap to a group and assigned someone to work on that section. I reviewed every screen for consistency and met with the developers to go over functionality. These were daily tasks. I managed a total of 10 Designers, both UX and visual for this project. The spreadsheet was available for anyone to view to see the current status of the screens.

Another challenge was that the client was not familiar with responsive design, so for every screen, we had to do a desktop view, a tablet view, and a mobile view. This was for both wireframes and visual design.

Streamlining Work

In order to save time, and not have to call out repeated annotations around accessibility, I created a Control Inventory document. This outlined all the components that would be developed and how they should respond to accessibility.

Showing Transparency

With many moving pieces and a constant influx of stakeholder feedback, I created a Changelog that was attached to each group of wireframes. It included feedback from the client, who owned the changes, and the date the request was made. This helped keep everyone focused on the immediate needs of the project and not get sidetracked with the nice to have ideas.

Keeping Up With The WOrk

Each designer was required to do all three versions of a screen and write the annotations. 

The Visual Design​

JULIA DEBARI

Lead UX Designer

Location

San Francisco, CA

  • White LinkedIn Icon
  • White Twitter Icon