Designing for scalable applications
Blackboard Insurance is reimagining the entire commercial insurance experience with a customer-centric, technology-forward and data-driven approach. Turning the insurance industry on its head requires solving big, business and technical problems with creativity and curiosity.
Role: Product designer
I was tasked with being the responsible Product Designer to establish a scalable design system and component library that would be used across multiple applications. I was in charge of designing the design elements, collaborating with engineers to implement the components in Storybook and then testing them out in their respective applications. The objective was to establish a component library approach that was scalable and thus this led to an atomic design approach with considerations to atoms, molecules, organisms and templates.
Company
Blackboard Insurance
Year
2019
Role
Product Designer
Responsibilities
Pixel-perfect atomic Design
Design from early sketching to high-fidelity prototype
The design challenge
When Blackboard first was established, the platforms were built at the moment without much consideration to scalability or sustainability. A year in, the already developed platforms experienced design regressions, inconsistencies and lack of scalability. It was clear that we needed to take some steps to make the applications scalable. I led the project to implement a design and component system following the principles of Atomic Design.
The Process
The process was heavily inspired by Lean UX. This meant that it was highly iterative and about quickly developing the concept, testing it internally and externally and then learning from this to iterate on the solution.
This made it easier to fit in the UX work in the existing agile processes in Olapic.
Step 1: Understanding the anatomy of our apps
To get us started, it was essential to observe and understand how the users interacted with the platform. The better I understood their behaviors and interactions, and the underlying mechanisms in the system enabling these, the better I could challenge the status quo of the platform. Rather than trying to understand everyone using the platform, I used already defined personas to uncover essential user aspects. Olapic had previously developed three personas that functioned as representations of the most common users of the platform.
One persona was the day-to-day user of the platform. Her main jobs were to go to the platform, find content to use and then activate it.
Another persona was the manager of the day-to-day user, who was responsible for strategy, quality assurance and also to go through collected data.
The last persona was the manager of the manager. His responsibility was to make sure that the overall KPI’s were targeted and that the money went to the right places.
personas
The persona that ended up being in focus for the project was the day-to-day user of the platform, since it was her workflows and experience that needed to be improved.
I watched several recorded user research sessions and analyzed online behavior data collected with the tool FullStory to understand the behaviors. The user research equipped me to move on with a thorough understanding of the users’ jobs, goals and their frustrations.
The existing platform
The Content Engine enables brands to moderate media collected from social media. The main interaction is to look through collected content, and then decide whether to approve it, reject it or group it with similar images.
The image to the left shows the main part of the existing platform. There are filters to narrow down the volume of content, and then there are different actions related to the media.
Step 2: analyze & Define
With an understanding of the users, their behaviors and motivations, we were then able to list the main jobs to be done in the Content Engine for the persona ‘Hannah’. We decided to map her jobs out in a user flow that defined the steps of each job. We created the user flow in the online software called MURAL. This enabled all roles on the team (manager, designer and developers) to define the flow together in several workshops.
From this exercise, we had defined five main jobs for Hannah to do when using the platform:
- 1. Moderate new content
- 2. Review moderated content
- 3. Tag content to streams
- 4. Organize content
- 5. Look for content to use
With these jobs outlined, I was then able to move on to ideating on the solution.
user flow
We used the user flow as a tools to align everyone on the team on the most important jobs to be done for the personas. The flow changed along the way as we got more insights.
Step 3: Ideate
With an understanding of the current workflow of the user, we were able to narrow down the focus on what elements that had to be there in order for the platform to serve the user in her different jobs in the most optimal way. This led to the next phase of sketching out the new UI for the concept that would incapsulate all the findings. The sketches included “hot filters” which were previously used filters already applied and easy to close, different buckets for the content depending on where in the flow it was, and then a search bar disconnected from the filterpanel.
low-fidelity sketching
I used low-fidelity sketching as a way of concretizing and visualizing our initial thoughts of possible solutions in a quick and plentiful manner. This would create the ground for further discussion and help narrowing the focus.
The low-fidelity sketches functioned as a means for discussing the future solution, the elements in it, the visual and semantic prioritization, etc. As soon as the team approved the direction, I started sketching in higher fidelity to get a sense of scale, proportions and look. The higher fidelity sketching ended up being wireframes that would let everyone understand the direction of the design better than with the low-fidelity sketches.
wireframing
When I moved on to wireframing the concept, this also worked as a great communication tool with other designers and team members. I brought in my progress to our weekly design critiques to hear what other designers would say about it.
Step 4: prototype
After having sketched out the first concepts in higher fidelity, I moved on to creating a prototype of the desired solution. The goal was to be able to quickly get internal validation and then move on to external user testing with real users. We ended up talking to many internal stakeholders including other designer, developers, account managers and sales people to hear internal thoughts. Then, we moved on and tested the solution on about 10 external users from different brands. The feedback we got was invaluable and allowed us to make informed decisions about further iterations.
The following screens show the final result of the process.
New look, new flow
The new look is more simple, cleaner and with focus on the most important part: the content.
The content flow is divided into three main sections: queue, reviewed and media library. The three sections hold content through its journey from having been collected, to rights granted to then being publishable.
Step 5: implementation
The final vision and concept ideas were done in April 2018. The users were blown away by the new flow and design and everyone wanted to begin implementation right away. In May 2018, the first steps towards implementation were taken, and the implementation is still taking place.