Tidy. Don’t lose sight of your clothes

An app design and coding case study

Javier Fuertes
5 min readJan 17, 2022
Tidy

Introduction

As you may or may not know, I’m currently living in Madrid, but I’m not from there. I was born in Pamplona and lived there with my family for 23 years. It was just after I finished my studies at the university that I decided to go work and live in the capital. So I can say that right now I have two homes.

And that’s the beginning of my problem.

As you may expect, whenever I have free days or holidays, or maybe I just have a long weekend or something to do in Pamplona, I try to go back. I book my bus or train tickets and I prepare my luggage. What should I bring with me? what clothes do I need for Pamplona? I love this t-shirt, but don’t I already have a similar one in Pamplona? I can’t remember. How many socks should I take? are these too many? Don’t I already have more pairs in Pamplona? I don’t know.

Gosh… I wish there was an app for this…

Well… welcome to Tidy :)

The App beginnings

And so, I started to sketch an idea for what the app should be and how it should behave. I painted the main screens in simple sketches to see if those ideas where actually feasible in a screen design on a phone, and to work on a trial an error basis (paint my idea, see if it works, find out that it doesn’t work, erase it and paint it again…)

Here is a small glimpse of those dirty sketches I painted quickly on my tablet (I have a new pen-included tablet which works really well for these kinds of scenarios):

Mockup sketches
Mockup sketches

Now I was ready to move on to Invision Studio and start painting a more realistic approach to those screens.

A tour around the App

First screens

We would begin by downloading the app and are welcomed by the splash screen (a short screen to make time for the app to load for a little bit). Once the splash time is over, we will be shown a landing screen where we can star two different paths, either login or register. If you login, you will be redirected to the login screen (similar to what you can see in any other app). If you want to register, you will fill a form with the data required and, after a success screen, will be taken as well to the login screen.

In order: Splash, Landing, New user and Login screens

About the wardrobes

Now we can talk about the wardrobes, the main selling point for this app. The first screen after every login will be a landing screen for the wardrobes, where you will see which ones you have created and will have the opportunity of creating new ones. Inside each wardrobe you can store clothes, which will be separated into categories.

Landing with empty screen, landing with wardrobes, categories and clothes

Creating new wardrobes and clothes

But we need to fill those screens with wardrobes, and the wardrobes with clothes. That’s why we need screens to add these elements. For the wardrobes, we just need to know the name for it and the city it is located in. This would be necessary first so that we can display those elements in the landing screen for each one of them, and secondly, since maybe in the future we would like to add some sort of geolocalization or a map view of your wardrobes.

On the other hand, for the clothes, we are going to need to know the name, a short description (even though this one can be optional), its category and the wardrobe where we would like to store it.

After creating a wardrobe or storing a clothe, we will obtain either a success or failure screen, which can be reused for other future processes of the app.

The screens will be as follow:

New wardrobe, new clothe, success screen, failure screen

The last-but-not-least important screens

There are some screens or information which might not look as cool to the eye as the main functionalities, but are highly appreciated and needed for the user. Screens such as confirmation modals, side menus, app info or account info. User will be able to perform several tasks in these screens, as you can see below:

Side menu, cancel modal, app info and account info screens

What the future awaits…

This is all up until now. I will keep on working on these designs and functionalities, and try to make it become a reality by starting to code it. Who knows, maybe this app will be listed in one of the app stores.

The next big functionality that I have planned for this app (if you have a good eye you might have already seen it written somewhere), are trips. I don’t want just to make a wardrobe app, I want to be able to travel between cities and transfer the clothes that I take from one wardrobe to another. It will automatically take clothes out from one place and put them in the other one. Handy? for me at least it is :)

--

--

Javier Fuertes

I like to talk about UX, web design and everything related to Design languages. Follow me on Twitter at @fuertesjavier1