BROOKE

DAVIDSON

Brooke Davidson

PRODUCT DESIGNER

PERFORMANCE DRIVEN

With 18+ years in the design world, I am a creative leader that loves to define and foster brands, build strong creative teams and drive results. Capable of balancing branding and business goals, understanding stakeholders and providing concrete solutions that result in long term success. Partnering easily with internal and external creators. Capable of defining and evolving a brand and developing a design language that is compelling and relevant. A natural mentor and coach, I love collaborating and sharing ideas, encouraging creative and professional growth for team members.

CREATIVE �PROBLEM SOLVER

My Design Process

PAPER TO PIXELS

My process begins with research and pen to paper. I try to understand the problem for the user and the root of the business goals to ensure that I can establish clear objectives and align my solutions to business goals. I do the classic wire-frame to high fidelity transition but I’m constantly challenging the scalability, feasibility and elegance of the solution.

I usually take pencil to paper and start researching by checking out the competition, the latest web trends on a few sites including Dribbble and Behance.

DRAFT

Sometimes I start with hand paper prototyping or go straight into wire-framing using Comp, XD, UX Pin or whatever makes sense for the �project.

WIRE-FRAMING

The final phase of design includes high fidelity prototypes and handing off assets to developers. I am a dev so I usually ‘get it’ and try to make it easy on them.

HIGH FIDELITY

QR CODE

RMX EXPERIENCE

CONVERSION

Customer scans a QR code with their personal device.

The customer explores the immersive experience on their phone.

Customers buy in store, in app, on site or through partner stores.

IMMERSIVE RETAIL EXPERIENCE

SAMSUNG

Problem: How do we maintain the hype without picking up the phone? ��We were launching a new phone in the new normal and needed a touch-less experience for retail to try to give the same exciting feature driven experience we would typically have on a phone the customer would pick up in the store. We added QR codes in the retail locations so users could pick up their phone and browse the experience on their own device. We added interactivity and lots of rich media content to boost excitement about the products and encourage sales.

INTEGRATIONS

The desktop experience of RMX was built to be able to integrate into partner stores and experiences seamlessly.

This project followed a swift cadence due to the product launch and so the wireframing phase was very brief.

​

A few options were put together including a features gallery that had split categories that scrolled horizontally. This direction was selected for high fidelity prototyping.

WIREFRAME

Process

The project moved quickly into high fidelity. Visual design was approached with the intention of versatility.

​

Minimal use of color, strong gray tones and minimal visual elements beyond product photography helped make this a flexible immersive experience that could be used for multiple products.

HIGH FIDELITY

The desktop experience was envisioned as a modal, providing a horizontal scroll gallery to explore the key product features. While there was a mobile first approach the desktop modal was meant to be easily incorporated on the Samsung site or partner sites with minimal modifications.

​

The UX had to be flexible to incorporate both many and few product features making it scale to fit products from phone to tablet and accessories.

​

The branding application needed to be minimal and not overtly Samsung so it wouldn’t compete with partner brands like Verizon or Best Buy when incorporated on their site.

BRAND & UX

We used a combination of first party data and user testing to build and validate this experience. We knew we needed to include product images, features, specs and reviews as essentials for customers to feel comfortable with a purchase.

​

We used usertesting.com to create a test with a diverse group of participants. We created an interactive prototype that they would be directed to go through on their own. This test was unmoderated but had consistent positive results.

DATA & TEST DRIVEN

This project worked so quickly that the stakeholders, design and developers met multiple times per week to check in on progress. I made sure to ask critical questions about functionality, limitations and helped drive solutions that met our design goals and development timeline.

​

Having a background in development helps me identify these issues and communicate potential challenges efficiently. I understand the language and limits. My empathy and communication with developers is strong.

DEVELOPER HAND-OFF

FEATURES

Features were a primary decision driver and the first stop in the user flow.

THE WHY BEHIND THE USER FLOW

RETAIL MODE X

DATA DRIVEN

We mapped the user flow based on past first party data about the customer journey.

OFFERS

Bundles, accessory deals and special offers help increase average order value.

SPECS

Most users couldn’t interpret the specs but wanted the information and comparisons.

LIVE CHAT

Our flagship phone had a live chat demo for users to explore the device.

REVIEWS

Customer reviews provide credibility, expert reviews provide education.

USER TESTING

VALIDATION

I worked with a colleague with UX Research expertise to build a prototype and test it using usertesting.com. During user testing we validated that our user flow was aligned with customer’s top priorities around wanting to explore features, specs and reviews in priority. Users loved the simplicity.

​

Following our user test we determined that a third-party desktop application would be appropriate but incorporation on samsung.com would be confusing for users since there were already specs, reviews and features included on the marketing landing pages.

RESULTS

We launched our flagship phone on this experience in stores and within weeks we were scaling and adapting the experience for additional devices. RMX was a hit and presumably has scaled and flexed to support many device sales both in store and online.

FLUENT

STARDUST

YAMMER WEB STYLES

Our sun around which each child design system orbits.

Our primary integration partners system which has an influential pull on our design decisions.

Our home space where we let our unique identity shine.

DESIGN SYSTEMS

MICROSOFT

Microsoft has a parent design system Fluent which evolved from Fabric. This overarching system creates coherence and synergy between the Office 365 applications and helps facilitate development by sharing a common code library. Each individual product has their own identity layered on top of Fluent and some products have established systems like Team’s Stardust. Yammer Web Styles was our unique identity layered on top of fluent. I worked hard to align with the suite, our primary integration partner teams and maintain our unique brand.

INTEGRATIONS

We have other integration partners like Outlook, Sharepoint, Office 365 and OneDrive.

NESTING

Communities, type of notification and channel were all mapped in the IA structure.

INFORMATION ARCHITECTURE & SCALE

NOTIFICATION SETTINGS

PROBLEM

We had first party data, users didn’t understand their notifications and they were annoyed.

EDUCATE

Balancing needs to educate and provide a simple and quick way to modify notifications.

SCALE

With new channels for notifications being rolled out the system needed to scale quickly.

ALIGN

As much as possible we tried to align with existing design patterns and create a consistent UX.

FLEX

Unique controls for our user base that didn’t have the same usage as the rest of the suite.

Green circle signifies mouse click

Yammer notification settings was a collaboration between the mobile and desktop teams. Each platform had unique settings and restrictions and our goal was to unify the experience as best as possible while optimizing for the platform.

​

We gathered examples from our competitor Facebook Workplace as well as within Microsoft with our application partners including Outlook & Teams. I scheduled meetings with their design teams, got access to Figma boards, collected screen shots and recordings to benchmark the settings experience.

RESEARCH

Process

Rather than wireframe because we were building from an existing highly developed design system, I worked in low fidelity for my first explorations.

​

This helped us look at existing components to see if their default behavior would work for our use case and helped us identify when we needed to make custom components.

LOW FIDELITY

Process

This project needed to be vetted by Yammer stake holders to determine resourcing for development. I put together a high-fidelity prototype and deck to walk them through the design problem and our solution.��Not only were they impressed with the innovative UX approach, they also were impressed with the visual balance and care taken in creating an aesthetically pleasing experience for something as utilitarian as Notification Settings.

PRESENTATION

We worked hard to include the latest Fluent design system guidance while using some Stardust (MS Teams) visual standards and most importantly the Yammer look and feel. It needed to feel like Yammer but also integrate seamlessly into experiences like Outlook without feeling out of place.

BRAND & DESIGN SYSTEMS

Because of the complex nature of this project, engineering was brought in early in the process to weigh in on the challenges of each exploration. Hand-off was simple because of the high-fidelity prototype and clear communication.

COLLAB W/ DEV

WHY ME?

BROOKE DAVIDSON

I bring a unique mix of skills to the workplace based on my background and experience. I have a formal fine arts education, a front-end coding background and marketing and branding experience.

I have a traditional fine arts education which has taught me strong foundations of the principles of art and color theory.

FINE ARTS

I have built brands from the ground up understanding how to build momentum, foster trust, and emotional connection with the right audience.

BRANDING

I used to get paid to code so I understand the strain of frameworks, browsers, platforms and timelines. I communicate clearly with engineers with respect and understanding.

EMPATHY