RESEARCH • DESIGN • STARBUCKS

The PulseHealth Platform

During my summer internship I worked as a UX Designer for ten weeks at Starbucks corporate. My goal was to design a platform that helps Starbucks Technology leaders visualize the overall “health” of their products and services. I worked alongside two software engineer interns to design and implement a functional site that displays data in near real time about various products and services within Starbucks Technology.

Starbucks Technology is broken down into three branches, known as families. Each family contains a various amount of portfolios, and each portfolio consists of products and services that can be assessed and provide insight about how each family is performing. When things go wrong within these products and services, it is critical that the right people know about the problem so that they can be addressed as quickly as possible. The PulseHealth app provides a clear way for Starbucks Technology leaders to see what is wrong and solve the incident.

Due to my NDA, I am unable to show the exact work that I did on this project. However, I have included generalized images and methods I used throughout the summer.

Key Methods & Takeaways

  • Communicating ideas in a remote setting

  • Presenting to key stakeholders and feedback assessment

  • Wireframing & Prototyping

  • Version Testing (created multiple versions and tested designs with users to ensure the best final result was chosen)

  • Feature design and refinement

  • React (beginner level - self taught during the 10 week internship period)

  • HTML

Creating a Level 1 View

The platform was broken down into 3 viewing levels. Level 1 displays all of the current open incidents occurring within Starbucks Technology. An example of this could be a WiFi outage at certain stores. Technology Leaders need to quickly see the problem, when it began, and its priority level.

Creating a Level 2 View

The level 2 view displays all of the products and services in a given portfolio. For this step, I chose to create two different versions and test them on stakeholders. In one version, users are brought to a new page to view health data on each product and service. In the second version, a dropdown was used so that visualizations would be seen without redirecting to a new page. After presenting to stakeholders, we decided to go with the dropdown.

Screen Shot 2020-09-16 at 9.22.56 PM.png

Introducing Dark Mode

Once we’d designed a suitable level 2 page, we decided to have a little fun and created a dark mode version for the site. Users can toggle between light and dark mode and the state will remain persistent.

When creating dark mode, I completed a comparative analysis that looked into three other companies’ utilization of dark mode. I learned a lot from this experience, like never to use true black for example. In the end, we created a dark mode while ke…

When creating dark mode, I completed a comparative analysis that looked into three other companies’ utilization of dark mode. I learned a lot from this experience, like never to use true black for example. In the end, we created a dark mode while keeping the Starbucks brand in mind and stakeholders loved it.

Creating a Level 3 View

In this final step of the project, we needed to create a page that Starbucks Technology leaders could use to quickly visualize the teams who are involved with the specific product or service. This way, in the event of a problem, this/these team(s) can quickly be contacted.

Screen Shot 2020-09-16 at 9.23.08 PM.png
Previous
Previous

Corporate Training

Next
Next

Virtual Assistant