We noticed a majority of visits to the help center were to access the “missing cash back” form—so we set out to optimize its experience.
My role in this feature enhancement was Product Design Lead—responsible for research, userflows, visual design and design handoff. I partnered with a Product Lead, a Development Lead, and 1 Full-Stack Engineer.
Workshop Facilitating
Ecosystem Mapping
User Research
Feature Sequencing
I try to lead every project along the traditional “research, design, validate, iterate” approach. However, I also believe that each project has its own unique situation that requires the traditional design framework to to be customized to fit. This project followed the following general framework:
Survey the Internal Landscape
I first consulted with product stakeholders and Business Intelligence and to understand the goals and constraints for this project.
Audit the User Experience
I then completed an audit of the existing UX landscape to understand what was working and not working.
Design & Validate
Finally, I conducted user studies and competitive research to test my hypotheses and design concepts before recommending changes.
Who are the users?
Over 80% of visitors to the Help Center continued along the “Missing Cash Back” flow—our reconciliation process for shopping events that didn’t fulfill user expectations.
What are the constraints?
The constraints involved choreography around a tech replatforming. At the time the company was migrating from a Velocity tech stack to React—while also shifting from a monolith code base to autonomous teams.
What are the goals?
Optimize the user’s time-spent, reduce submission errors, and increase automation on the “Missing Cash Back” process experience.
I conducted an audit on all platforms—Android, iOS, desktop, and mobile web—and found three core areas to focus efforts.
Align With the User's Mental Models
The legacy build of the form started by asking the user to identify the channel they had made their purchase: online or in-store. However, this was not a natural recall model when people refer their own shopping behavior.
Implement the Design System
While we were kicking off this project the company was migrating its tech stack and implementing a design system. My challenge was to sequence the handoff in a way that aligned with the rollout of the design system.
Improve the User Flow
The legacy build of the form simply exposed the entire form to the user. We aimed to enable the form with smart validation to guide the user through an automated experience.
To understand the user’s mental model that they’re in when they’re first arriving to the page, I had to design a study that would abstract their recall memory so to not be influenced by the UI that they were seeing in front of them on the existing UI or prototype.
I asked them to describe what they thought a member services agent would need if they got someone on a call line. This would show me the information their recall memory accessed “first”.
Users expected the system to already have a log of their activity—which was true, the existing UX just didn’t display this information readily.
We front-loaded a list of their existing activity for them to choose from. If they didn’t see an item they needed, the contingency flow was revised to intuitively ask where they made their purchase rather than the purchase channel.
My audit revealed the problems with the flow, but also highlighted the fact that the flow was inconsistent across platforms. This made it easy for design and tech debt to incur rapidly over time.
At the time the design organization was embarking on an effort to implement a new design system. I took the opportunity to map a plan that would align the goals of the enhancement with the design system’s implementation.
At the time the company was embarking upon a 2-pronged effort to migrate from a Velocity tech stack to React—on which the design system would be built—while also shifting from a monolith operating model to autonomous teams. In addition, each newly formed team was responsible for their individual OKRs while assisting the wider shifts.
With new autonomy from the monolith tech stack, our squad decided to migrate to the new React framework ahead of the company wide schedule so that we could develop our OKRs faster without incurring new tech debt.
I needed to develop a plan for the new UX to ship on the new React framework while still visually looking like the old framework so that it wouldn’t misalign with experience on other touchpoints.
On initial display, the original form was long and cumbersome. This was because Rakuten has over 3,000 merchants with varying purchase terms—often with varying terms within the same merchant depending on the product category or purchase type. It was basically a drag-net for all possible information to discern a single problem. Additionally, there were different backend validation paths for each purchase type.
I proposed an additional enhancement to check for those differences beginning with the store. Effectively, the flow would first ask for the store name—consistent with shoppers’ mental models—and then run a check against the backend to see whether the merchant had varying purchase types or offers. If there were variations, the form would display the relevant prompt, if not, then the form would continue to the next step.
After deploying the new form design we saw an 80% decrease in validation errors.
Mocks shown here are on the mobile breakpoint. The new design was made to be responsive across desktop and mobile-web.
Looking back on the project, there are some things I would do differently if given the opportunity.
Initiate Cross-Team Conversations Sooner
The user's first touchpoint-of-frustration was actually in their account activity. It would have been the most natural entrypoint for this feature. However, the squad operating model prevented our team from developing on that touchpoint. I would have campaigned to collaborate across teams sooner.
Run the Discovery Workshop More Efficiently
As part of the discovery phase my Product Lead and I co-facilitated a brainstorming workshop. We had an executive in attendance who ate the room. As co-facilitator, I should have laid out ground rules in the beginning or had a pre-meeting with the executive to manage a more efficient workshop.
Member Account Redesign
Address Capture Initiative