Chez Fluff

UI Design of a pet-friendly rental application for mobile and web

Duration

One month

Tools

Figma, Adobe Photoshop, Zeplin, pen and paper

Overview

Chez Fluff mockups for desktop and mobile

The Project

Chez Fluff is a mobile and web application that helps city dwellers find pet-friendly accommodations. I completed research and the UI design of the application.

Since this project was for a short course, I conducted all research and designed all screens (from sketches to high-fidelity prototypes) within one month.

The Brief - Apartment Finder

“The application should allow users to log in, view the main application screen, and complete an interaction that results in changes to the main view or leads to a new page. You should aim for 3-5 screens in total.”

The idea of designing for pet owners came to mind because I found it incredibly challenging to find a pet-friendly flat when searching in the past.

However, to my surprise, UK law regarding pets in flats changed significantly in 2021. That year, the Dogs & Domestic Animals Bill gave renters the right to keep a pet in a flat, with landlord consent as the default position.

I used this idea of ‘consent as a default’ to inspire feature ideation for the app.
However, that’s not to say I jumped in and started designing screens immediately. It was tempting to go down that route, especially since this was a UI project.
But as a designer, I feel compelled to back up my choices with research.
So I knew I had plenty more work to do before I picked up a pencil or opened Figma.

Define

Understanding Other Sites' Features

First, I analysed other rental sites’ core features via a competitive analysis.

Competitive Analysis for Chez Fluff

Defined user goals with empathy maps

By conducting a competitive analysis of existing rental sites, I gained a deeper understanding of the challenges faced by pet-owning tenants. I created empathy maps to identify key user goals, and further understand user needs and pain points.

Empathy Map for the Tenant

Ideation

SCAMPER

After I xxx

SCAMPER board for Chez Fluff

Mind Mapping the brand identity

Mind map for the brand identity and logo

While defining the brand identity, several keywords emerged as particularly relevant, including:

  • Playful
  • Welcoming
  • Easy
  • Fresh

These words served as the inspiration for the initial colour palette and influenced the design of the logo.

First iteration of the palette (brand colours only)

Sketched potential layouts

Studying and sketching the UI from other competitors was instrumental in shaping the design of this app, as it gave me valuable insights into effective interface layouts and visual elements.

Sketches of UI from other competitors

I started with the mobile screens. I looked at various booking apps such as Airbnb, Zoopla, and even Booksy and sketched layouts of screens that I liked.

Prototype

Low-Fidelity Wireframes

After sketching rough wireframe ideas, I began building them in Figma. I noticed that sketching made things go more smoothly and quickly.

After considering various design options, I ultimately created these wireframes, which best aligned with several user goals identified during the research phase.

Desktop and mobile site wireframes

User Task Flow

User Task Flow

The path I chose was:

  1. Start From the Landing Page
  2. Search for a Flat
  3. Refine Results
  4. View Details
  5. Initiate Contact With the Owner

I also added ‘Book a Viewing’, which felt like a logical place to end this path.

Prep for High Fidelity Screens - Logo Design

Chez Fluff - logo process and results

Conducting a competitive analysis of logos used by other rental sites informed my design choices for the Chez Fluff logo. Drawing inspiration from this research, I experimented with different font options.

I sought a playful typeface and found Reklame to fit the bill. Then I edited the original typeface in Adobe Illustrator so the logo reflected the pet-centric brand identity better.

Updated colour palette and style guide

More than anything, a flexible typographic design was vital because I needed to create multiple responsive screens quickly.

I decided to use the Major 3rd type scale (with a 16px base size) because of its flexibility across mobile and web. 

Similarly, I went with the Alegreya typeface because of its flexibility; it’s stylish yet informal and has multiple variations across its sans and serif fonts.

Chez Fluff style guide

Clickable prototype for mobile

I created the prototype following the user task flow defined earlier, and included screens for the landing page, search, refine results, view details, initiate contact, and book a viewing.

Results

Testing & Handoff

I did a quick usability test on the mobile prototype with my partner, who noticed several issues with links that went to odd places. Even doing one test was massively helpful, and I implemented edits based on the test findings.

Then, I completed the handoff using Zeplin (external link).

Lessons Learned

This short course project certainly helped me learn a few things about myself as a designer:

1. Research

I need to do more than just make nice-looking screens. I need to base design decisions on tangible research, even if it’s of the rough-and-ready variety.

2. Sketching

I am by no means an artiste, but sketching enables me to work quicker and more efficiently than if I tried to design straight from screens.