RSPCA App Variations
For my unit UX2 within Curtin University.
Joshua Anderson 20153706
josh.neil.anderson036@gmail.com
20153706@student.curtin.edu.au
62% of Australian households own a pet, but not everyone has adequate knowledge to give their pets the best health and care they need. It is estimated 40% of dogs and 30% of cats are overweight in Australia, so there is an increasing need for pet owners to educate themselves on correct diet and exercise routines. In addition, many people struggle to find their pet the right veterinary care and other services (such as grooming, and dog walkers) within their areas.
I have been tasked to design a mobile app prototype for RSPCA Australia which helps to solve the problems outlined above, this being; pet education on correct diet, exercise routines, and finding adequate pet services such as groomers, dog walkers, and so on. With the brief set out, I began my design journey.
7 Step Design Process
Commencing the design journey, I started by making a 7 step design activity to lay out the foundations of the app in terms of its use and abilities. Each step within the activity helps to display what is needed and wanted from the app and what it needs to achieve. The steps are as follows; Why, Who, When and Where, What, Choose an Idea, Storyboard and Defining Tasks, How. Below shows my 7 step which shows that I come to the conclusion of the app being a “pet profile creator” which the user can use as a source of information like the brief requires while also allowing the user to log the progress of their pets on their journey to getting a healthy lifestyle.
Variations
The RSPCA team wished to see 3 initial design concepts, each with its own variation before user research is conducted. These variations include Context, Aesthetic, and Accessibility.
Concept 1
The context variation was to be catered only to new owners wishing to adopt a rescue pet, with this variation factoring into all areas of the app’s design. Starting with brief ideation sketches on paper, I designed the layout of the app to get a feel of the number of different windows that would be needed as well as the style. My previous 7 step process helped with this as I already had a decent idea of what the storyboard of the user would be.
Next, I moved onto making low-fidelity wireframes of the concept. With the variation being about new owners wishing to adopt, I mainly left out the ability to create a profile for your pets as these users would not have any yet, focusing on the information sections so that they could potentially find suitable breeds that they would want to adopt.
I decided to keep it very simple with only three tabs; information, services, and profile. The information tab is succinct with only two options which leads to a large range of different breeds of dogs and cats all with their own information on the breed as well as dieting and exercise tips so that the user is already starting to learn what the needs are of that breed of animal. The services window has three icons that represent vets, trainers, and walkers. Upon clicking these the user will find contacts for their respective occupation so that the user before even owning the pet knows that there are other options for their pet if they personally don't have enough time.
I then chose four of the most important windows and created high-fidelity mockups to show the client a hint of what the app could look like with the application of the variation.
Using the colors, style, and aesthetics of the RSPCA team, I filled in the wireframes. I feel that this concept has successfully addressed the brief as it focuses on the main points; information and education on pet diet and exercise as well as giving easy access to services with clear communication. The entire concept has the feel of RSPCA embedded through the aesthetics and gives the user a variety of results while being simple to follow.
Concept 2
This concept followed the aesthetic variation where the design must use the Photon design language developed by Firefox. This design language focuses heavily on illustration, iconography, and vibrant colors. I began with ideation sketches that incorporated these points.
Moving onto the low-fidelity wireframes, I focused on placing illustrations around the app design which would help to make understanding the app simple and fun to navigate. I used more icons than pictures to keep clear and succinct messages and meanings.
Keeping a similar layout to the first concept, this design focuses on the ability to create profiles for your pets so you can get direct information for that specific pet and breed. This can help the user to keep a track of what they understand on which pet as many pet owners have more than just one pet. This mechanic also can be used as a “bookmark” to find quick easy information on your specific pet, increasing useability for the app. When it comes to the information, there will be illustrations around the text, following the Photon design language. The list layout for finding a breed will include small clear illustrations instead of pictures of the animal as they aren't always the clearest and this also brings a sense of unity to the app.
To finish up this concept I then mocked up the high fidelity results, through the use of illustrations and colour variations I was able to create Photon styled app design.
While still following the basic color scheme of the RSPCA team, I used the provided colors of blue and green from the Photon information site to give the app a more vibrant and lively feel. The illustrations are clear and help the user to identify the use and meanings of parts around the app. The paw-prints in the pet profile section bring a friendly vibe and the information is met with small illustrations around it as to not tire the user’s eyes or bore them with words. I feel this concept addresses the brief as it involves all needed uses while being user-friendly and clear to understand through the Photon design language.
Concept 3
This concept must cater to visually impaired users, specifical users with low vision. This means that the design requires a higher contrast in the interface design, larger fonts, and iconography for ease of use. Through the ideation process, I focused on a layout that was clear and allowed for larger fonts and icons. I also came up with the mechanic of a camera-based breed finder which would help users find the information they are looking for easier than having to click through many small tabs of different dog breeds.
With the initial sketches down, I moved onto the low-fidelity wireframes, still focusing on the larger styled layout with illustrations to make things a bit clearer if words are illegible to the user.
This concept allows for the profile creator in terms of its bookmarking abilities so that when a user has found what they are looking for they can save it, allowing for ease of access later on if they wish to revisit the page. The profile creation is simple and clear, focusing on the two main pets being dogs and cats, and having only the name and weight options left as those are the most important areas for this design, as the weight of the pet is linked to its health and diet which is what was stated as the brief’s main problem to be solved. The camera-based breed finder is very simplistic with a single button for taking a shot while the services finder has blown up massively to keep it clear as to what the user is visiting. When it comes to finding pet breeds through the info tab, I made it so that the images are much larger and take up most of the screen so that the user can see clearly the breed they are searching for.
When it came to the high-fidelity mockups, I changed the font, the size, and other colors to allow for contrast in the options.
The text is all in bold and has an edited spacing between letters to keep the words clear. I tried to reduce the number of options needed in all windows as this will clutter the screen and confuse a low-visibility user. The profile creator uses symbols and text to help the user identify the use of the buttons. The text on the blue at the top does a nice job of contrasting each other keeping the text clear. I tried to keep things to white and black as they are the easiest to contrast and identify from each other, helping the user to make as few mistakes as possible when navigating the app. I feel this addresses the brief as it incorporates all the needed abilities while also making it highly useable to people with and without visibility challenges.
Conclusion
The brief that was given to me by the RSPCA team clearly states its problem of overweight pets in Australia and the need for owners to understand and educate themselves on how to lead a healthy life for their furry friends. In my three different design concepts all with variating needs, they all accomplish the needed goal of having the ability to educate users on different breeds of animals when it comes to their diets and exercise while also giving them an alternative of services that can help them if they are unable to do so. Using the method of the 7-step design process helped me to lay out the goals and needs of the app early on, which helped me to keep my designs consistent with the brief’s requirements.
