top of page
Group 861.png

AniPet

Case

Build a business where customers can choose all the features of their ideal pet thanks to genetic engineering.

Team

Habee Shirzad

Emma Sandblom

Malin Wallius

Cecilia Parkert

Victoria Castro Ranzoni

Hannah Adolfsson

Background

I worked on this fictional case along with my team as part of my interaction design course. 

Role

UX-designer, working with user research, UI/UX-design, prototyping, usability testing.

Time

This was a 3 week project.

Design process

We worked using the interaction design process during our project.

STAGE 1
What user
needs/wants
STAGE 2
Analysis
STAGE 3
Design
STAGE 4
Prototype
STAGE 5
Implement
and deploy

Quantitative research
Seven interviews

Thematic analysis

Value proposition Canvas
Business Model Canvas

Personas with User stories
User Journey

Sitemap

Flowchart/task flow

Wireframes

Testing
Prototype of the creation tool and the front page

As this case is fictive, we will not be implementing the product. Either way, we would have liked to do more testing and iterations on the prototype before going live with it.

STAGE 1

User needs/wants

Quantitative research

We begun with researching genetic engineering, why people get pets and what affects their decision on what pet they buy.

​

The results of our research would therefore be about pet owners, science behind genetically modified animals, ethical questions and more. I will share a collection of our insights and sources from said research.

Interviews

We conducted seven interviews of which four were with females and three with men in between the ages of 22-82 years. The purpose of these interviews was not only to create a foundation for our Value Proposition Canvas and Business Model Canvas but to lay the grounds for our personas.

​

All of the people interviewed have had pets at some point in life, four of them have pets today. Many of them have made the choice to not get a pet at some point. One of them has experience within the subject of GMO (genetically modified organism).

STAGE 2

Analysis

Value Proposition Canvas
VPC.png
Business Model Canvas
BMC.png
Personas

Based on our research and interviews we have created three personas which we have aimed our product towards.

Roy.png
Daniel.png
11Ana persona.png
User journey

We have also made a user journey for our persona Ana. It was made after we had created the first iteration of our prototype.

This was to paint a picture of the journey whilst using our product at it's current state.

User journey.png
STAGE 3

Design

Workshop

Based on everything we had made and gathered thus far, we organised a workshop based on three different user stories:

  1. “As a lonely and sick person, I need a pet that is easy to take care of so that I can get meaning and routines in life."
     

  2. “As a parent of multiple children, I need a hypoallergenic pet that is easy to care for so that my children can have the experience.”
     

  3. “As a busy person, I want an undemanding pet so that I can have company without changing my lifestyle.”

Together we brainstormed and came up with a few functions we thought would meet the needs of our users.

HMW-workshopen.png

After this we made lo-fi prototypes in the form of paper sketches for the functions we had come up with.

AniPet Sketches.png
Lo-Fi wireframes

Using figma, we created a few wireframes which we presented in class.

First Lo-Fi Wireframe.png

First iteration

Second LoFi Iteration.png

Second iteration

The biggest feedback we got was that it was unclear what services we provided and what you could do on our site as a user.

Sitemap

After receiving feedback in class and after some discussion within the team, we decided to create a sitemap.

​

Partially to get a clearer picture within the team of what our vision was, but also to be able to prioritize our next step. Once we had all the pages mapped out, we voted on the ones we thought were the most important, our MVP.

​

We ended up deciding that the front page and the creation tool where our priorities.

​

The creation tool was important since it would be the service we provided. Without it, we would not have a purpose.

Sitemap.png
STAGE 4

Prototype

Front page

The front page was a priority not only because it would be the main way into our creation tool, but also to confirm that our business model and our product would meet the markets needs.

 

Since the heaviest feedback we received on our wireframes was that it was unclear what service we offered, we decided to create a front page that was:

  1. Clear
     

  2. Comforting and trustworthy
     

  3. Encouraging users to try the creation tool

This was important since we noticed that it was a big need for our users, they would not give our tool a chance if we did not appear transparent, serious and ethical.

First Homepage Designs.png

Testing

We tested the front page on five people.

Method

Semistructured userinterviews where the participants where asked to share their thoughts (Think Aloud).

What we tested:
  • General thoughts and feelings of the front page

  • Specific parts, what were they thinking of and what where they expecting from:

Header/Navigation

  1. Creation tool

  2. Forum

  3. FAQ

  4. Log in

 

Other

  1. Text

  2. Headings

  3. Userflow

  4. Visibility

  5. Understanding

Results

Trust

  • Feels like a serious site. Associations with insurance, pet food, allergies and health. The site feels professionally made.

  • Several participants wonder if it's too good to be true and want to read more, e.g. under about us, FAQ as well as independent sites. For some it feels to easy to order a pet, as if it's created to encourage impulse buying.

  • The actual genetic engineering awakes feeling within of it being unknown, something that feels "weird" and "suspect". Some use the expression "a little scary".

  • Positive reactions to the part where you have to tell the company about yourself, to be examined as a customer, as well as to the part where you can test i you would fit as a pet owner.

  • When asked where they would click to order a pet, most of the participants answer that they would want to read more first. They would click on about us, FAQ and perhaps contact the company. Before they would click on Create a pet, several would like to do the test first.

  • Above all, they want to know who is behind it all. "What kind of people are they, what competence do they have? Do they know anything about ethology?"

  • One reacted on the name AniPetIt made them think of animated animals.

 

Clarity

  • All participants understood that AniPet  is a company that provides a service where you can order a pet that has been genetically modified to fit their needs.

 

Interaction

  • It was a bit unclear why we have two buttons that say the same thing (Skapa ditt husdjur).

  • Unclear whether you are required to create an account before you press Skapa ett husdjur.

  • It can be unclear what Skaparverktyg in the header is in comparison to the Skapa ett husdjur buttons.

  • There may be a need for more clarity to there being more sections below if you scroll down. 

  • Despite this it seems to be clear what happens if they would press Skapa ett husdjur. They expect to be guided through pages where they fill in different options like size, breed and color.

​

Visual Design

  • The images awake feelings, encourages to purchase a pet. They also contribute to it feeling easy to buy a pet, which isn't only a positive feeling for our participants. The site can feel a bit sales driven.

​

Content

  • The personal stories seem to have a high readability. Someone wants more, e.g. video recordings with people who have gone through the process of purchasing a pet.

  • The fact that we offer counselling is perceived as good service, and the company feels serious.

  • The portrayal of the 5-step process makes it feel simple.

Creation tool

We gathered some feedback on how people expected the creation tools flow to work. Here are some quotes that i have translated to english:

"I instantly think of Sims, because that's my mental model of how you would create a pet."

"It can't be too simple."

"Will you be making one directly, or is the process more complicated before/after? A 13 year old child would easily make eleven dogs."

"You want to go in and dream... but it's disappointing if you want to put elephant ears on a border collie, but then find out that it's not possible. Divide the playful part and the serious order part."

"Maybe it would be good to start with a tutorial. You show the tool but it gets blurred out 'Here you can do this' click next 'Here you can do that'."

"Should it be this simple to just, go in and create your pet? What do i need to do to be eligible?"

"It almost feels to good to be true."

Flow chart
Flowchart.png
A/B test

Whilst making our flowchart we came up with two different solutions how the creation tools flow should start. Either the user gets to choose between Skapa själv (Creating it them self) and Färdigt paket (Premade package), or they could choose to start the process by picking either Syfte (purpose), Ras (breed) or Färdigt paket (Premade package).

​

We conducted two tests, where we tested both versions.

Test A
Test A.png
Test B
Test B.png

The tests showed us that the users had a hard time understanding the difference between choosing Syfte and Breed in Test A. It was much clearer for them in Test B, where we had merged Syfte and Breed into one option: Skapa själv. As one of Normans six principles, constraints say, we should limit the user. We gave the users too many options which resulted in a cognitive overload. We had a user describing feeling FOMO (fear of missing out) with Test A, they did not want to choose because they were unsure what they would miss out on by not choosing the other.​

User testing

We developed wireframes for the first iteration of the whole creation tool flow. At this point we chose to keep the version of Test B in the flow, despite the A/B test results. This partially was for presentation purpose, we had not remade the flowchart to match Test A. We had a presentation coming up of where we stood and for our audience sake, we chose to keep Test B so that it would make more sense for them. But we also kept Test A because we had only done two A/B test thus far. We took the results into consideration but kept Test B so that we could test it further when we tested the whole flow, to strengthen our thesis.

Klickbar prototyp v1.0.png

We tested the front page and the creation tools flow on four people along with a less structured test on the our class. We were sadly running out of time after this, we had a day left on the project after finishing our tests. 

PROTOTYP - To do.png

We organised a small workshop within the team, where we wrote down all of the bigger insights we got from the tests. We then prioritized them and tried to iterate on as many functions for our prototype as we could during the time we had.

Reflections

Project takeaways

Focus more on the interaction design. If I would do it again i would've spent more time on the actual create a pet flow, rather than the front page.

Since this was all for the Interaction design course, I would've liked to spend more time on improving the actual interaction for our creation tool.

 

We got hung up on the fact that people felt unsure about our product which resulted in us focusing on the front page. It would've been good in a real scenario, since we succeeded in gaining our users trust. A lot of those who expressed uncertainty during the first interviews, ended up being a lot more interested and trusting of our company and service.

​

We should've tried more things, instead of getting stuck discussing them for longer periods of time. I think we would've gotten a lot further by doing so, and also found the answers to what we were discussing a lot faster.

​

Divided up in smaller teams. We divided up in smaller teams during the beginning and towards the end, which saved us a lot of time. It can be harder in the middle since we all want be a part of the ideate phase. 

Next steps

Steps in progress bar should be clickable. During our testing we could see that the participants liked to use the progress bar to navigate between the steps. Because of the constraints of figma and the lack of time we had left, we did not make these clickable in our final prototype. With more time, I would definitely add this function, as it's something our users expect to be able to do.

 

Shopping cart. The cart we have in this stage had some flaws, participants were a bit confused by the pricing. With more time I would iterate on how and when it displays the price.

​

More information. There is a need for more information on what the different modifications actually imply. 

​

UI Design. With the time restraints, we focused a bit too much on the UI on the front page which affected the time we could spend on the UI on the creation tool. I would like to further improve the UI of the tool.

​

Other:

  • Tutorial

  • Error prevention and help

  • Copy

​

And of course, more testing overall.

bottom of page