23%
increase
in session duration
PROJECT
Revamp the Bluebeam.com website and develop a new design system.
PROBLEM
Limited time frame with only 3 months until launch and the absence of a design system.
GOAL
Establish a foundational design system using an atomic design approach.
ATOMIC DESIGN
Having prior experience with the atomic design system at Spectrum, I was determined to implement it for this project. One of the key advantages of atomic design is the reusability of components, aligning seamlessly with the fast-paced nature of the team's workflow.
Simultaneously, I conducted competitor analysis for components and compiled a list of essential base components such as buttons, cards, and more.
PERSONAS
Prior to my involvement with Bluebeam, there was pre-existing work done to define personas. The primary objective for these personas was to uncover the use cases for the flagship product, Revu.
WIREFRAMES
With the business objective of directing people to checkout, I embarked on creating landing pages for each of the identified use cases. I initiated the process by developing low-fidelity wireframes inspired by the personas. The concept was to establish a template applicable to all pages, leveraging the design system concurrently in development.
Collaborating closely with a copywriter, I integrated the content tailored for each persona. I ensured the seamless integration of the copy into the pages and requested revisions when necessary. Employing Figma, I translated my initial sketches into low-fidelity wireframes and tested them across different viewports.
SYSTEMS APPROACH
While working in reverse, I consistently emphasized the importance of keeping the initial components simple yet flexible.
GOOGLE MATERIAL
Due to time constraints, I opted to leverage Google Material (GM3) for foundational components like buttons, badges, and cards. These components inherently act as building blocks, allowing for their combination to create templates and streamline the workflow.
ORGANIZATION
I employed two apps for documentation and organization. Miro was utilized to track my components list and create checklists, while Zeroheight was used to display and share design system information.
ApproveD layout
At various stages during the build, there was a need to present designs and secure approvals swiftly to meet the deadline.
RESULTS
A few months after the launch, there was a 23% uptick in the duration of time that unique visitors spent on the site.