Problem Statement
Dog owners struggle with keeping track of their pet’s information and resources efficiently.
Interview Pool
I selected my participants from people who I know are dog owners. The criteria I used were for anyone aged between 18 and 70. They also had to be smartphone users, and be a dog owner. The ages are between 18 and 70 for two reasons. One, I wanted to use adults in this survey, as I don’t know many teenagers or children who are completely responsible for the well being of a dog. Two, I needed this age group to understand how to use a smartphone, and I believe that age ends around 70 for the general population. The genders of these participants are both male and female since dog owners can be male or female.
*Dog owner is defined as someone who is fully or partially responsible for the care of the dog e.g. vet appointments, grooms, feedings… etc. This does not include the dog owner’s family members that are not solely or financially responsible for their dog e.g. the dog owner’s child*
Empathy Maps
Key Finding and Conclusions from Stage 1
One of the things I was most surprised to find out was that a lot of people still use paper copies and hand written calendars to store their information. I am 100% digital, so seeing how other people do things was interesting to discover. I was also surprised that everyone was interested in using the dog app, even if they had already established a well working routine for the organization of their dog’s information. It was very important to understand everyone's wants and needs for their dog so I can move forward with these in mind.
Key Finding and Conclusions from Stage 2
After completing stage 2, I was able to visualize how I will create this app/website to satisfy my customer’s needs much better. Combining all the users’ data into one persona and creating the business model canvas really solidified my plan and understanding for the app/website.
Idea Generation
For most of my ideas, I used the designs and thoughts I had about the dog app in my mind and wrote them down on paper. By creating the mind map, I was then able to generate more ideas that branched off of the ones I already had. I also took inspiration from other apps such as google maps and google calendar. When looking up images for my mind map, I was inspired by what I saw and added those ideas to my overall plan. Throughout the project, I’ve also received recommendations for features of the dog app that are included. Lastly, I factored in usability heuristics and added a few more attributes to each main feature.
Mind Map
Key Findings and Conclusions from Stage 3
After going through the process of completing stage 3, I was able to expand my visualization of what the app will be and what features it will have. By creating the mind map I was able to figure out which of my ideas were realistic and which ones may be far fetched.
Usability Heuristics
Visibility of System Status
Whenever an action takes place such as creating an event in the calendar or uploading a document, a loading circle will appear to let the user know that it is processing that request.
Match Between System and the Real World
Each component is designed in a simplistic way so that the user understands how to operate it without question. Icons used throughout the app are also very obvious in their meaning.
User Control and Freedom
Each save/create/upload/delete dialog has a cancel button letting the user back out of an action if they choose. They also have a confirmation after saving and deleting to double check that the user wanted to complete that action.
Consistency and Standards
The style and components are very consistent throughout the app. The features are also very similar to others in the market, so there should be little to no confusion. The user will experience familiarity when using the app.
Error Prevention
The user will have an option to cancel or confirm their actions throughout the app at any time.
Recognition rather than Recall
Users will not need to remember information from page to page. Everything is displayed on the page that the user will need to know to complete an action.
Flexibility and Efficiency of Use
The addition of favorites and recently visited locations to the map allows experienced users to use the map feature quicker and more efficiently.
Aesthetic and Minimalist Design
The design is very simple and straightforward so that users don’t get distracted or confused when using the app.
Help with Errors
If something goes wrong when a user is trying to complete an action, an error message will appear. Depending on the error message, the user will be given contact information in case the problem persists.
Help and Documentation
The home page holds a help section where each page is described more in detail in case the user gets stuck.
UX Laws
Cognitive load
In order to follow the cognitive load UX law, I kept the design very simple and consistent so the user doesn’t get distracted or lost when using the app. The features are also very similar to other items that some people use daily such as the calendar and map.
Fitt’s law
To satisfy Fitt’s law, I made all my create/save/delete/upload buttons fairly large and in an obvious place so the user does not get confused. These buttons are also in contrast to the rest of the page so they are easy to find.
Jacob’s law
The components and layout of my app are very similar to what other apps have. It is still unique in itself, but each individual component is familiar and easy to use. For example, the navigation bar at the bottom of the app is a very popular style used in other apps.
Low-Fidelity Prototypes
These prototypes were sketched first by mapping out the user's flow through the app, starting first at login/signup and moving through all the options on each page. Then I created a rough layout of each page and the unique components within them, as well as different options for navigation bars.
High-Fidelity Prototypes
Below I have inserted a demo walkthrough of my high-fidelity prototypes on Adobe XD
*Not every screen has access to every tab (main screens of the 4 features in the bottom nav bar can access other features)*
To start off, I used the basic sketches from the low-fidelity prototypes to create some wireframes for my pages. I used Google’s Material Symbols as well as the UI kit from Google for basic components such as buttons, nav bars, color schemes, and text fields. I went with the dark theme so it’s easier on the user’s eyes. After carefully designing each page, I then created transitions to mimic the user’s actions. In my demo, I show what this looks like. I also came up with ideas during the process of creating the wireframes, so I added those in as I went along.
Background Summary
Product Under Test
The product being tested is the app I built called Doggo. The business goals for my app are to allow the user to easily document, make appointments, and find resources for their dog. The experience goals for my app are to make sure the user can easily navigate and use Doggo as well as enjoy their overall time on the app.
Business Case
I am testing my app because I want the users to have the best experience possible when using Doggo. The benefits of testing are increased usability, catching faults before release, changing the design if need be, understanding the user and their needs, and much more. Testing is important because it can prevent bugs within the design and make sure the app is as usable, useful, and desirable as it can be.
Location and Dates
The test took place the week of Thanksgiving break and spilled into the following week (Nov 21 - Nov 30). Each user was given a link to the test and completed it on their own devices.
Equipment
I used Maze, a usability testing website that is compatible with AdobeXD. I found that Maze was the easiest to set up with my AdobeXD prototype, and fairly easy to use as well. Maze has several options for recording data such as usability tasks, multiple choice questions, and open ended questions. I also used PyCharm to calculate the statistics using the data from the Maze usability test.
Responsibilities
I was the sole creator and facilitator of the test. I was responsible for creating the prototype, developing the usability test, drawing conclusions, and generating statistical findings.
Methodology
Test objectives
The goal of the usability test will be to evaluate how well the user navigates the app, how easily the user can complete certain tasks, and which parts of the app are the most and least useful.
More specifically, the user will be tested on how easily they can get from the login page to the feature pages and how easily they navigate each of the feature pages.
The user will also be tested on how easily they can ask for directions to Harlee’s vet, create a new file, and create a new appointment.
Finally, the user will be evaluated on which features of the app have the most and least usability.
Participants
The same participants that were used in stage one were used in this stage for testing. Here are some of their key characteristics:
- Dog owners (someone who is fully or partially responsible for the care of the dog… full definition in stage one).
- This group is specifically between the ages of 19 and 56.
- Able to navigate a smartphone.
- Mix of men and women (2 men, 3 women)
Test Tasks
The test tasks for navigation were as follows:
- Sign up for Doggo
- Login to your account
- Search and start the directions to Harlee's vet
- Upload a new file
- Create a new appointment
- Log out of the app
The test tasks for usability were as follows:
Describe how you feel about the design on this page for deleting/editing folders
Describe how you feel about the usefulness of this page.
Out of the three main features, which one was/seems the most useful and why? (documents, map, calendar)
Out of the three main features, which one was/seems the least useful and why? (documents, map, calendar)
Procedure
The user was sent the link to the usability test which they could complete in their own time. The test could be completed on a laptop/computer or on a smartphone device. The test began with an intro page explaining what would happen during the test. Then, the list of multiple types of questions were asked. After the user completed all the questions, a thank you screen closed out the test. The results were then sent to me and I was able to collect the data to generate each user’s stats.
Test Results
Usability Test
Each task took around the same time on average, as well as the same amount of misclicks. There were some extreme outliers, so that offset the data a bit.
*In the test for which feature was the most and least useful, I took whatever their first answer was if they included two answers. If they didn't have an answer ("all features are useful") I put in N/A as the data point.*
Graphing Results
Findings and Recommendations
What worked well
Based on the data, the features seemed to be very easy to navigate. The users also seemed to like most if not all of the features and their designs. I was easily able to generate some statistics from the data collected using Python since that is the language I have been focusing on most this semester across multiple classes.
What didn't work well
The way I described how to complete the tasks may have been confusing. I should have described to them that the app they were seeing and clicking through was just a prototype and not a fully functional app. I also struggled with creating a good looking graph out of the data. All the data is there, but because of some major outliers, it's a little scrunched up.
How to improve/move forward
In order to move forward, I would like to make some minor improvements and added features to my prototype and turn it into a real app. I would add more features to the map that distinguishes it more from other map apps to make it more valuable. I would also redesign the home page as it adds no value to the app in my personal opinion.
Appendix
Link to video demo for code and output
*Code was too large to append here, so I took a video demo of it!*