quupe — enabling the world to share resources

UI Case Study

What is ‘quupe’ ?

Pronounced “Koop”, and short for “recoup” — quupe is a rental marketplace to rent everyday items from people in your neighbourhood. Such as household items, skis, snowboards, cameras, camera gear etc.

quupe’s Mission is to enable the world to share resources. They wanted to build a platform that changes the way we think about resources and about our communities. To enable societies to make more sustainable choices about consumption to ultimately fight overconsumption. Thus, they came up with the idea of product sharing and how it can decrease consumption and the number of goods that will potentially end up in landfills.

Project Opportunity

We were given the opportunity to re-design the current quupe application. I was one of the UI designers on the team.

The project duration was a 3 week sprint.

Design Team

Client Kick-off Meeting

Our research fundamentally began at the client kick-off meeting. Zeeshan, one of the quupe co-founders was able to provide us with a lot of information about quupe, his vision for the app, his understanding of user needs, and the existing quupe brand.

Gut Test

During our second meeting, once we had a better understanding of quupe and what it was all about, we conducted a Gut test with our client.

We curated a set of website and mobile app images and asked our client to look through the images, each for 10 seconds and to think of them as his own and score them from 1 to 5. 1 being very low — I don’t like this website at all, and 5 being very high — I would love this website as my own!

From a UI standpoint, the gut test we conducted was very valuable, as it helped us have a better understanding of our client’s visual expectation for this project. It gave us a clear idea of our client’s tastes and the desired aesthetics for the app, which influenced the 2 art directions we eventually came up with.

Highest Voted Screens

The common theme amongst the top chosen screens were that they were :

  • Minimal & clean with the use of white space
  • Clear hierarchy & grouping of information
  • Balanced graphics with the content

The ‘Why’

Before curating our art directions, we started off by defining our ‘why’. The core reason behind our design decisions. We went back to the quupe mission, which was :

“To enable the world to share resources.”

From there, we started to curate 2 different art directions to present to our client.

2 Art Directions

1 . “Community”

The first art direction we presented to the client was centered around the community aspects of quupe. We knew that the colour palette was far away from where the quupe brand is presently but we wanted to present a different approach to the client, with the second art direction being more “safe”.

The mood we wanted to create is :

  • Sharing can be fun
  • Energetic & Lively

We wanted to show that each person is connected and contributing to the community. The honeycomb shape is one of the strongest in nature and we wanted to use the hexagonal shape to portray that. The colours are also very vibrant and fun.

Moodboard & Mockup

2. “Sustainability” — Chosen art direction by client

For the second and chosen art direction, we went the sustainability route. This art direction is more calm and natural and shows an appreciation for nature. We wanted to keep the current “quupe” blue and play around with introducing an accent colour.

The mood we wanted to create is :

  • Natural
  • Calming
  • Having a peace of mind
  • Trusting
Moodboard for the “Sustainability” art direction

Style Tile

Style Guide

Colour

We decided to keep the current quupe blue. The colour blue suggests trust and confidence. It shows calm, clarity, serenity and peace. It is the colour of the calm sea and the clear sky

The colour we decided to add for accent is the Sunshine yellow. Yellow is a colour that represents optimism and happiness and it goes well with our primary colour of blue.

We decided to use a dark Charcoal grey for our typography, and lighter shades of the grey for inactive states of buttons. This neutral colour allows us to showcase the items on the app without distracting the user’s attention. It also isn’t as harsh as having black.

Typography

We chose Avenir as our typeface. It is :

  • Accessible
  • Has a wide variety of Styles
  • Clean & Modern
  • High Readability
  • Good text support for showcasing images

Icons

We wanted the icons to be clean and minimal. They all use our accent yellow colour.


Personas

The UX team came up with two primary personas for the app. A borrower persona and a lender persona — It was helpful to keep the personas in mind when designing the app.

Borrower Persona

Lender Persona


Wireframes

The UX team handed us the wireframes at the end of week 2 and we began to add the visual elements to bring the design to life.

Sample Hi-Fi Screens

The team with our client, Zeeshan!