I have spent these past few weeks developing my “Panda Connect” app. In this blog post, I will discuss the 4 new screens I have designed and the reasoning behind them.
Direction’s screen
This is a new screen that can be accessed through the map. It gives the user directions from the healthcare centre where they are located, to the location of the panda. As you can see, users are given the option to share their location with the click of a button. I thought this was essential as users need to be able to share their location with their colleagues easily in the case of an emergency or if they need assistance. This is particularly important as the environment they are working in can be dangerous. This is much easier than their current method where they use walkie-talkies to describe their location.
The map is present on this screen to give users a visual of where they are and compare that to the panda. Users can then scroll down and see the time they will arrive at the destination if they start their journey now. It tells them how long they must drive, followed by how long they must walk. Beside the start button, it gives them an estimated time for the journey, in this case, it is 38 minutes.
I got the inspiration for this structure from Google maps. I think it works well as it is clear and easy to follow. It allows users to plan their journey.
Profile screen
The panda’s profile can be accessed from nearly every other screen. This provides easy access to their information. It has an image of them along with their name. I added a rectangle with reduced opacity behind the panda’s name so it could be seen more easily. Users can update their information from here and view current information such as their medical history, vaccine status, and fleas and ticks’ treatment status. I kept this as simple as possible while making subtitles bold to make each section stand out.
Notes screen
This screen was quite a last-minute idea. The reason I thought it was important to include is that it would be a big upgrade to their current method. Right now, the panda medical professionals are using pen and paper to take their notes. This is ineffective as they could get lost and other people may not be able to read the notes.
This way, they are all in one place and can be accessed by everyone at once. They can use this to write down notes on their current condition, concerns, when they are due vaccines, etc. Users can also search the notes as they all have unique titles. This will be beneficial when there are lots of notes. The plus icon allows users to add a new note easily and the red bin allows them to delete notes which are no longer needed.
I kept the layout simple, so notes are easy to find. Users can choose which notes to read by clicking on them, this saves space on the main notes screen. This screen is quite like the panda’s screen in terms of colour and layout. Having this consistency makes it easier for users to navigate and use the app.
Add new panda screen
This screen allows users to add a new panda to the app. Each panda has a microchip with a unique identification number. This is what users will type in here. I added the app logo on this screen for consistency and to incorporate the brand into the app more.
Once the user types in the ID, a searching animation will appear. This assures the user that it is working and that it is connecting to the panda.
Once it has been located and connected, this screen will appear telling the user that it has worked. There is then a button that says “begin setup”. When the user clicks this, it will allow them to input information about the panda for their profile. This is also when they can view them on the map and get updates on activity levels, vitals, etc.
I have enjoyed designing these new screens and seeing my app come together. I will continue seeking feedback and making improvements before the final deadline.