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
Hospital & Healthcare
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.”
