Value-based healthcare solution


Hospital & Healthcare

The Challenge

The client is an Australian organisation that provides patient-centred care for Primary Health Networks, hospitals, and health and injury insurers. They aim to establish a digital solution for PROMs (Patient Reported Outcome Measures) specific to the Australian marketplace. The client engaged Lumi IT Group to develop an end-to-end application for their national platform.

Project Time

Six months for the first iteration of the product, ready for client’s acceptance testing (architected, designed, developed, integrated, and tested). The team at Lumi IT Group and I are continuing to work alongside the client to strategically scale their product on an ongoing basis.

My Role

Visual Design, Wireframing, QA Testing, CSS, Information Architecture


Lumi IT Group is a boutique software product development company with clients across multiple industries and brands.

I am the sole designer at Lumi IT Group.

At the completion of this project’s first iteration, I had been with Lumi for a year. We worked on this project as a small team comprised of the founder, a project manager, two engineers, and myself. To this day, I strongly contribute to and direct design decisions across every aspect of our business and strongly contribute to UX and UI strategy for ongoing work with this client.

I grew immensely during my time working on this product, with my key achievements being:

  • Establishing a design system based on Bootstrap framework. Not only did this maintain a consistent visual style across the platform, it allowed our front-end developer to easily follow the look and feel of the design. Less work for them and fewer issues for me while conducting usability testing - win-win!
  • Establishing a UI kit as part of the design system. Having a pool of existing page templates covering a wide range of features helped speed up the design process when adjustments or new work was added to the scope.
  • Juggling many different hats. As the sole designer, I was the person most familiar with both the design system and functional requirements of the product. My responsibilities included constructing sitemaps and wireframes, UI design, creating the CSS file for the design system, and overseeing and managing the development team while conducting QA testing.

Our process

Our process for this project was based on Agile methodology with DevOps delivery. This framework was chosen to suit the client’s evolving business and technical requirements.

Image: Agile methodology diagram
Image: DevOps diagram

Content audit & sitemap

The team at Lumi and I kicked off by running a content audit listing and organising all available information and features. Based on our insights, we constructed a sitemap, taking into account the client’s motivations and objectives for their organisation.

Images: Content Audit
Image: Sitemap

Wireframing the solution

Our next step was to create low-fidelity pencil wireframes. We mocked up screens to help clarify the flow, group related features, and establish a standardised visual hierarchy and structure.

Image: Pencil wireframes

Mid-fidelity wireframes

I was responsible for creating mid-fidelity wireframes and building an interactive prototype to communicate our design decisions to the client.

I prioritised creating editable templates for groups of elements that were visually similar. This allowed me to maintain consistency across layouts, save time in the wireframing process, and would also be beneficial for creating reusable components in the upcoming development process.

Image: Example of an editable template

The final wireframes were a combination of these templates, a handful of one-off layouts, and annotations to be read by both the client and our development team.

Image: Mid-fidelity wireframes

Visual identity

I directed the visual identity for the product by iterating through moodboards and mockups. Since our plan was for our front-end developer to use Bootstrap framework to build the product, I made sure to design the product according to Bootstrap’s grid and layouts system. I also designed the product’s components according to the style and behaviour of those offered by Bootstrap. To compensate for any components not provided by Bootstrap, I worked with our front-end developer to select and customise third-party components to suit our needs.

Throughout this process, I kept an open line of communication with the developer to ensure that the product would work responsively across a wide range of screen sizes and would also be easy to modify or build-upon as required by the client’s needs.

Once the initial screens were approved by the client, I created a pattern library for the product (uploaded and hotlinked in InVision for quick navigation). In addition to this, I created a supplementary components sticker sheet that would allow me to add details or additional components as needed.

Image: Pattern library
Image: Dashboard visual design
Image: Components sticker sheet
Image: Devices mock-up

Handover CSS for front-end development

With the visual identity consolidated, I created a HTML file of Bootstrap components, then wrote CSS to style them according to my pattern library. To speed up the process, I initially used a Bootstrap CSS generator to broadly apply my UI design across basic components, then manually added in any interactions and CSS not covered by the generator.

Image: CSS overrides
GIF: HTML playground

Development and QA testing

During front-end development, I worked closely with the developer to identify and resolve any missing interactions not covered in the UI kit or high-fidelity wireframes.

At the same time, I conducted manual functional and regression testing for features as they were published to ensure that they satisfied all requirements of the design.

At the conclusion of each sprint, I wrote functional test cases to speed up our regression testing process. Our efficiency was further enhanced once these test cases were automated by our developer.

Image: Functional test cases


The launch of the product has been a tremendous success. We received positive feedback from the client from our very first month of engagement. More than three years later, our relationship has evolved into a partnership that continues to the present day.

“The Lumi IT Group has assisted us above and beyond what other technology providers offer and we see them as a valued partner for the ongoing success of our business.”

Key takeaways

  • Have a clear plan for the scope. Our tickets occasionally ballooned from the complexity of the features required. Having a strategic plan helped us manage out-of-scope requests so we could deliver a quality product on time.
  • Involve engineering upfront. Maintaining an open channel of communication between myself and the engineers benefited the entire team. On one hand, it gave the developers insight into the users’ needs, allowing them to offer technical solutions right off the bat. On the other hand, an understanding of technical limitations helped inform my design strategy.
  • Communication is key. I gradually took on a leadership role over my past four years at Lumi. Managing communication in our small team became my strong suite, and I found that clear communication, while essential in all stages of a project, would make or break our delivery timeline especially during the testing stages. Since I was in charge of working with our two engineers and project manager to identify and fix issues, I learnt to prioritise efficient and clear communication - it ensures we are all on the same page.
  • Think of mobile early. Long name entries, character limitations, button placements, and heading sizes are amongst a few of the factors we took into account during design and development. Even though the initial scope did not require a mobile design, establishing a design system based on Bootstrap framework, as well as keeping responsive behaviours front-of-mind in the wireframing process, shaved considerable time off our delivery timeline.
  • Reuse components wherever possible. This substantially sped up our design and development process. It also allowed for easy tweaks as we were working with an evolving product - anticipating the inevitable change requests.

If there were more time available, I would:

  • Construct a user flow diagram. It can be argued that we omitted this step as part of the Agile manifesto, ‘Working software over comprehensive documentation’. However, other projects taught me that progressively creating a user flow diagram as we delivered features left less room for misunderstandings and systematically addressed use cases - ultimately enhancing our agility.
  • Advocate for usability testing. This requires more time and budget in the initial stages of a project. However, in the long run, having real users conducting exploratory and comparative testing before going live would help reduce the risk that our features don’t meet customer needs. The by-product is that it would save us from having to rework those features, ultimately saving time and money.

More projects

Crowd-sourced travel itinerary library
Designing for a SaaS web application.
Back to top