This project consisted of a 5 month contract as a UX/UI designer for Hills Laboratories, a company specialising in analytical laboratory testing. The project was to develop an application for a process that was once done via fax/email and over the phone, to one that is done completely online. There were a number of different applications designed, these included a Analytical Substance Test ordering process, a Sampling Kit ordering process and a client admin portal that controlled data being input into the previous 2 applications. These apps enabled the customer to choose a series of tests/kits based on the type of substance they want tested, name the tests, place into a cart and fill out a form for payment and delivery.
View Application HERE
Communication tools used:
Design programs used:
Flow Charting
Flow charts were created to map out the user journey involving the online substance testing ordering process. The journey was broken into steps, categories and specific substances. Once a substance was chosen, a lab service test was then selected and placed in a cart/checkout. Order confirmation was then deployed. The flow charting helped to visualise and simplify the process pathways, helping with the initial planning process.
User Research
Workshops were conducted with the Customer service managers to gain data and insight into the substance testing ordering processes, customer information, their needs and behaviours. Online surveys and questionnaires were also used to gain further customer insight.
User Personas
4 personas were created in total to represent the main customer groups. We focused on factors such as demographics, behaviour and habits, as well as users needs, goals and behaviours.
Wireframes and Prototypes
Wireframes were built and set to establish the layout, functionality and structure of the application. Responsive patterns were also developed. The client and stakeholders were closely involved in the process, helping to evolve the functionality to a point where working prototypes were developed in InVision. This allowed me to make periodical updates based on feedback and amend the designs on the fly.
UI Design
Once the wireframes were signed off, I then used Sketch to establish the design guidelines, colour ways, typography, component architecture and behaviours. Finished pixel perfect files were then handed over to the developers to start building.