Building a better internal Starbucks portal to improve resource management

Date:
September - November 2021
Skillset:
UI Design, Design System integration, Javascript development
NDA Disclosure:
For legal reasons I am not able to show project details or screens. I am able to discuss the generalized process and am available to discuss in more detail upon request.

Updating a dashboard UI for a better management workflow

Managing data can be a pain if the application does not give easy access to common actions. My role involved building out pages and components with React and TypeScript. The business gained insight through user testing that clients needed to easily see percentages of funding and re-adjust portfolios, calculations, and cross-location assets. Users wanted fewer clicks. A main dashboard would allow direct adjustments as well as portfolio-specific views.

The Problem:
Shareholders and executives using the portal could not properly manage portfolios due to content being disconnected, both within the UI and the data itself.

The Initial Plan:
The Starbucks team needed a better way to access and understand information at a glance. I worked with a team consisting of a UX designer, backend developer, and myself 9as the frontend developer) to create a new dashboard.

The first step in exceeding customer expectations is to know and understand why those expectations exist.Roy H. Williams, author of Wizard of Ads trilogy

So what should this dashboard do anyway?

alt text Source Chris Montgomery on Unsplash

Setting expectations and identifying gaps

At this point in 2021 Starbucks was still adjusting to virtual work. To make sure everyone was comfortable with the project, a kick-off meeting was held. The existing API was presented to all teams and after a group discussion, key changes were identified based on the currently approved UI wireframes and concerns from the team that had the most agreement. Expectations around deadline and deliverables were also a key part of this meeting.

  • I would need to deliver on a fast turn-around schedule
  • Weekly stand-up meetings would be required along with code reviews
  • I would need to utilize the existing design system to create new components as needed
  • I would be working with the product and engineering teams on enterprise-facing features

Building a unified financial hub for Starbucks shareholders

When multiple teams work together, several perspectives and expertise can be utilized. The UX team first met with shareholders to create the initial version of the UI that was presented to all the teams. I met with the Development team to ensure everyone was alligned and that there were no obvious gaps. The lead UX designer and myself then met to harmonize the feedback.

Ask:
How might we avoid errors when users change how revenue is divided and utilized?

Data integration hurdles resulted in the existing APIs causing issues for users. Changes to accounts and distribution recalculations were not updating and calculating appropriately. This was an issue discovered after the initial stakehlder review. A user could distribute more than 100% of funds between multiple portfolios. To resolve this issue, both the API and UI would need changes.

Could and should errors be avoided?

Goal:
Refine UI to account for multiple user flows

Part of making changes to the UI was to address issues in the user flow, including how users were informed of potential errors. The system needed to prevent errors when possible and proactively warn of a potential overdraft risk when prevention was not possible. The UI needed to provide a big picture snapshot.

  • I collaborated with product and design teams to define features and identify opportunities for improvement
  • The prototype was improved to account for edge cases in user flow

Building the components according to atomic design

I developed UI components based on existing widgets and from scratch utilizing React, Typescript, and some Java. Some components included: typography, color palettes, data cards, tables, modals, and forms.

New and updated components

Collaboration was important to the process. I worked with the backend and frontend teams to ensure optimized API calls between parent and child components

Key takeaways and project outcomes:

Y’all, did you know that React is great for making dynamic components? 😉 I learned about component hierarchy through this project and it was my first deep dive into learning TypeScript. Starbucks has a very knowledgeable team and I loved working directly with the UX and back-end folks. I’m glad our team was able to deliver a robust user interface for Starbucks.

  • UI updates and new widgets were created and delivered on time
  • Components were built for usability and utilized test-driven development practices
  • Accessibility and performance improvements were implemented outside of original expectations. It was important to me that both be considered in all development and design deliverables.