Web, Brand, and Product Design for Notebooks.
©2021
![A screenshot of the Abstract Notebooks Landing page](https://images.ctfassets.net/06s354hi0b4y/3E2ENUWYohQXrwSCS0rm5r/2150c43d8baecacd779e9d5bc97786bc/project_notebooks_hero.jpg)
// Overview
Notebooks is Abstract’s newest product that aims to give the design process a home. It combines documentation and reviews to ensure everyone on the team has context.
// Responsibilities
Abstract is lean, so Mike helps with work on the marketing, brand, and product teams. He designs and manages everything on the marketing site, helps with marketing automation, and designs for the product.
// Goals
Mike’s primary goal at Abstract is to drive interest, sign-ups, and participation for Notebooks via the website. Secondary to that, Mike focuses on attracting talent and supporting brand design.
Design
Process
![Screenshots of tools we used at Abstract to identify problems and challenges](https://images.ctfassets.net/06s354hi0b4y/4tIvpf1qNwGoR4wHM2ceAS/cc5658c9f3638a715d9431a717e06122/project_notebooks_discovery.jpg)
// Discovery
Via data, analytics, and user feedback, our team uncovers areas for improvement in both our marketing materials and product. These challenges initialize projects and are added into our Agile process to be prioritized and addressed.
// Strategy
“Different minds see more parts” is a company principal at Abstract. To gather ideas, we create a collaborative doc that contains all of the context around a challenge. We then start a whiteboarding-like phase asynchronously. During this stage, we share, critique, and refine possible solutions.
![Screenshot of Abstract Notebooks and the icons of tools we used to strategize at Abstract](https://images.ctfassets.net/06s354hi0b4y/60NqRtfPhJO2MvvXeNbVNY/ccdd37a10c3d636f449ef72dafbd6806/project_notebooks_strategy.jpg)
![Screenshot of Figma and icons for tools Mike used to visualize solutions at Abstract](https://images.ctfassets.net/06s354hi0b4y/5yXqwfj2dcjD63Snc5l8kh/58b7c49a608860805745f849d9342c0b/project_notebooks_visualization.jpg)
// Visualization
After determining strategy, we dive into ux and visual design. At Abstract, Mike primarily uses Figma and Webflow as creation tools. We share our work twice per week with other designers, stakeholders, and the engineering team to ensure we’re on track and get outside perspectives.
// Implementation
Mike leads implementation for web and email projects that deal with marketing. The primary platforms for are Customer IO and Webflow with bits of Zapier and Segment. When working on product features, Mike works directly with engineers to ensure design is feasible and successfully carried out.
![Screenshot of Webflow and icons of tools Mike used implement solutions at Abstract](https://images.ctfassets.net/06s354hi0b4y/5o4A5nBNnouOEZJajLeDNs/a4fa3e98ce6f503942f8880743f3328b/project_notebooks_implementation.jpg)
Outputs + Outcomes +
Outputs + Outcomes +
![Screenshots of the Use Case Page Designs that Mike made for Notebooks Screenshots of the Use Case Page Designs that Mike made for Notebooks](https://images.ctfassets.net/06s354hi0b4y/1Nm5g4pdamJvrnERztGUOI/a0ea5d7fc617a3876f007e4981e1d11c/project_notebooks_outcome_1.jpg)
![A screenshot of a homepage design that Mike made for Notebooks A screenshot of a homepage design that Mike made for Notebooks](https://images.ctfassets.net/06s354hi0b4y/C2PA9th2bX9YM5DAPXJwu/b3680f2c24457505da353e88dd433f71/project_notebooks_outcome_2.jpg)
![A blog hero image Mike created for Notebooks. Direction from Jason Combs. A blog hero image Mike created for Notebooks. Direction from Jason Combs.](https://images.ctfassets.net/06s354hi0b4y/1ALaEQ57gosqZH5YzpQ12I/0628e03f8ea9394d790a79d1cdbe8c25/project_notebooks_outcome_3.jpg)
![A gif of the sign-up screens Mike designed for Notebooks A gif of the sign-up screens Mike designed for Notebooks](https://images.ctfassets.net/06s354hi0b4y/5g3Q1x0DC2IMfyloZaBLCD/52815b0f926ae23eedbf23cc7a51a61d/project_notebooks_outcomes_4.gif)
// Outcomes
Notebooks is still in the process of launching. Our team continues to measure, iterate, and improve upon our solutions daily. Stay tuned
// Team
Brand
Jason Combs
Marketing
Sara Howshar
Content
Alison Harshbarger
Strategy
Mike Perez
Direction
Daina Lightfoot