BRIEF
The confusing part of the brief was the part that had to do with the transaction history part of the brief. And this was because whoever wrote the brief dumped all the tags for the data being sent by the API that interfaced with the database that stored the transaction histories for this large banks gift card and coupon experience. And this high level of detail was given with no explanation.
So the challenge, the ask of this brief — regarding the transaction history experience — was first figuring out what the brief was actually about. Which turned out to be figuring out how to design the transaction history experience — within the limitations of a third party service's API.
Project Overview
TIMELINE
8 weeks
TEAM
Kevin Regan, Robbie McIntosh, Johnny Benavente, Christina Tagliareni, Serena Haas
DELIVERABLES
Defining the problem, ideation, pixel perfect wireframes, annotations and an extremely complete prototype
TOOLS
Figma, FigJam, Excel, Word, Photoshop, Illustrator
PROCESS
Kickoff, running into the ambiguity, seeing the problem space, defining the problem, ideating solutions to the problem, presenting these solutions to stakeholders, iterating, prototyping, annotating and delivering..
MY ROLE
I was one of two Senior UX designers. The project lead assigned the transaction history piece of the project to me.
WHAT HAPPENED
I love this project. I not only think I rocked it with the UX design work — but I also had a giant epiphany about ambiguity. It was partly philosophical and partly practical. The practical part is this: the way we dispel ambiguity (a common feature of the start of any project) is by first understanding the problem space, seeing it and attempting to define it. And then we can figure out what the problem is that needs to be solved. And then we can attempt to solve it. And for a UX designer, wireframes are solution ideas. I did this with this project and had a series of epiphanies about it too. So it was a fun and exciting project. And an awesome growth experience.
Because I had stepped it up on that gnarly piece of ambiguity in the brief, the transaction history part, the team lead decided to assign that piece, the transaction history part, to me. And the challenge here was understanding how an API worked, what data it was delivering to the transaction history pages and designing in terms of this.
Something I'm super proud of regarding this project is that my careful analysis of the API illustrated some — for us —limitations of the API. And the client was able to take my research to their vendor and get the API modified so it worked better for our users' needs. And, we, of course, incorporated these updates of the API into our final wireframes.
Ideation
The problem to solve with the transaction history part of the project, as noted above, was understanding how a third party API worked and how it could be translated into and how it constrained the user experience.
Understanding the API
So, the first thing I did was analyze the API and understand how it would and could inform/constrain the transaction history experience.
Designing the transaction history UX
High Fidelity Wireframes
We delivered pixel perfect high fidelity wires — that conformed to their design system. The whole team did a quick study of their design system.
Transaction List Pages
Transaction Detail PageS
Annotations
Prototype
We had one final deliverable for this project: a very complete prototype. This prototype included everything that was a part of the My Deals project. Myself and the other Senior UX designer built it. As much as possible the project lead wanted it to be able to stand alone. The project lead, the creative director, is presenting the prototype in this walk through video, which we included with the delivery.