Tumgik
Text
Reflection
This project aimed to improve the running of St. Johns Charity which is the main ambulance service in New Zealand. We did some 2nd part research into St John and other Case studies as well and 1st Party research where we had the opportunity to interview an EMT to finf out what their experience has been like working for St John. We used this research to discover what problems St John had that we could solve for them. We then created personas to allow us to narrow down what we believed, based on our research were the things that users needed most from a desision solution and wrote a how might we question and aims to base out design approach on. These helped to inform our designs by giving us a clear goal of what we aimed to solve for the company and how this would help to fix some of the problems that St.J John is facing. Once we had created some early prototypes we ran several user tests, we listned to the users and took from that feedback what we found most useful and implemented in into our design to better cater our solution to the people who would be using it. We created our solution and presented it in a way that viewers could see how a user might go screen by screen using the application. By being so careful to take this process step by step and allowing each part to inform our final design we were able to come up with a design that could truly fit our users needs. By researching we were able to put aside any biases we might have had and actually look at the problems the company is facing and desing a solution that is atually helpful. By considering our aims and objectives we were able to focus on the most important parts of the problems we had defined and create a solution that was aimed at one problem and do it well rather than trying to solve multiple and doing it poorly. Finally, our testing allowed us to see what we had missed and what was most important to users in order for this application to truely meet their needs. 
0 notes
Photo
Tumblr media Tumblr media
Component Library with explanations
0 notes
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
Final Watch Screens
0 notes
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
Final Phone Screens
0 notes
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
Final iPad Screens 
0 notes
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
Final Desktop Screens
Solution Summary :
We implemented out feedback and finalised our design system so that the different screen sizes were easily set up by simply reducing the size of components and text by 20% for each size difference. This was not the case for the watch however to maintain readability and the watches text size is the same as the phone and other elements have been changed to fit. We created an all in one application for staff, and mainly EMTs (front line staff) to be able to have effective communication with the company. We created it for several different screen types so that the application can be used on the go with whatever devices the user prefers.
0 notes
Photo
Tumblr media Tumblr media
We added a navigation drop down on the phone instead of the side menu so that it was more easily accessible on the smaller screen but the options didn’t have to sit on the screen all the time
0 notes
Photo
Tumblr media Tumblr media
We changed the calendar version so it flicks directly to the person’s next shift to help with navigation on the next screen and they can choose the month and go side to side with days to navigate.
0 notes
Photo
Tumblr media Tumblr media Tumblr media
Some of the watch functionality had to be limited to we simplified the messages to only arriving and then the user can acknowledge them - as shown here with the tick.
and the user can flick between contacts and call them but not send them messages
In order to use a smart watch you have to have another device so users will not miss out on functionality and can use the watch as a supplement to the full version on other devices.
All ambulances have iPads, according to the interviewed EMT, as well so there will be no problem with this.
Tumblr media
This was decided after doing a size test
0 notes
Photo
Tumblr media Tumblr media
Another user test and the main feedback was that the three colour system was confusion with knowing which circle to press for each urgency so I made it so that there were always the three colour options and then there would only be one dot on the message with the appropriate colour. This helped the user to understand the system. 
They also said that they were struggling with navigation and knowing which page they were on so I added a navigation bar that shows how the user got to the page and allows them to switch between. 
They also mentioned that they wanted to see when the messages were sent to them so I added in a time .
0 notes
Photo
Tumblr media Tumblr media Tumblr media Tumblr media
Got feedback from an EMT who works for St. John to give feedback on the design and the main ones were that the backup needs to connect directly to dispatch, it would be good to be able to filter people by what shift they are on, and that it would be helpful to be able to easily see what rank someone it. I fixed the last one by added in colour coding for the different ranks so that it was  immediately visually obvious what rank the contact is.
0 notes
Photo
Tumblr media Tumblr media
Showing how the urgency section works with the three dots showing the different colours but also filling up to different levels. Inspired by star rating systems. 
0 notes
Photo
Tumblr media Tumblr media Tumblr media
Main calendar design - the side bar still allows to filter different calendars but we also added the option of setting if the user wanted to swap or cancel a shift. as the calendar is one unit we set it to be 20% smaller for each screen size other than the watch because that would make it too small.
For the watch it simply shows one day at a time. The watch functions are limited do to the size and the knowledge that in order to have a smart watch one must also have another smart device so the watch does not have total functionality.
The watch design at this point was a single square of the calendar in the same design as the bigger versions.
0 notes
Photo
Tumblr media Tumblr media Tumblr media
Messaging- Fixing the messaging to each size screen was relatively easy at the widget style design of each message was easy to change the size of to fit the screen. The desktop size is reduced by 20% to fit the iPad. The phone has three per page when scrolled completely up and the watch has one per page and the user can flick between them. 
We used the same menu option as with the other pages so that users could filter their messages how they want to. This is to help make sure that messages get seen when they need to be seen and stop them from going unread and unanswered.
0 notes
Photo
Tumblr media Tumblr media Tumblr media Tumblr media
Contact Sorting- In order to fox the issue with the sorting of the contacts we took inspiration from our calendar design and had sorting options in the menu on the left and then a scroll bar on the right and letters to jump to different letters in the alphabet. This meant that the user would only have to focus on one image at a time and can sort the contacts how they need in order to find who they want to talk to 
did testing on the content categories and they needed to change. - shown in later post
also needed to left align these menu options
Tumblr media
0 notes
Photo
Tumblr media Tumblr media
Home Pages- We built a widget system for the home pages - these were able to be easily changed to fit the different screen sizes. from the desktop to the iPad version we can easily just reduce it my 20% of the size and then the phone one is simply made to fit the screen. Because they take up roughly a third of the available screen each (with some boundaries) they can easily be scaled for different screen types and sizes. 
0 notes
Text
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
New screen designs with a colour palette to fit St. John better as well as having more contrast so that it looks more professional. The urgency settings have also had colour added to them to resemble traffic lights so that users will instinctively know what they mean. 
The calendar has also gained colour so that the user knows when they are on shift.
The next steps are to test this version - building the messaging systems and refine the design.
The intial concept was to create a webpage that had a clean and simple home page so that it could be augmennted in the future, a messaging system where the user could add levels of urgency to their messages in order for them to be seen and replied to with the speed that matches how important the message is, a calendar system that can be easily read and used for organising shifts and a system of sorting contacts that allows the user to find who they need to contact. It was important to aim this system to people who do not know the names of the people they are trying to contact and to organise them accordingly. There still needed to be support for those who do know the name but it was not our main focus.
0 notes