SERVICES: Website design, Modular Web Block Creation, Responsive
OPPORTUNITY: In 2021, our in-house team at BBEARG collaborated with the digital brand and product design studio, Upstatement, to reimagine the Brené Brown website. We worked closely with the contracted team to narrow down the visual style and oversee the development of the front-end pages. Once the front-end was determined, I lead the design of our back-end account pages and the creation of templated blocks for our internal team to use as they re-formatted the pages to make the updated look.
Referencing the front-facing pages of brenébrown.com, working within Figma, the back-end designs were built to be modular and flexible for a diverse range of content. As I created the desktop style-guide and fleshed out a few of the individual pages, I developed in tandem the mobile equivalents to ensure that the specifications would be accurate and the user experience maintained.
Creating the Style Guide & Blocks
The style guide helped identify font treatments, CTA blocks, buttons, links, and graphic elements. The Figma files with these styles were then delivered to our developers, Alchemy + AIM, for coding.
Implementation
Once each of the account page elements were determined, it was time to start fleshing out some of the key pages that needed unique features to be coded, and thus, designed independently.
These pages included the Cart, Checkout, FAQ, and email template.
Newsletters
Built in Figma, I worked with our developers to transfer designs into Mailchimp and user test the experience across multiple email provides, on both Mac and PC.
