Beverage B2B

This project aimed to optimize a B2B platform for a beverage company, enabling regional bottlers to sell products to retailers and distributors.

Role

Lead UX Designer

Duration

4 Months (2022-2023)

Tools + Skills

Figma, Figjam, Salesforce, User Research, Wireframing, Prototyping

Team

Elva (UX Director, UX Designer, Design Director, Visual Designer), Development Agency
Jump to:

The Problem

The client's B2B platform enables regional bottlers to sell their products to retailers and distributors, but it required an update.

Project Goals

  1. Migrate the platform to Salesforce by a specific deadline

  2. Create a Phase 1 without order functionally to facilitate a quicker transition to the new platform

  3. Address usability issues to improve user experience

  4. Enhance customization options for bottler storefronts

Discovery

We interviewed bottlers and company stakeholders to identify pain points and feature requirements. As I took over the project, I synthesized recordings from interviews from before I joined, ensuring I fully understood user needs. Personas and user journeys were created to reflect the needs of bottlers and highlight potential pain points for retailers.

Competitive Audit

Despite limitations such as gated content and access to only homepage reviews, I conducted a competitive analysis to identify best practices for storefront customization and user flows. This analysis informed key design decisions, even with the restricted data.

Screenshot of a spreadsheet for a competitive audit
Competitive Audit - Raw Data
Screenshot of a spreadsheet for a competitive audit
Competitive Audit – Analysis

Site Map

I created a sitemap to ensure stakeholders remained aligned on the overall platform architecture throughout the project, offering a clear visual representation of how bottlers and retailers would navigate the system.

Site map of the authenticated experience

UX Design Process

When I took over the project from the UX Director midway, I assumed leadership of the UX design process. This involved managing day-to-day design tasks and ensuring the project stayed on track. I managed a contract UX designer, providing feedback and guidance, and ensured alignment with stakeholders through regular presentations and feedback loops.

Original homepage with information redacted
Guest Homepage – Before
Wireframe of a guest homepage experience
Guest Homepage – After

To ensure our designs were of the highest quality, I regularly collaborated with the entire UX team at Elva, seeking feedback and insights on our work. I enforced consistency and best practices throughout the design process to ensure the final product was cohesive and met the client's needs.

Wireframe of an Order Details dashboard
Order Detail Page
Wireframe of an Invoice dashboard
Invoices – More Actions
Wireframe of an Invoice dashboard
Invoices – Panel Expanded

In addition, I worked continuously with the project manager to create trackers that provided a complete and accurate understanding of the deliverables and their statuses. This communication tool helped ensure the project stayed on track.

Dashboard wireframe featuring a hero, sidebar, recent activity, and various promotional modules.
Homepage Dashboard (Desktop)
Mobile Dashboard wireframe featuring a hero, sidebar, recent activity, and various promotional modules.
Homepage Dashboard (Mobile)

Collaboration & Handoff

In addition to leading the design process, I closely collaborated with the visual design team to ensure the handoff of design assets was smooth and aligned with the client’s vision. I also worked with other members of the UX team to maintain best practices and design consistency, ensuring a cohesive user experience throughout the platform.

Results

The final stage of the project involved presenting our work at a 10-hour on-site meeting with the client, a group of bottlers, and the client's finance team.

Presenting Prototypes

I prepared fully functional mobile and desktop UX prototypes of the platform's phase one functionality to showcase our proposed designs. During the presentation, I provided live reasoning and directed conversations to ensure attendees understood our work. We also gathered live feedback from the attendees to understand their thoughts and concerns.

Zoomed-out prototype view of a Figma file
Figma Mobile Prototype

Additionally, I presented a truncated prototype version to the client's finance team, gathering their input and providing real-time responses. This collaborative effort allowed us to refine our designs and create a final product that met the needs of both the client and the end users.

Zoomed-out prototype view of a Figma file
Figma Desktop Prototype

I analyzed on-site meeting feedback to refine the redesign, grouping it by page and categorizing it into action items, notes, questions, and future states. This helped identify areas needing improvement and refine the design accordingly.

Finally, I collaborated closely with the visual design team to ensure that the final product matched the feedback received from the on-site meeting attendees. This collaboration helped create a platform that met the needs of both the bottlers and customers and improved the user experience.

Takeaways

  • Collaboration between the different teams and groups was critical in ensuring a cohesive and successful final product.

  • Discovery through discussions with the client, personas, research, and competitive audits informed the design approach, resulting in designs tailored to all stakeholders' specific requirements and preferences.

  • Gathering feedback from stakeholders during reviews can help identify areas that need further improvement and refine the design accordingly.