Whataburger
Double Diamond Case Study
Learn how our team implemented the Double Diamond framework to redesign the app homescreen.
Learn how our team implemented the Double Diamond framework to redesign the app homescreen.
The DXE team employs a user-centered design (UCD) methodology known as Double Diamond. This takes an epic objective from the Epic Roadmap and produces customer-validated feature packages and release packages.
Project tasks fall into 4 primary phases -
• Discover – the team diverges to generate massive amounts of insights
• Define – the team converges by condensing insights into alignment diagrams and concrete models leading to an objective problem statement
• Design – the team diverges to create many potential solutions for the problem
• Deliver – the team converges on a single, customer validated solution
The old whataburger app home screen had been outdated. It was based on a 4 year old design from 2015 and we had already seen competitors shift to new designs. So there had been an appetite from leadership to update it.
Digital product managers and/or stakeholders of an epic objective gather relevant information on the current situation and produce a UX request. This information serves as a starting point for the double diamond.
Stakeholders and DXE meet to find how the UX request fit into the rest of the roadmap at a low-level. For example, this project ran during numerous other projects. Determining how these tasks mix into timelines with other priority work is crucial in determining when milestones and meetings should occur.
All UX projects begin with a Discovery Session. This meeting is 1-2 hours long and includes the stakeholder, a UX designer, and a digital product manager. Facilitated by the UX designer, the team runs through a set of questions -
• Who is this for and why do they need it?
• What is happening now?
• What needs to change?
• Who else is involved and when?
Once these intial interviews take place a customer value chain and/or empathy map exercise help define current project knowledge. These insights help target initial research.
For this particular project, our team had the pleasure of working alongside Whatburger's Communications research team, and the DXE data analyst. Both the UX and research teams were involved in conducting a mix of different tasks such as -
• Competitor Scans
• Heuristic evaluations and expert reviews
• Technological research
• Current state user tests
• Current state quantitative research
• SME Interviews
Ultimately, a performance gap is identified. Further research focuses on the cause of this gap and quantitative research validates these efforts.
The research phase generates numerous insights from many different sources. The UX team must develop various alignment artifacts to make sense of these insights. Examples of said artifacts include-
• Service Blueprints
• Journey maps
• Affinity Diagrams
• Ecosystem maps
• Tree maps(structures conversations)
These documents help facilitate conversations among the diverse teams needed to craft a problem statement and design effective solutions. For this particular project, our team created an affinity diagram and ecosytem map to help us understand our customers experience with the homepage.
The UX and product team gathers all relevant best practices, accessibility rules, Whataburger style guides, and pattern libraries
This information helps inform design during the Design and Deliver phases. It also uncovers gaps in available resources allowing the UX and product team time to track down relevant materials. IT uses this information to start understanding upcoming tasks and prepare the team.
The stakeholders, UX team, and Product team, along with all other team members convene for a problem definition statement meeting. Research is digested, discussed, and ultimately interpreted as a concrete problem (or hierarchy of them).
• Reward progress and status is obscure or unseen
• Offers are rarely seen
• Signed in state is indistinguishable from signed out
• Reward progress feedback is not noticeable
• Ordering is surrounded by controls of a similar weight
• Barcode is prominent, yet not descriptive
• Favorites are rarely noticed, yet on screen
• Customers interpret task importance without guidance
• % of total transactions
• Reduction in time to submit order
• Higher visibility and usage to key features
The UX designers use the alignment diagrams and models from the Definition phase to build out a conversation (aka mental model) with the customer. Since each digital interaction is a back and forth with Whataburger, customers expect a similar experience to that of the restaurant. The conversation must –
• Clearly deliver relevant information when needed
• Set up and deliver on customer expectations
• Clearly define tasks and deliver prompt feedback on customer input
• Follow brand tone-of-voice
After the conversation is framed, organized, and labeled, the UX can team start wireframing. At this stage, wireframes are simple boxes of content arranged on a page. The goal is to determine the best information hierarchy.
The UX team will hold ideation sessions with a varied group of family members. Participants take the given conversation and rapidly sketch out ideas, which are discussed and voted on by the group. These wireframes are then tested by customers. Results are analyzed and changes are appropriately made.
Once customers are satisfied with the flow, structure, and movement throughout the new experience, the UX designer and creative teams begin on visual design.
Approved style guides inform most of the design, whereas new UI is created using research findings and best practices. The creative team produces any relevant imagery, language, and other content when necessary.
Again, customer testing assists the team in decision making on these final designs. It also helps refine any outstanding issues and helps answer these concerns.
In order to test the Hi-fi concepts with customers, the UX team will produce a prototype to mimick the look and feel of the app with the new design changes. We then collaborate with the research team to create scenarios for customers to run thru and schedule times to meet with them.
After customers validate the hi-fi wireframes and we find success in the prototypes, the UX and product teams meet with the developers.
In backlog grooming, developers give refined estimates of expected work and effort. These estimates are compared against other tasks, and work is planned for a future release.
The UX team delivers final assets into Zeplin, a software development collaboration platform. The product team writes PBIs, which are detailed instructions for developers. These instructions give fine details of the expected experience and what must occur for customer success. These are reviewed during a sprint planning meeting.
The product team tags the developed solution to measure KPI. Refinements are made if issues are uncovered.
The final output is scheduled for a release. Every quarter, there is a major release, minor release, and an optional release (emergency hotfixes are possible too). Larger experiences go out in a major release, smaller ones in a minor release.
Once delivered, feedback from customers is monitored by the Customer Care team, Product team, UX team, and others. Product managers and analysts study incoming customer data and sentiment. This informs future UX request work and possibly epic objectives.
Bugs, defects, and other issues are resolved as necessary, often through an optional release or hotfix.
Double Diamond design is cyclic. What starts as an epic objective ends up as customer validated experience. This in turn often spawns more epic objectives or refinements.
Ultimately, the process provides real value for customers based on their actual needs while generating revenue and positive brand impressions.
The Double Diamond is scalable, increases family member empathy towards customers, and is measurable. It is also repeatable and inclusive of any family member or Whataburger ally.