Redesign Process: Fullscript


  • Type: Creative Direction, UI Design, UX Design, Web, Marketing

Redesigns are profound. As the ship date approaches, the team can get caught in a turmoil of emotion. After months of work, we ask ourselves, “Is it ready? Is it ever really ready? How will users react? Will they love it or hate it?” We feel fear and uncertainty, but also optimism and even bliss.

And then we reach the finish line.

Getting Started

A little over a year ago, alongside the conception of marketing collateral for the release of two new products, I provided direction to the complete Fullscript rebrand implementation. In 2017, Fullscript was recognized as the top performer for growth in Canada's capital city, doubling its growth over 1,245 per cent from the previous year.

First, let's take a step back with some background on the company: Fullscript (formerly Healthwave) enables practitioners to dispense products from the cloud, without the cost and hassle of stocking physical inventory. Practitioners are also able to create an online-based dispensary as a digital storefront with their practices' on-brand customization, making running their practice a hassle-free experience.

However, dispensing products from a cloud presented challenges with the relationship between how a practitioner would manage their existing physical inventory alongside a "digital" inventory. So ideas were born to introduce an innovative inventory management system for managing the practitioners' physical stock, and a new Point-of-Sale system for instant, in-office checkout via a unique app and credit card reader. Along with the creation of these two new products, Fullscript was also looking for a refreshed brand and website that would act as an effective delivery vehicle for their expanding services.

Ideating with Post It Note, essentially the global ambassador of Design Thinking.

Design with Intent

When I have an idea for a feature or design, I spend a long time discussing and thinking about its implementation. Once I have arrived at a general understanding of the functionality and purpose, I can start converting these ideas into sketches. The first step was brainstorming a new name. Great names do not come from lightning-bolt moments, and after a series of large company-wide brainstorming sessions, the name Fullscript was choosen because it strongly aligned with the brand description and vision. Due to a powerful existing visual brand familiarity, we all agreed that the brand colours should not change.

Full - Meaning everything a patient needs to be successful in their health.

Script - A sequence of instructions a patient follows to achieve wellness. A nod to the digital spirit of the company.

Design is for People

    “Design thinking is a human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.” 
    — Tim Brown, president and CEO, IDEO

    Next came designing a new, rebranded website. I started by gaining context and re-framing the project. It is important to begin with research, because without context and insights it is impossible to design in a way that tackles systemic challenges. Having been through a few redesigns, I've learned that the design system should be approached from the outside in. This meant scouring the Fullscript forums to see where existing users were being most vocal about common requests and complaints. User studies and company interviews were conducted to identify pain points and understand how users experienced the website. The findings were synthesized and broken down into three categories:

    • Shortfalls in website conversion 
    • Fragmented experience
    • Ungainly  navigation

     

    The old website featured an uninspiring and cluttered call to action that was diluted by a other confusing navigational actions. There was also little visual connection between the logo style and the website interface.

    Sketch, Iterate, Simplify

    Understanding these challenges allowed me to begin creating solutions. A series of moodboards were created to act as visualizations of the success I wanted the project to achieve and to align others on the vision of the project. Sketches turned to wireframes and then into basic designs. These designs were uploaded on InVision so that I could prototype the new website. This was important because it allowed the team to navigate responsive designs and acted as a platform for open discussions on various aspects of the designs amd usability. There were a few dozen iterations during this phase, and it took a month of work to feel comfortable not only with the visual design but with how it solved the challenges. 

    The new landing page for first time visitors

    The new landing page for practitioners with existing inventory

    The Solution

    We had reached the finish line. The three issues identified earlier  in the research stage were solved in the following ways:

    Shortfalls in website conversion  Design-boosted conversion

    The time it takes for an individual to make a decision is directly proportionate to the possible choices he or she has. By decreasing the number of choices for the user, the decision time and anxiety in making a choice is reduced. I minimized the distractions on the homepage, while  keeping the functionalities of the page intact.  The header is the most important part of the page, and my approach was to write a clear, focused value proposition and feature it front and center. Including a very simple signup form near the top acts as a funnel to generate leads.

    Fragmented experience  Consistent brand experience

    Good consistency limits the number of ways actions and operations are represented, ensuring that users do not have to learn new representations for each task they do on the website. By using the right choice of language, familiar layout conventions, interactions for the user's expectations and a harmonious repetition of visual elements, I was able to reduce learning and eliminate potential confusion. This mirrored the Fullscript mandate to deliver quality and predictability.

    Ungainly  navigation  Clear website navigation

    White space keeps everything legible and scannable on the page and including it in the design of the new site was a powerful way of drawing the users' attention to a particular screen element. It also represents the Fullscript brand by communicating elegance, openness, freshness and ease of mind.

     

    It didn't just end there; design always evolves. The CMS platform that the website was built on allowed us to track how users engaged with the content. We split tested different layouts of the website to ensure that the design was easy for visitors to understand and the conversion rate was the most successful it could be.

    “Each year, Ottawa Business Journal recognizes the region’s rapidly growing firms with its Fastest Growing Companies awards. Fastest-growing champ Fullscripts' three-year growth rate clocks in at an eye-popping 3,128.6 per cent – more than double its already impressive mark of 1,245 per cent from 12 months ago.” — OBJ, May 2017