Developing pharmacy B2B products based on Carbon design system

Summary

It is an online platform for pharmacies and patient portals provided by Bluebit soft. Bluebit soft was established with the main purpose of bringing all pharmacies in the Netherlands online. To achieve this, they developed five different products for pharmacies. Today, they operate over 100 pharmacies in the Netherlands.

Challenge

Bluebit soft didn't have a specific design system. All 5 Bluebit soft products had completely different designs, among which designers and developers felt the most challenging in terms of development costs and lack of consistency. After, they decided to use one design system for all of their products and start to redesign.

How might we use Carbon design system to create unique and accessible designs that meet our team's needs in a clear and pleasant way?

Outcome

In order to accomplish this, we researched, documented, redesigned, and evaluated designs that resulted in the Bluebit soft design team and were specifically designed for our designers who were looking to design new layouts for Bluebit soft products. Also, the new design includes a hierarchy, well-defined styles, and components that make all products look consistent.

My Role

As the UI/UX designer, I researched, analyzed, and created documents based on what we already have and what we need. Consequently, I redesigned products based on the carbon design system, customized carbon based on our design team's need, and visual designs for all of the Bluebit soft's apps, after that we evaluated designs as a whole.

Team members

2 Designer + 3 developer + 1 QA + 1 PM

‍

01. Understand

Context

Startups and organizations need a design system to make things work. Using a common language speeds up processes and increases consistency across mobile apps and websites. Since Bluebit soft didn't have a design system, we decided to start using Carbon so our designers would be able to design apps easier.

Problem Definition

As we were identifying issues, three came out as obvious problems for the team and the business:

• We don't have any design system: We couldn't use or design the design system due to the lack of coordination between the design team and other teams.
• Our designs are completely different: Each designer designed the products according to her own taste during the product design process.
• Handing off designs to developers: Lacking a common language between the design and development teams, the developers always faced problems of lack of coordination, unclear structures, and difficult development of designs.

Team problem

We need to have or use a design system to spend less time designing every component and layouts and have a consistent designs on all of the products.

Business problem

Without a design language, designers and developers can't meet deadlines and the team can't reach short and mid-term goals, which slows progress and hurts team motivation.

Discovery

1. Review existing designs

To begin, we carefully reviewed previous designs and documented all the points that needed to be considered. There are many problems, including complaints by developers about designs, inconsistency among designs, lack of a specific style for designs, lack of component library, etc.

2. Research on other design systems

We examined several design systems and after thorough consideration, we decided to go with carbon.

Carbon, Atlassian, Ant Design, Lightning, Polaris, Mailchimp, are the design systems that we examined.

In order to determine which enterprise design system could meet our customer's needs, we examined all of these systems and made our decision based on this review.

‍

02. Gain Confidence

1. List all the design assets we have and we need form carbon

After listing all the components, styles, assets, and patterns from the previous design, we determined what we had and what we would be using in the new design.

We did an analysis of everything we listed with the design of the carbon design system and we specified the name of each component, pattern, style in the carbon design system, what principles it was designed for, as well as where it is used. We were able to match everything we listed with the design of the carbon system.

‍

03. Fabricate

1. New logos with new redesign

As Business decided to redesign all products uniformly, it decided to have new logos for each product and enter the market with a fresh appearance. It was important to us that the logos had a uniform appearance and had consistency with each other.

2. Create design symbols

The carbon styles were transferred to Figma, then we transferred the desired styles to another artboard based on our requirements. The styles we had were selected based on Carbon's Visual accessibility checklist in order to produce the best output when designing components.

However, we were unable to effectively implement the design token in Figma, but we attempted to have the right namings for styles and components, and later, we could use design tokens to make it easier for designers and developers to interact with the design.

3. “Customize” component's based on Carbon

As a result of the previous designs, we were required to design some main components in a customized way so that it could meet our needs based on those previous designs. Considering the complexity of the components, we decided not to make many changes to them.

As a result of the previous designs, we were required to design some main components in a customized way so that it could meet our needs based on those previous designs. Considering the complexity of the components, we decided not to make many changes to them.

‍

04. Assemble

We then assembled all the components we designed and designed the layout of the pages, incorporating the different states of each component to ease the developers' concerns.

1. CMS 24/7

24/7 was the product of each pharmacy's content management system (CMS) for their own website, and they could produce website content based on drugs or based on categories they defined themselves.

As we designed this product, we didn't change the structure or architecture, but just redesigned and improved the visual part.

2. APL

APL was one of the products used to keep track of the stock of drugs as well as the prescriptions given to patients by the doctors. It was possible for the operator to see the prescriptions, deliver the drugs that were needed, and finally deliver the drugs to the courier to carry on the delivery to the patient.

The APL design had its own challenges, especially regarding the table patterns, but with the cooperation of the design team, we were able to easily solve this challenge and have a good output for the project.

3. Coach

Bluebit Soft's main product was the Coach, which came with a range of solutions that could be used to manage patients, pharmacy workers, management of communication with patients, management of access to other software for all users, etc.

As we began redesigning the products, we started with the coach first, since we were designing a product that contains most of the components that are in the other products, and it was the main product that we were trying to redesign.

4. Bezorgt

Bezorgt was a software that creates routes for delivering drugs by couriers, specifying the status of deliveries, zoning the map of the city and the location of the delivery, determining the number of couriers on the route, and displaying information about the prescriptions and the drugs in the delivery packages transported by couriers.

I'm sorry that I can't show more designs of Bezorgt at this time, but after APL, Bezorgt was one of the most challenging apps I designed because of the way routes were created as well as the zoning of the map and how the routes were displayed in the map.

05. Results

The project was a success on all fronts.

• New design style: Having a consistent design across all of our designs for the first time was a big deal for us.
• Use of new design system: We learned how to apply the design system to redesign an entire product from scratch.
• Reduced costs: In the team, time, morale, and financial costs were reduced by the consistency between all designs.
• New experience: Using a design system was a new experience for the entire team, which enabled us as a team to use it as our primary source for designing our other designs going forward.
• Fast development: Developers developed code faster because the designs were consistent and their front codes were available on the website for the design system.

‍

Learnings 📖

• This was the first time we experienced the carbon design system.
• We learned how to apply the design system to redesign an entire product from scratch.
• We have tried to implement what we have learned from Carbon Design in terms of accessibility in our designs.
• The experience I gained from working on five products and improving their designs helped me to strengthen my empathy and communication skills between my teammates.

‍

Thank you 🙏

‍