Costco Inbox
Problem: “Our members struggle to keep track of marketing, transactional, and onboarding messages because they are dispersed across multiple channels. We need a unified inbox within the Costco Mobile App that consolidates all these communications, allowing members to easily access and manage their messages in one central location.”
- Digital Product Manager, Costco Wholesale
Discovery
To tackle the issue of scattered communications, I ran two rounds of competitor audits on iOS and Android apps like Amazon, Walmart, and eBay. This helped us see how others handled messaging and gave us some ideas of how we could solve this for Costco.
I worked with another UX designer and a product manager to define what our inbox should do—where it should be, what to call it, and which messages to include. We sketched out early concepts for user flows. We then created wireframes and mockups, which helped guide our discussions with the product team.
Design
What started as a straightforward inbox design became more complex due to technical, legal, and business constraints. After securing buy-in, we created a proof of concept and encountered technical struggles during testing with different vendor APIs, which required several rounds of design rework and revision. Ultimately, we narrowed the scope to focus on marketing messages.
As the lead designer, I was responsible for executing most of the design revisions during this stage. This included addressing challenges like badge colors, empty inbox visuals, message expiration, and ensuring the design worked across both portrait and landscape modes on tablets. We also conducted usability studies and surveys to inform our design adjustments and validate the final direction.
Handoff
Handoff was an ongoing process, with each design iteration documented as a dated page in Figma. The final design was fully approved by all IT and business stakeholders , meeting all initial requirements.
After the handoff, my role as Lead UX Designer shifted to lean UX support. I prioritized answering developer questions, refining designs, and collaborating closely with my partner designer to ensure the final product met our standards. We both conducted post-development UX QA reviews, identifying defects and providing additional guidance, ensuring alignment with the original design vision.
Outcome & Takeaways
This project reinforced the need for adaptability and close collaboration. Despite challenges, we delivered a solution that met business needs and provided a strong foundation for future iterations. Within the first month of release, the first message resulted in a 6.3% conversion, contributing $14.8M in revenue and has since been a great addition to the Costco mobile app.
Screenshot of today's experience
Relationship with…
Product manager
I collaborated with the product manager throughout the project to ensure the designs aligned with business goals. We worked together to define key requirements, prioritize features, and adjust the designs as needed. The product manager also helped coordinate feedback from stakeholders, allowing me to refine the design based on evolving needs.
Quality Assurance
I worked closely with the QA team to ensure the design was implemented correctly. As they tested the product, I provided guidance on expected interactions and visual details. I also reviewed test builds to identify any UX defects or misalignments with the original design, offering additional clarity and revisions when necessary.
Product Owner
The product owner acted as the main liaison with the technical team. Once the designs reached the definition of ready, I worked with the product owner to connect with the right stakeholders for technical feasibility confirmation. They used the designs to break the work into manageable development tasks. This process often required me to create multiple design variations.
Developers
Developers provided valuable insights into the design language and technical feasibility, helping me ensure the UI design was achievable. With their guidance, I created mockups and detailed design specifications, giving the dev team clear instructions on the final product's appearance, interactions, and accessibility features.