Singapore Stories

Scan time:

<1 min

Sector:

Healthcare

Role:

UI Design

Client:

Abbott FreeStyle

Tools:

Figma · Adobe Photoshop

Context

What is the ‘You Can Do It’ (YCDI) Campaign?

YCDI is a marketing campaign that motivates patients who take insulin to order the FreeStyle Libre system through the direct-to-patient site or their healthcare professional (HCP). In conjunction, it helps HCPs to also recommend the FreeStyle Libre system for all of their patients who take insulin.

What is the FreeStyle Libre product?

FreeStyle Libre is Abbott’s product that digitises the pricking of fingers for people with diabetes. Part of the product includes a sensor that’s attached to the arm, when scanned using a FreeStyle Libre reader or the FreeStyle LibreLink (FSLL) app, it will give instant and accurate glucose readings and help to avoid hypo/hyperglyceamic events.

The Challenge and Approach

Abbott FreeStyle Libre’s region in Singapore came to us to build a page on their existing website that markets their product and increases sales and provides real life testimonials to the public. The idea was to allow existing FreeStyle Libre users to publish their own short story on how the product had transformed their life in a positive way. This idea had already been tried and tested in the UK region and saw a big uplift on customer sales.

An improved iteration on an already built design

Because this idea had already been done in the UK, which drove a large spike in trust in the product for the customer, it was a no brainer to launch the same campaign in different regions.

Win sensors to drive incentive

As a reward for sharing a story, a competition was set up that involved winning two free sensors (worth £116) for one person every month. Both ourselves and the client knew we had to give back in order to receive and having a recurring award meant encouraging stories.

Mobile first, for reasons both design and culturally

After talks with our client, it become common knowledge that the user base on mobile was far higher than the west, even compared to here in the UK. Mobile-first approach isn’t anything new, but it became more paramount here – therefore more resources were spent prioritising a mobile platform compared to that on desktop.

Give control back to the user

On the UK version, the user would submit their story and someone internally within Abbott would then have to build it. For reasons I’m unsure of, this was the way they wanted to operate at the time. Fast forward to 2019, Singapore wanted to make sure we allowed full control to the user and provided them with the infrastructure to build their own story, meaning all Abbott needed to do was simply approve it and in a click of a button – publish.

Paper wireframes for quick-fire renditions

Because this was an already built idea, all we needed to do was elaborate on an existing system, therefore we jumped straight into wireframing. I worked with paper here for quick turnarounds. Sharing these with our developers and clients early on gave us a foot forward with any technical concerns that may have needed discussing.

3-step method for ease and to reduce cognitive load

As this was an iteration that required more user input, we knew they had a few hoops to jump through in order to upload their story and wanted to make sure we wouldn’t scare anyone off. By simply creating a flow that included three steps, dividing forms into their respective ‘section’ – image upload, story submission and contact details and summary. In essence, this allows for an un-intimidating experience and reduces cognitive load for the user.

Designing states to further accommodate for errors

Thinking ahead of the curve and designing various error/empty states for any situation meant our design flow came under limited problems when it came to the build and test phase. Including this in the design file allowed our developers an easy way to visualise all error/information nuances.

Providing small onboarding messages to ease the entry and cancel out user error

We had the idea of spreading out instructions in their separate sections. Because with various limitations on what to include and how long a story should be, we wanted to make sure people had a clear idea of what they could input. With tooltips, we created a small onboarding experience.

Privacy transparency to calm data sharing anxiety

Another aspect we needed to drill down was to allow the users the privacy they deserve by only showing their initials and having a picture as optional on all approved stories. This was shown crucially in the design in order to reinforce trust. Additionally, any ‘tile’ that didn’t include a picture would adopt the energy colours included in Abbott’s FreeStyle Libre brand guidelines – ensuring consistency across the board aesthetically.

Google Sheets for an organised approach to testing

With all the states and pages designed, developing the page was simple. I created a detailed bug testing document in Google Sheets that showed full details on what needed to be actioned and liaised with the dev team to action any solutions.

This included all information that needed to be taken into account, including priority, page title, section, device type, status etc.

A smooth journey

With that, our page went live! We can’t disclose any metrics but we saw a big increase in engagement on the site with lots of stories being shared and a larger increase in new customers.

Moving forward

Learnings

Better design > dev communication when bug testing

A lack of clarity led to miscommunications and ultimately time lost, focusing less on the detailed specifics of each pixel and more on the bigger picture has since provided more transparency and better turnover.

Managing design components more efficiently

As a first time proper design system user, this project gave me the full ability to handle components. I think being more organised and efficient with atoms, I went away knowing more about how to manage an effective system.