🥳 Final Project ✨ Redesign a real website and the user flow of the client

It was with great excitement that I started this project, I discovered a real challenge. Working directly with a real company , here in real estate, to improve the userflow of the client from the arrival of the homepage to the flat search and with the creation of an account or direct connection and profile management.
To do this, I participated in a kick off meeting with the CEO ( FLATBAY ), we were able to define the objectives of the company and my involvement. Also thanks to Trello, we were able to determine each step and collaborate efficiently.

Like any good UX designer, I’m going to work on the design thinking that is essential to the success of our study.

Let’s go for our UX research !

Research Phase:

• Environment :

The UX benchmark allowed me to analyse the interfaces of competing applications. Identifying the best practices in the field also allowed me to position my product effectively.
The UX benchmark is used to immediately identify the elements that differentiate this product from the competition.

In this part , I focus on the research and understanding the environment, analyzing the brand and features and research about our customer with qualitative and quantitative datas.

Qualitative & Quantitative datas :

The first step in conducting a qualitative analysis of my data is to collect all the comments and feedback I wish to analyse. This data can be captured in different formats, for example on paper or post-its, or in a forum or online surveys, and I have opted for this later option. After having carried out a study with 54 people on the search for general housing I was able to obtain the following results: More women than men, often between the ages of 26 and 39, use the internet to find a flat and pay rent of between 500 and 1000 euros.

After this step, I was interested by following interviews to 5 persons , I elaborated a rather general questionnaire at the beginning then more targeted afterwards with questions related to their flat search with my partner Flatbay, the problems encountered during the navigation, the points to be improved, the things appreciated, … from that I use the Affinity Diagramm method:

Define Phase :

User experience is a major issue for digital companies that want to build customer loyalty by offering a smooth user experience and pleasant, functional interfaces. There are a number of methodologies that aim to study user behaviour, interactions with the product and other data points. I was able to analyse all this information by creating a persona and a geographical emotional journey which allows me to identify areas for improvement.

- Illustration by a storyboard :

The part I like the most in the Ux because it is very funny and very revealing of the problem, here is the representation of our persona Chloe, looking for her flat after having found a new job and who is in search of independence and autonomy. The search is complicated and difficult and above all too much bureaucracy, she resumes her research and arrives on the site of our partner with the possibility of applying directly online with a follow-up of her file and a fast answer, here positive! This allows her to have her own home and even to meet new people by opting for an already furnished flat in coliving !

• Define the problem :

Now I can move on to the second stage of the Design Thinking process and define the problem our users need us to solve. First, I gathered all my findings from the empathy phase and started to put them together. What user needs and challenges have consistently come up?

Once I had summarized my findings, I formulated what is called a problem statement. A problem statement describes the problem or challenge we sought to solve.

As with all that happens in the Design Thinking process, the problem statement keeps the user focused.

- Moscow Method & MVP :

- Sitemaps:

This is taking shape and here we are, deconstructing our site like our old science classes with our famous frog! Really like this step because it is an important stage to make the flow of our user as simple and pleasant as possible!

After analyzing the “skeleton” of the site, I proposed a new redesign with new functions more attractive, I thought of developing this website with great potential by adding some attractive landings and that allow the user to return to visit it (like QA’S, story of the brand, …)

• The User flow:

The success of a website or application is measured first and foremost on one criteria: the intuitiveness of its design. When our user navigates our platform, the probability that they will consult it again, or even create an account and submit their application, increases considerably.

The tool to measure the simplicity of a design in a comprehensive and informative way is in my opinion the user flow.

User Flow allows me to understand and anticipate our user’s behaviour in order to create a site that is in line with their experience. It aims to provide the most suitable browsing experience for the user.

- Ideation phase :

Sketch: Idea generation
These are initial sketches where lower level details are simply noted. Usually done by hand or in very low fidelity.
I drew a lot of basic sketches to handle the problem from different angles and consider different solutions. In drawing this kind of sketch, I also try to generate as many alternative solutions as possible.
My aim is to generate as many ideas as possible and to choose the most promising ones:

• I collected, after testing my low fidelity prototype, some quotes that allowed me to generate a lot of ideas and also to target the most appropriate way to navigate the site. As well, I made a dashboard to analyse the navigation behaviour, whether it was understood, whether it was easy to move from one option to another or whether help was needed.

- Mid Fidelity — Wireframes:

Wireframes are a structured version of my sketches that are meant to be semi-functional, but do not include any aesthetics or design graphics. I produced them using FIGMA software.

At this stage of the process I have already generated a wide range of ideas and started the reduction phase. This means deleting all the ideas that didn’t work and refining the best ones on my list. Now it’s time to create something concrete to update the UX work put in place during the sketching phase, the wireframing.

Creating wireframes means implementing my ideas in a clean formatted version of a sketch. Wireframes have given me the ability to create layouts. It allowed me to determine which elements work in these layouts and which ones may cause constraints that may impact on the user experience.

DESIGN :

I really love this part, which is almost magical, so let the magic happen!

I start by illustrating the attributes of my partner company and allow me to define, in this case with sobriety, and in a pure manner, the colours that will allow the site to gain in authenticity.

- Colors & Typograhy :

The psychology of colour is an undeniable factor in branding ( Marketing strategy adopted by the company to identify its brand) . Therefore, it is important to put in place a well thought-out visual communication strategy too.

Colours are a real tool to communicate the values of the company, to convey messages, to arouse the empathy of our customers and to help them remember the website visited.

I had the chance to propose my colours to my partner company while keeping the main colour of the site (designed in the logo)

Indeed, colour is a very powerful visual component that is easily assimilated by the brain, more so than words.

This is why I wanted to explore different horizons with the same basic colours and propose a dynamic structure by focusing on their graduation, their saturation and their tonality.

Here I have maintained the blue of the brand by proposing different tones and also maintain the typography and its variants, I added a gold to accentuate the steps of our user.

- Hight- fidelity Prototype :

The long awaited moment, the demonstration of the Flatbay website, totally redesigned with even more innovative functionalities and allowing our user to reach his goal in a pleasant environment!

A total crazy and amazing adventure of 2 weeks in a design sprint ! I had a lot and a lot again of fun in this project ! I was able to submit my ideas to our partner Flatbay that I thank for this real consecration, we did it!