To design and build a new version of the portal which is more intuitive, modern and usable on all devices and browsers.


Time - the CEO wanted it delivered yesterday. Money - there was a very small team working on it. Pandemic - an unpredictable issue.

My role

To lead the whole design project ensuring we deliver a good product to our users.

  • UX project planning
  • User research
  • Product analysis
  • Wireframes / mockups / protoypes
  • Brand development
  • Interaction & UI design
  • Testing
  • Component coding


Chrysalis Finance


9 months

Responsive web application

Chrysalis Finance Portal

Chrysalis Finance provides payment solutions to medical and dental practices. The portal is used to create and manage applications for finance. It serves both B2B (clinicians) and B2C (patients/applicants) customers.

What problem were we trying to solve?

  • The system was highly functional (except for a few bugs), but the user experience needed improvement.
  • The app did not work on all devices
  • The style was very 90s
  • Too many buttons
  • Sharing finance plans was not easy.

How did we know this was a real problem?

The customers told us as they looked elsewhere to our less functional but more modern competitors.

The current system was perceived as being ‘out of date’.

Why was it important to solve?

The business was losing money. Users and internal staff were unhappy.

 Old style portal
product demo

Who are the users? What are their goals and motivations?

Dental and medical clinic managers wanted an app which they could show their customers to elevate their business reputation.

Patients wanted to pay for treatment as and when they needed it. 

Savvy users these days want easy-to-use systems, no hassle.

How would we know if we’ve solved the problem?

Through positive results on both usability tests and feedback sessions.

Business will begin to break even again even increase.

My process

Project planning

Working closely with the marketing manager and technical director I wrote a full UX project plan to try to shape what was going to be needed to achieve our goals.

Getting to know the user

I conducted different types of user research:

  • Ethnographic - Visits to dentist surgerys, medical centres and hospitals. I chatted with our users, and asked them to explain to me how our business helps them in their day-to-day.
  • User interviews - to discover the positives and negatives in the current system
  • Internal interviews - to discover what the staff felt needed doing
  • Competitor research - to find out what they were offering / find inspiration
  • Personas - I created personas based on what I had learnt so I could communicate the design through their voices not mine

Product analysis

  • Information architecture mapping
  • UI and usability testing / user problem analysis.
  • Time management - setting expectations of Sales team and management
  • User journeys - to define where the blockers were and how we could fix them
  • User experience maps - to define the patient and clinician journeys to communicate with the team
  • Current UI style, user flow, and component analysis


Using Adobe Illustrator for high fidelity, Adobe Experience Design for low fidelity - I created a lot of:

    • Mockups / Wireframes / Prototypes
    • Component interaction design

Testing and iterations

I conducted testing sessions both in-house at clinics and via video calls. Each session was used to assess how they would use the new portal design. If users found anything hard to use / find, I would discuss this with them - then iterate the prototypes. Overall the sessions were positive so I knew we were heading in the right direction.


The development process would start with me coding up templates of components and pages for the developer to use. I would test these to check the interaction states worked, and accessibility standards were met.

  • Modular SASS, HTML5 and jQuery components
  • Everything that could be modularised was e.g. colours, spacing, layouts, browser prefixes
  • I designed and built custom icons using SVG font generator
  • Version control was in Github

Testing / iterations

The whole system was tested internally by myself and the team. The tests were:

  • Set out in a testing strategy plan
  • UI functional tests - to check things worked as it should
  • Cross browser and device testing - using Browser Stack and as many actual browsers and devices I could find
  • Usability tests - internal and external

Soft launch - Feedback sessions

We rolled out a soft launch to around 15 clinics. We ran short usability test / feedback sessions with these customers, so we could iron out any real-life bugs quickly. As the portal had many parts, we rolled out these segments one at a time so we could quickly test and turnaround problems efficiently.

Main launch

We rolled out the product to our 2000 customers overnight. We ran a marketing campaign leading up to it which helped ease people in. Complete with training guides and videos. I’d help create the web design and email imagery and videos for.

My wellbeing

As you can see I’ve been very busy this year!

But one of the most important parts of my process has been in maintaining my wellbeing.

Due to the Covid-19 pandemic, like many others my lifestyle changed. Working everyday from home - alone (excluding my pets) - can be isolating and difficult. But, I have kept up my motivation and positive mental attitude, by doing regular dog walks, tea breaks, and meditation.

Example prototype videos

Early on portal flow:

Cancelling action flow:


We’ve already had two clinics return to Chrysalis.

Customer feedback has been great.

Time will tell if we’ve fully achieved our goals but it seems promising so far.

Lessons learnt

Pandemics are hard!

Testing / keeping up good user communications pays off with little iterations needed once at production stages.

A well thought out design process works.

What am I most proud of?

A system built on a budget which is truly user centric. 

Improved coding skills.

Really happy customers (so far!).