"Enable anyone, anywhere to instantly chat with an expert in virtually any field."
This was the main objective behind the Wildlife Expert project. My role was to design, from the ground up, a web app that lets its users browse and connect with experts via videochat in virtually any field. Seeing as the most likely experts to find in fields would be wildlife experts, I decided to build an app that lets wildlife enthusiasts sign up to live video-based courses and events hosted by wildlife experts and organisations in Ireland. Over the following months, I conducted background research, created prototypes and prepared a final product ready for development.
Understanding the Problem
What issues do wildlife enthusiasts and experts face in their nature-based activities? And how can a videochat help them? With questions like these in mind, a list of problems was drafted, being distilled into a specific problem to tackle, from which some potential solutions were proposed.
Problem Statement
"Irish wildlife enthusiasts need a way to contact local wildlife experts during the coronavirus lockdowns because due to travel restrictions, they have discovered what their local areas have to offer in terms of nature and wildlife, yet books and web searches aren’t specific enough to their areas, there are no information boards at their lesser-known walking spots and all events (including wildlife events) are cancelled due to the lockdowns, meaning there are no experts to meet with to seek advice and discuss what they have seen."
"Irish wildlife enthusiasts need a way to contact local wildlife experts during the coronavirus lockdowns because due to travel restrictions, they have discovered what their local areas have to offer in terms of nature and wildlife, yet books and web searches aren’t specific enough to their areas, there are no information boards at their lesser-known walking spots and all events (including wildlife events) are cancelled due to the lockdowns, meaning there are no experts to meet with to seek advice and discuss what they have seen."
Potential Solutions
"An app that acts as a field guide for wildlife enthusiasts in Ireland, in association with its various wildlife organisations. It’ll work at a local level, with wildlife information catered to areas that the general public can freely explore, such as beaches and forest trails.
"An app that acts as a field guide for wildlife enthusiasts in Ireland, in association with its various wildlife organisations. It’ll work at a local level, with wildlife information catered to areas that the general public can freely explore, such as beaches and forest trails.
Enthusiasts can discover more by contacting experts affiliated with their local regions via videochat, either by booking a call in advance or direct contact “in the field”.
Experts, whether they be credited, officially educated experts or amateur experts with knowledge of their local areas, can upload their credentials and take calls with enthusiasts or broadcast webinars with several at once."
Research
Various research and background methods were carried out to form a strong foundation for the project.
A competitive analysis was conducted to find out what potential offerings are already out there and what they do right and wrong. User stories were written to gain a better understanding of the target audience and S.M.A.R.T. goals were set to keep the project on track.
For a better insight into the target audience, user surveys and interviews were conducted. The online user survey ran for several days, gaining 19 responses and helped form the basis for the succeeding interviews.
A total of 4 user interviews were conducted remotely, covering a broad spectrum of wildlife enthusiasts and experts. The results were analysed by way of affinity mapping.
User interviewees' identities were kept anonymous after the interviews were conducted
User Personae
User personae were invented, based on the results from the affinity mapping. These personae would best represent the target audience and would act as guidance for design decisions.
Each persona was given a background, traits and quotes to make them as real and empathetic as possible.
User Flows
User journeys were written about each user persona. These narratives outline each persona's goals in a believable manner. User flows were then drawn up based on these goals, to find out what pages would be needed in the app to allow each persona to complete their tasks.
The app would follow the mobile-first principle. Despite being a multi-platform web app, designing for mobile-first gives distinct advantages when scaling up to bigger devices. A document was made, outlining what would be needed and could be included on each page from the user flows.
All of the pages from the user flows were collated into a sitemap to give a navigational overview of how the various pages would link together.
Wireframing & Prototyping
With all of the foundations in place, wireframes began to take shape. Low-fidelity, mid-fidelity and high-fidelity wireframes were created and turned into prototypes, with each new iteration receiving various changes and improvements.
The low-fidelity prototype was drawn on grid paper with pencil and pen. The mid-fidelity prototype was made using Balsamiq, where it began to take on proper proportions. The high-fidelity prototype was built in Adobe XD using Material Design guidelines for a professional look.
Usability Testing
To catch any errors in the high-fidelity prototype, usability tests would be conducted. A usability test script was drafted, which outlined the test goals and would guide the sessions themselves. 6 moderated test sessions were run, 3 remotely, 3 in-person, with both the mobile and desktop prototypes being put under the microscope.
Goals
"My goal is to find out if users can complete the main function of the application, which is to join the service, sign up to a course/event and then take part in it. Finding out if the service is worthwhile to them and if they enjoyed it will also be something to discover."
"My goal is to find out if users can complete the main function of the application, which is to join the service, sign up to a course/event and then take part in it. Finding out if the service is worthwhile to them and if they enjoyed it will also be something to discover."
Test Objectives
1. Find out what users deem necessary information when they create an account.
2. Observe the course/event search and sign up process - is it logical and easy to use?
3. Test the message system by getting the users to ask the course/event host a question after applying to it. Do the message tabs make sense?
4. Is joining a live course/event a simple process? I will see if the users can do so.
5. Once in a videocall, I will find out if the UI is familiar enough to the users.
1. Find out what users deem necessary information when they create an account.
2. Observe the course/event search and sign up process - is it logical and easy to use?
3. Test the message system by getting the users to ask the course/event host a question after applying to it. Do the message tabs make sense?
4. Is joining a live course/event a simple process? I will see if the users can do so.
5. Once in a videocall, I will find out if the UI is familiar enough to the users.
The interviews were recorded, with the most relevant positive quotes, negative quotes, observations and errors placed in an affinity map. This filtered information was then put into a Rainbow Spreadsheet. This spreadsheet, invented by UX researcher Tomer Sharon, collects all of the information from the usability tests and creates visual patterns that show what observations and errors came up most frequently between the test participants, and therefore what takes priority when it comes to exacting solutions.
Click to Zoom
Several issues were highlighted in the Rainbow Spreadsheet. 5 were prioritised based on severity and time required. Solutions were then outlined and implemented. Ideally, with more time, a second round of usability testing would have been conducted.
Refinements
Wildlife Expert's functionality had been thoroughly tested, so it was time to refine the design with a focus on colour, imagery and layout.
A natural green was paired with a soft grey, because Wildlife Expert is all about the natural world and these colours can instil a sense of calm.
Robert Plutchik’s Wheel of Emotion helped with this choice. It shows how various intensities of colour can instil different emotions. The choice of green was adjusted according to the wheel so it would represent trust and acceptance. This tied in well with the “natural world” associations that green represents. If something is familiar and is what people expect, they are more likely to trust it.
Also, people should react positively on Don Norman’s Visceral Level; user’s initial reactions will be trusting and they will then be more likely to continue interacting with the app.
Some basic Principles of Design were employed, as well as Gestalt Psychology, a school of thought founded in 1912 which has been useful in many forms of design. It is about the mind looking at a scene and creating whole forms out of separate elements. In terms of UX layouts, it helps to create cohesion and to avoid linking things that are not related. Also, the prototype had been put together using the "rule of thirds" as a rough guide, so it was neaten up with a 12-column grid.
Final changes were made after peer reviews and consultation of accessibility guidelines. The former was to seek out any issues that had gone unnoticed, while the latter was to ensure that Wildlife Expert could be used by as many people as possible.
For better accessibility, the colours were altered for clearer contrast, some font sizes were increased and some click zones were also increased.
Not only was Wildlife Expert designed for its target audience, but it was now accessible to those with visual difficulties and motor impairments. With the final tweaks in place, the application was ready for development.
Extras
The desktop prototype for Wildlife Expert is just below. Click to activate it or follow this link and give it a go.
Both a style guide and a design language system were created for Wildlife Expert. Some sample pages are available below, but if you would like to see more, click here for the style guide and click here for the design language system.
