Starbucks
My Role
I held the position of UX Lead, and only designer on a small team dedicated to developing an in-house business application called "Life Cycle Management" (LCM). LCM had a specific purpose: to streamline the management of digital tasks for numerous teams involved in the lifecycle of Starbucks brick-and-mortar establishments. These teams were responsible for buying a store’s real-estate, to the eventual demolition, and everything in between. I worked closely with full-time employee stakeholders to gain insights into their respective teams and address their challenges through systematic design approaches. I would then take these insights and design LCM from conception to delivery. The culmination of these efforts resulted in the creation of research backed high-fidelity mockups, and a comprehensive Figma prototype to show it in action.
The Teams and their programs
Upon joining the project, it was still in its conceptual stage, with no concrete details yet outlined. As part of my responsibilities, I undertook the task of defining the project from scratch. This included making critical decisions such as determining whether the product should be a native application or a responsive website, as well as creating a style guide.
The Starbucks Lifecycle Management process is an intricate system that covers all aspects involved in the construction and operation of brick-and-mortar Starbucks stores. It encompasses various teams responsible for different stages. This included Marketing, Real Estate, Construction, Maintenance, Management, and Deconstruction. These teams utilized 14 different programs during the hand-off process, which the stakeholders sought to incorporate into the final tool to create a seamless handoff experience.
Discovery
To effectively define the LCM project, a systematic approach to gathering information from stakeholders was essential. Initially, I would conduct one-on-one interviews with key stakeholders, including representatives from each team. These interviews would aim to comprehend and document their unique perspectives, requirements, and pain points within their current processes and current applications. By actively listening to their insights and concerns, I would gain an understanding of the challenges they face, potential areas for improvement, and their expectations for the new LCM application.
Additionally, to ensure a holistic view, I would organize workshops involving pertinent teams. This would enable me to identify any conflicting requirements or overlapping needs and facilitate open dialogue between different departments. By promoting a collaborative environment, stakeholders would feel encouraged to share their expertise, leading to a more comprehensive and well-rounded understanding of the project scope.
Furthermore, I would utilize surveys and questionnaires to gather quantitative data and specific feedback on particular aspects of the existing processes and proposed solutions. These surveys would be carefully designed to elicit actionable insights and valuable metrics that can aid in making informed decisions during the project's discovery phase.
Below is a Persona crafted from the combined discovery work of all Mid-level Construction Analysts.
Over time, I successfully developed essential design artifacts, including site maps, user flows, and personas, to precisely delineate the objectives of the LCM project. Among these artifacts, the most invaluable for this undertaking was the User flows. The "Build" User flow tailored for a "Mid Level User” became especially important as it intertwined closely with all other user flows, forming the bedrock upon which the entire project was constructed. The Build User flow paved the way for me to build wireframes that would give the stakeholders a vision of how we would start to tackle their objectives as the project evolved. As User research and requirements came in, it was easy to pivot and adjust if needed due to the modular design of the infrastructure.
This User Flow design was specifically made to illustrate how we would compartmentalize vast amounts of information. This became essential given the user feedback, and I will talk more about that in the next section.
Mid-Fi Wireframes
My design was highly inspired by user feedback that constantly claimed that the users where "overwhelmed by information." In response to this valuable input, I addressed the issue by including many collapsible elements to my design that compartmentalized information into a easily navigable and digestible presentation. I laid out my strategy using lo-fi wireframes that where crafted to present minimal information initially, enabling users to collapse and expand information that was only relevant to them. By adopting this approach, I aimed to alleviate cognitive load and create a more user-friendly experience tailored to the employees feedback.
For low-fidelity wireframes, I leverage Material Design's principles to prioritize user needs. Simple sketches with minimal elements become the blueprint, focusing on core functionalities and interactions. Visual hierarchy ensures key elements stand out, guiding users through the interface.
Grids and spacing create a balanced, user-friendly layout, while thoughtful typography—both pairing and readability—completes the experience. Grayscale keeps the focus on structure, allowing stakeholders and developers to provide feedback on core functionality before diving into aesthetics.
Style Guide
Following the establishment of the Mid-fi wireframes, my focus shifted to the construction of the Style Guide. While there were certain elements I could leverage from previously crafted style guides associated with distinct projects, a significant portion of this endeavor relied on independent efforts. Drawing upon pertinent elements from their existing branding guides, such as various shades of green, logos, and select icons, I ensured a cohesive representation of the brand's identity within the new project.
Mobile First Approach Responsive Design
Hi-Fidelity Mockups
I then applied my new Style guide to the Mid-FI Wireframes. This involved a deliberate elevation of visual fidelity, refining and enhancing the user interface to portray a more polished and realistic representation of the final product.
Mobile First Approach to Responsive Design
I then created breakpoints for mobile and desktop devices using the 4,8,12 column method incorporated in Googles Material Design guidelines. Expanding from the mobile design to other devices was easy and formulaic, and collaboration easy when working with developers.