I worked as part of a small team including a Producer and Back-end Developer to create a mobile application prototype which would be used to support cancer patients accessing support information. The prototype used AI to provide tailored information based on the users input. My role was the lead UX/UI designer which involved creating assets which promoted usability whilst emphasising the style of Macmillan Cancer Support. This project also involved several presentations to stakeholders which allowed feedback and an iterative approach. This project took place in 2019 whereas the Data Visualisation Tool is a project which is ongoing.
Project Timeline
As this project had a six week timeline it was essential to identify key milestones and create target deadlines that the team could recognise and work collectively towards.
Application Navigation
Creating a user flow chart helped to map out key interactions and the necessary designs during the wireframe development.
Low Fidelity Wireframe
Application Development
Application Micro Animations
Micro animations were created using Adobe After Effects. These were intended to be used for loading screens, icon selections and toggles.
High Fidelity Wireframe
The high fidelity wireframes were created in order to demonstrate the outcome of each navigation. The app outlines a process of following the eHNA questionnaire established by Macmillan Cancer Support and then providing tailored information based on AI technology. The wireframe has been divided into 5 sections including: Start screens, user input (eHNA), prediction data, user search and user editing.
Application Mock-ups
Macmillan Data Visualisation Tool
During this project I was responsible for developing the user interface for a visualisation tool which would display cancer demographic data. This tool aimed to provide easy access for Macmillan professionals to source data which would assist decision making regarding support for PABC. This project involved several presentations to stakeholders where I represented Abertay University and present project updates.
Low Fidelity Mock-ups
These low fidelity mock-ups were created to demonstrate the basic functions of the tool and communicate between the team the possible navigations.
Phase 1: High Fidelity Wireframe
This wireframe was created during the first phase of the project and outlines the navigation of the tool.
Colour Combinations
Colour combinations were experimented with as I recognised that the tool may appear daunting to the target audience if an individual is not confident using technology. Therefore I experimented with a variety of colours and used Macmillan's iconic green to add emphasis to features.
Dashboard Addition
During a board meeting it was recognised that a dashboard would add a further level of visualisation to the tool which may be easier to understand when filtering through large selections of data. Therefore I created a design which displays the main categories and allows the user to explore these in depth.
Design Updates
The team discussed making the tool resemble the user-friendly feel in the patient-facing application.
I then began to experiment with colour schemes and a new landing page which identifies the loaded data. This also allows the user to explore regional information and provides efficient access. The addition of the dashboard was also created and this provides access to eHNA information.
