Colour

This is my chosen colour pallet for this app. The black and white represent the colour of giant pandas of course. These will be used for the logo, wordmark, backgrounds, and text. The red represents a warning and, in this case, will be used on the “alerts” buttons. The colour will grab users’ attention which is important as it indicates that something is wrong. The green will be used for icons, some text, backgrounds, etc. It is simple and doesn’t distract users from the content. The green also represents bamboo which is the primary diet of a panda. I think green is a calming colour which is important for this app as users will often be in stressful situations. This is why I have chosen it as the main colour.

Lastly, I wanted an accent colour to go with the green. Therefore, I took the hex code of the green and took it into a colour pallet creator. It then brought up colours that fit well with green. This purple colour appeared, and I thought it worked well. This can be used for buttons etc, to make them stand out.

 

Typography

I had already chosen the typeface for my wordmark which I have talked about in a previous blog post. Now it was time to choose my body copy. I tried some of my content in many different fonts to see what worked best:

Of these, I liked the middle one, Crimson Pro. I liked this as it was a variable font so it could be used for headings and body copy with a change of weight. I also felt that it was easy to read.

However, after receiving some feedback, I decided to change it. I now wanted to go for a sans serif font as it would match my brand better. After a lot of trial and error, I thought it was best to go for the font I was already using for my wordmark “Urbanist”. Using one typeface kept it more simple and meant it would tie in with my brand exactly. It is also a variable font so it will be easy to use for headings and to make important information stand out. I also like how a sans serif font looks with this app.

 

Icons

This app has many screens and features, so I thought it was important to create an icon set to make it easier to distinguish between different elements. It was important that I make these consistent, so they all have a stroke of 5 and are in the same colour. I decided to make these myself so I could design them exactly how I wanted, make them consistent and help them match my brand’s tone of voice. This icon set will most likely expand over time.

The top icons are from the navigation bar and the bottom is from regular screens. Therefore, they differ in colour and size.

 

Designing the first 3 screens

Home screen

On the left is the first draft and on the right is the improvements I made. You can see, I took away the decorative panda ears on the wordmark as I felt they were unnecessary. This makes it cleaner and simpler. You can also see the new typeface on the improved screen.

I wanted to keep this screen simple. I made the buttons quite big and clear to make them as easy as possible for users to click on. This is particularly important for users clicking the alerts button in an emergency.

 

Maps screen

I had many iterations of this screen. I couldn’t decide on the background colour, the colour of the map etc. However, after some very useful feedback, I was able to improve it.

I opted for an image of a real map instead of an illustrated one. I think this looks much more professional and realistic. The image I used is a real mountain in China called Qinling mountain which is the habitat of many giant pandas.

The user can then see the exact location of the panda when it was last updated, the distance it is from them, and directions. This is a much more efficient way to track the location of pandas than their current method. The other red dots indicate other pandas close by.

From the first drafts, I made other improvements. Once again, you can see the change in typography. I also added a horizontal rule on the navigation bar to separate it from the other content.

 

Activity page

This page allows users to see activity statistics on a daily, weekly, and monthly basis. This will be useful to see how their activity, sleep, and eating habits affect their overall health. Users can also see if the numbers change dramatically which could be an indication of poor health. I included an active hour’s chart which provides a quick visual to users.

From the draft to the improved design, I made some changes. Once again, the change in typography and the added horizontal rule to the navigation bar. I also changed the food icon from a fork to a piece of bamboo. This ties in with the brand more.

This screen is the one that has the most text. Therefore, I wanted to ensure it was readable since the users will often be in stressful situations and want to read information quickly. To do this, I made sure there was enough space in between the text and I ensured it was a big enough size. Making the text bigger makes it more accessible for those with visual impairments. This is essential, especially since a portion of my target audience is older.

 

I am going to continue working on these screens and start designing the rest of them.