BROOKE

DAVIDSON

Brooke Davidson

PRODUCT DESIGNER

PERFORMANCE DRIVEN

With 20 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 mirrors the standard user-centered design process including starting with discovery and ending with validation and iteration ensuring to incorporate the user voice throughout. The tools change over time but the core principles of empathy, learning and listening remain.

I start in the discovery phase by validating the problem space, studying first party data, comparative analysis and listening to users.

Discovery

Sometimes I start on paper or a whiteboard but I ensure that rapid ideation and collaborative concepts are iterated with partner and user feedback.

Ideation

Once the design direction is defined, I produce the different versions needed medium to high fidelity, deliver including dev hand-off continually testing and iterating.

Validation & Iteration

Atomic Structure

Collaboration

Efficiency

We audited the design system, organizing our phased approach based on the atomic system.

Our volunteer-led,migration project not only conquered challenges but also strengthened team bonds through shared passion and collaboration.

Migrating to Figma with limited resources, we executed a phased approach, adjusting timelines to prioritize our MVP launch.

Discovering Design Systems

FINRA UI

Problem: The design system needed to be migrated to Figma to reduce our licensing costs for adobe suite.

�We migrated the FINRA design system to Figma leading to significant improvements in our process, efficiency, collaboration, and the overall delivery of product designs; during the transition, we thoroughly planned, researched, and applied best practices from top companies, ultimately re-imagining our design system from the ground up.

Atomic Structure

View Prototype

2023 FINRA Hackathon

A11Y

Proposed innovation: The current design system didn’t have support for color modes for accessibility, nor for flexibility in branding so we put together a design and code solution for theme-ability for the Hackathon winning first place in the Freestyle Category. We went beyond the accessibility standard and approached the problem with a lens of empathy and inclusivity.

Light Mode

Our default mode for our design system, lots of greys and blues. Users complained about low contrast leading to poor legibility.

Dark Mode

Dark mode requested by our power users who stare at analytics dashboards throughout the day and need to reduce eye strain.

Paper

Custom theme developed based on user feedback that prioritizes legibility with nearly black text on a white background and intentional use of color.

1st Place

Our team won 1st place in �the Freestyle Category.

View Dark Mode

Theme-ability for branding

FUTURE FORWARD

The theming innovation was a huge step forward on many fronts. It would allow our design system to apply to other brand expressions including our new partner NMLS, future business ventures and our internal clients that were slow to onboard due to legacy product branding.

Components in the product space

DESIGN SYSTEM APPLIED

Here are some examples of our products including the design system components we worked hard to re-build.

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.

I’ve built a click through prototype to explore the high fidelity experience in detail.

�High Fidelity Desktop

High Fidelity Mobile

INTERACTIVE

PROTOTYPE

FIGMA

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.

I’ve built a click through prototype to explore the high fidelity experience in detail.

​

Mobile wireframe

High Fidelity mobile

High Fidelity Desktop

INTERACTIVE

PROTOTYPE

INVISION

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. The retail group wanted to use RMX on the samsung.com site which would have been redundant.

We ran a test which confirmed our suspicions, RMX was a redundant experience embedded in the .com structure but was a great stand alone experience. 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 .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.

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