I have continued working on my “Panda Connect” app screens and it is starting to come together. This blog post will be an overview of these, challenges I have faced and the reasoning behind my design decisions.
Updated navigation
Firstly, I would like to talk through one of the main changes since my last blog post that affects every screen. It was advised to me to reduce the sizing of my navigation greatly as it was taking up too much space and it was unnecessary for it to be the size it was. Before I started, I looked at some other examples of navigation bars to get an idea of sizing. these were all much smaller and simpler than mine which is what I was going to aim for.
The first image shows my original navigation and below this, you can see the updated design:
I think this looks much better as it is more subtle, clean, and doesn’t take the user’s attention from the main content. This is important as the content they are viewing needs to be read with no distractions. The icons are now 25×25 and I made sure to use the ruler tool to ensure they all lineup and are consistent.
Panda’s screen
This screen allows users to browse through all the registered pandas. Each panda has a unique registration number which can be used in the search bar if they are looking for a specific one. The search bar is interactive in this prototype as it opens when clicked on.
In this prototype, I added a vertical scroll to make it more realistic. I also added images of the pandas, so users feel more connected with them, and they aren’t just a number on a screen. As you can see, there is a bell icon next to each panda. This will light up red when there is an active alert, and it will show how many alerts they have. Pandas with alerts will automatically be boosted to the top of the screen so users know immediately who needs attention. I made this red as people associate this with alerts and it stands out against the rest of the screen.
The plus icon at the bottom center of the screen will bring users to the “add new panda” screen. I placed it here as it is easy to access, and I think it stands out and will grab the attention of users.
Alert screen
This screen provides users with information on what is wrong with a panda. The alert is in red to make it stand out. This example shows that the panda’s heart rate is 30% above average. This allows users to quickly grasp how serious the situation is. It also provides common causes of this so users can be prepared with specific equipment etc for potential situations.
On the top right, you can see the name and image of the panda. This will lead users to their profile. This is present on every page for easy access to their medical history, previous weight, etc. Users can also click on the track location button or the map image to bring them to the map screen. I thought it was important to have multiple access points to this to make it as easy as possible for users to track their location in highly stressful situations.
One downside to this screen is that I am struggling to fill it with content. Therefore, I am going to work on improving it by possibly adding an image, how far away the panda is from the user, etc.
Vitals screen
This screen provides users with the current necessary vitals of the panda. This includes their heart rate, respiration, temperature, and heart rate variability. HRV is the variation of time intervals between heartbeats. I thought this would be beneficial to include as abnormal HRV can be a sign of illness or stress.
As you can see, in the first draft, each section had a light green background colour. I decided to take this away and just have a green stroke. I think this looks much cleaner as you can read the text easier, and the icons no longer blend into the background.
This screen uses a traffic light system. Any statistic within the normal range for a panda will display as green. Anything outside of this will be red or amber, depending on the severity. I think this system works well as I have seen it being used in other healthcare apps. It allows users to spot any issues at a quick glance which is important as they have busy jobs.
I made the statistic text bold, so it stands out. Each section also has an icon, so the user knows what it is without even having to read it.
Activity screen’s
From my last post, I have made some changes to this screen. You can now switch between the day, week, and month. This will be beneficial to users as they can see what the normal levels of activity are for the panda. This way, if they think something is abnormal during the day, they can compare it to the week and month to see if there are drastic changes. This can help them spot early signs of illness or injury as these can often affect sleep, appetite, and movement.
Another small change I made was that I changed the word “hours” to “hrs”. This takes up less room making it look more minimal and slightly quicker for users to read.
Another pathway
All these screens so far have been information on the panda Chi Chi. However, to make it more realistic, you can also access these screens through the panda “Po”.
Here you can see how the information has changed as it is tracking a different panda. The location on the map has changed, there is a different alert, and all the statistics are different.
I still have more screens to design, and I will continue updating these current ones in the coming weeks. I have enjoyed working on this and look forward to it all coming together.