Mid-Fidelity App Prototype - "Pawsibilities"

The Project

For our Introduction to Interactive Design final project, we were arramged into teams. Our team lead, Chrisy, proposed an app that would make finding a new dog quick and easy. The app would use a swiping system commonly found in dating apps, with the main deliverable being a semi-functional prototype. 

The creation of our app used a process called Goal-Directed Design (or GDD). GDD Puts a strong emphasis on researching to understand what the user needs.

Our Team

Step 1: The Kickoff Meeting

To help us do that we all met together for a Kickoff Meeting, the first stage of GDD. Larger teams would usually have a similar meeting with the stakeholder of the project, but since this was for a class, we had none. Instead, Chrisy hosted a virtual meeting on the where we all signed up for our various roles and filled out a worksheet containing the target audience, mechanics, and core values.

We decided that our Primary Personas, or target audience, would be both primarily young people looking to adopt and owners looking to re-home. To understand exactly what each persona would need from an app like this, we'd need to conduct peer interviews. But first, we'd need to know what questions to ask them. Otherwise we'd be totally unequipped to start prototyping.

Step 2: The Literature Review

That's when Katie and I both got started work on the Literature Review, a comprehensive look over sources on both dog adoption and the inner workings of dating apps. We hunted down nearly two dozen combined sources and I began condensing them into a single revised document for our team to pull from. I didn't cite the sources correctly the first time around, but I got it worked out in time. This helped us solve countless problems such as the information the adoption forms should include.

Meanwhile, Ryan was hard at work on the Competitive Audit, examining similar apps and services to see how they tackled our idea previously. We continued editing our respective documents for several more weeks, but we had all the raw information needed. It was time to interview.

Step 3: User Interviews

With what we'd learned from the Lit Review, we started our peer interview process. Thankfully, we had no shortage of classmates interested in our idea. We wound up interviewing five different people, all dog owners, with each team member having a shot to ask the questions. Most questions revolved around what their experiences adopting a dog were like and how we could improve on it.

Other questions centered on the interviewee's current financial and housing situation as well as attributes of their "ideal dog" to help us understand what factors we needed to take into account when prototyping.

Step 4: Creating The Personas

So now that we had our data, we just needed to turn it into statistics to make it usable.

For each category we questioned interviewees on, we placed their answers on a spectrum to find the mean answer. Sorting these answers by whether the interviewee showed interest of adopting or not, we split the data into our two personas we dubbed "Daniel" and "Amy".

Daniel is living on his own and paying his way through college. Despite this, he's looking to adopt a dog. Amy is in her late 20s to early 30s and looking to re-home her dog after underestimating the time and monetary commitment a dog brings with it. Now that we knew what kind of people will be using our app and what factors we need to plan for, we could finally start planning our prototype.

Step 5: Requirements:

Thanks to our personas as well as our own experiences, we knew what people needed to be able to do on our app. We needed to include every possible option for the dog such as whether they're good with kids, every possible setting for the person buying the dog, and even settings for who they want to buy the dog.

Step 6: The Wireframe Template

The next thing to do was take all that data and create a Wireframe, or a non-functional guide that keeps the final design from constantly being second-guessed and reinvented. To do that, we took our data and created a checklist of all the pages a user could possibly need when using our app. This is where the revisions to the Lit and Competitive Reviews proved especially helpful.

We all met together in Miro once again and began working on the pages. There were a few unified design choices like the footer bar and side menu that Chrisy finalized, but otherwise we were encouraged to be imaginative in our designs, so long as they stayed easy to use. We each worked on whatever page we thought we could best handle and after a couple days of each of us working more of less independently, the Wireframe's pages were complete.

Step 7: Key Path Scenarios

Even though we had all the pages, the Wireframe wasn't done yet. The final prototype had to be functional, so we needed to make sure the pages flowed well from one to the other and weren't missing any critical features.

To help with this problem, we created a series of Key Path Scenarios, the "well-worn" paths that every user will have to navigate when using our app. These included things like creating an account, posting a dog's profile for adoption, and messaging another user.

Once these were all planned out and check for errors, we composed Validation Scenarios, or short narratives describing a user going through various parts of our app. taking the time to put thought into these can help make sure none of the smaller details are missed. Fortunately, we had paid attention to the details along the way, so there wasn't anything major we needed to redo.

Step 8: The Prototype Phase

Now it was finally time to prototype. We decided to use Figma because of Jack's experience with it. For the next new days we all worked on the final pages. Katie and I initially had trouble with Figma's interface, but the suspect permissions were corrected and work continued.

It was during this time that Chrisy designed a couple of potential logos for Paw-sibilities. The one that we all liked best was added into our prototype, which Jack was hard at work connecting the pages together into a prototype. Once we were happy with how it looked, we brought back the two interviewees we though best embodied our two personas and asked them to view footage of our work just to ensure quality. Aside from a few very minor changes such as making our logo more prominent, they were both very happy with that we had created.

Conclusion

I can only speak for myself and our team as a whole, but there were no major problems or setbacks. Chrisy did an excellent job of keeping us on track and everyone pulled their own wight veery well.

The biggest thing I learned throughout this whole process was how to coordinate such a large creative process for future reference. It was amazing to see everyone do their part and watch our project slowly come together piece by piece. If I had to find fault with any of our process, it would be in my own lack of experience with the tools of Figma as well as how a project on like this is actually completed, although those are now no longer a problem thanks to my class experience.