Non-Commercial Work with a Developer

CoelhinApp

UI Design • Interaction Design • UX Design

01 —
BACKGROUND

 

Overview

CoelhinApp, which means “Rabbit App” in Portuguese, is a small one-page web app concept created by my husband, Tom. Throughout his journey of learning coding, he’d been curating projects to keep his mind sharp and well trained. This idea came about one night when he was looking at our neighborhood rabbits through the window. I took Tom’s initial creation, “The Local Rabbits”, and made changes to the interface, which he then took and revised in his code.

Criteria

CoelhinApp is a tamagotchi-style rabbit “farmer” type mini game: the user adds rabbits by clicking a button, one at a time, and they randomly generate into male or females. As they age, and on a time trigger, there is a chance of pregnancy, and the population rises. To emulate a natural environment, there is also a time trigger for death. Our mascot tells it all!

02 —
RESEARCH

The original code

 

Discovery

  • Re-create the current app into something user-friendly, easy to understand, cute, and contemporary

  • Gain insight on the capabilities of coding from design, and designing from coding during pairing sessions between teams

  • Keep track of issues encountered to prioritize revisions

Basic Requirements

  • Title, subtitle

  • CTA button to add new rabbits

  • Current population, # of Female Rabbits, # of Male Rabbits, Pregnant Rabbits

  • Future addition: Information modal about the project

03 —
DEFINITION

 

Inspiration

The design of the app was supposed to have a sense of sweetness, with a dash of realness. With that in mind, I decided to go for a cutesy animal theme, but with a little edge (there’s death)! As I was in charge of the design, I went ahead and found some of the following mobile designs that also featured some of our requirements from a high level.

04 —
DELIVERY

 

Sketching and Wireframing

Combining the basic requirements, and my preliminary research of existing designs, I drew sketches to determine the application’s information architecture. I then designed a lo-fi mockup in Miro to further clarify the look to my partner. As a designer once told me, “creating low fidelity designs first allows you to explore different options quickly”, and it halves the time needed to solve a problem.

04 —
DELIVERY

 

Branding Colors

The color palette I chose features light and dark shades of green and purple. Green represents serenity and balance (the serenity of a rabbit in a meadow, and the balance of life), and purple represents spirituality and death (the circle of life).

UI Kit

An inventory of all of the design elements that were used (or unused) was important for consistency throughout. I also value this part of the project because it makes it easier to revisit.

Usability Tesing

Participants

  • 4 men and women

  • Aged 14-34

Objectives

  • Observe how users interact with the app

  • Identify features users wish to see

  • Determine any frustrations or confusions a user may have

Summary

  • Users had no trouble completing the tasks with the CTA button

  • Users had many suggestions for the app such as: 1. Adding a graveyard/history of the rabbits, 2. Having the ability to view the rabbits as dots on a map of sorts, 3. Having background information about the app

05 —
IDEAS

 

Future Additions

Tom and I had a participatory design session where we discussed our next goals with the project with our users’ suggestions from the testing phase in mind. During our brainstorming session we came up with the following next steps:

  • Information modal about the project with our names, and the inspiration behind it

  • Graveyard with a list of all the rabbits that passed away, with an ode to the original rabbit

UX Goals

  • Usability testing with users once we add more features to the app

  • Affinity mapping and synthesizing that data

Previous

Reading Space