JULIA DEBARI
Designer Doer
Responsive Web Design for a Loyalty Rewards Platform
Project Length: 8 months
Tools: Whiteboard, Sketch, InVision
Team: 8 UX Designers, 2 Visual Designers
My Role: Design Manager & Lead UX Designer
Goals: Create a new loyalty rewards platform that was responsive. The site needed to meet AA accessibility guidelines. The technical feasibility needed to be validated.
Project Background
The UX Team received mockups of a redesigned loyalty platform for Wells Fargo that another agency had done. However, the mockups were not technically feasible and no UX work had been done. They were just pretty pictures, that the client loved.
Project Challenge
How did we, as a team, validate technical feasibility, create a usable experience, and keep the design favored by the client?
My First Challenges
The client did not understand what responsive meant visually.
The compressed timeline (4 months) meant we didn't have enough resources on our own.
The client did not agree internally (10 stakeholders) on what needed to be done.
We showed the client some examples of what responsive design meant, but when they saw the static wireframes, they were very confused. So we ended up having to do breakpoints for desktop, tablet, and mobile for every screen in order to go through their approval process.
Our team at the agency was 4 people, including me. I knew that we would need more help, especially since we had to do three versions of every screen. I got permission from the Director of UX to bring on some contractors. I reviewed their work every day to make sure it was up to the quality expected of our team.
In order to keep the client as aligned as I could, I created a changelog document that was linked in every wireframe document. Decisions from meetings and what changes were done were kept in there for everyone to reference.
Screen Management
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 both the UX and the Visual designers for this project. The spreadsheet was available for anyone to view to see the current status of the screens.
Screen mapping to show who was working on what parts of the application.
Screen mapping to show what was finished, approved and handed off to the developers.
One part of the changelog to keep the entire team aligned.
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.
Accessibility annotations and screens callouts.
Control Inventory (components like in a Design System)
Control Inventory (components like in a Design System) with detailed specs for developers
Screen Structure
Daily reviews of work were taking a lot of time, but I wanted to make sure the quality was acceptable to the client. My direct reports knew I had high standards, but I knew I needed to keep the contractors on track.
Sample wireframes from the team. Each UX Designer wrote their own annotations at the same time they did each screen. Each designer was responsible for all breakpoints of one screen.
Visual Design
The Visual Designers had received mockups that the client had already approved so they didn't have a lot of freedom. They basically reskinned the wireframes.
Home screen before signing in. We kept the navigation simple and straightforward.
Home screen after signing in. The client loved these circle graphs and it took a lot of work to make them usable from a UX standpoint.
Lessons
Learned
01) Work harder to get the clients aligned and working together. Don't expect other people to help.
02) Pair up designers for reviews so I don't have to do it all myself.
