I put myself into the user's and stakeholder's shoes to understand their POVs

This exercise was useful to explore perspectives and think out of the "designer's box".

Personae creation allowed me to define and understand users

‍

Stakeholder Persona

This deliverable allowed me to empathise with stakeholders, wich made me conscious of how to help them in their day to day job with the webpage.

User Persona

This exercise was useful to empathise with users, explore new perspectives and think out of the designer's box.

Before understanding the problem I thought of a selling site, after I opted for a more client service oriented site.

At the start of the Project I was supposed to design a website focused on client acquisition and conversions, but through my discoveries  I decided to focus the website on cultivating the company trusworthiness and improving customer attention. That way the clients will come by themselves.

How might we help customers and stakeholders optimize community management?

A useful method to start the ideation journey, I especially enjoyed using it. It helped me ideate and order new features for the website that I had in my mind.

HMW Questions

Understanding the users' processes is essential in order to develop your own.

From the discovery of the service to the goal action, each step was crucial for my understanding. I also mixed the HMW questions with the user map, and applied this rule: Where more questions are in place more focus is needed.

User Map

I started ideating the features to supply users and stakeholders needs and I classified them

I classified the features by level of importance, in order to know what to develop first. I also ordered the features by screens in a web-map style.

Needs VS Features

An explanatory list of why I ideated the most important features.

Website structure, order and flow

The website is a purely inspirational one mixed with some extra functionalities for clients.

I presented the clients with the research results and the features, and it went exceptionally well

I explained the insights extracted from the research and the ideas I came up with to the client . The result of that meeting was excellent, the client was happy, accepting almost all my recommended features, but others were difficult to apply due to their timing and workflows.

I created paper sketches of the website

Sketching helped me to previsualize and ideate the web layout in an easy and quick way.

Taking the sketches as a reference, I created the wireframes following a minimal design style

The next step was create the wireframes, which allowed me to visualize and create the skeleton of the website.

I presented the wireframes and flows to the clients before going deeper into the UI design

The clients loved the minimal aproach and I was ready to continue.

Following the research bases I created the UI with an inspirational and minimal  style

I used an inspirational style in the images ,colours and layouts for two main reasons: 1. To differentiate Belcam from the competition, and 2. Because the housing enviroment in Marbella flows around a luxury and "coolish" environment.

‍

Moodboard

Inspiration

I created the UI Styleguide to base my design on it

I created the high-fidelity prototypes to have the client's feedback before the development

I replicated the design on Webflow, and created responsive HTML layouts

I added transitions, animations and functionalitties to the design using Webflow and CSS code.

After the launching, the user experience will be revised based on the data from google analytics.

For me is crucial gathering feedback from my clients websites and use it to improve the user experience.

1. Navigation bar shortcuts

I created a navigation bar that have shortcuts to the two most demanded features by owners and new clients: Community incident report and Online Budgeting.

2. Incident form

I created a simple but useful form using typeform to make it easy for owners to report an incident and for managers to gather data.

3. Commitment and services Document

To build trust in the company and create a commitment with customers I added an option to download a document where all services and company commitments were placed.

4. Book a consulting session

To be closer to customers and improve the communication with the company I designed a feature based on an embed google calendar to book a date in the office.

The take away: Even the most basic website will dramatically improve its UX with a proper UX approach and methodology.

At first, this project didn't seemed challenging, my fist assumption was that using the UX methodology for a corporative site could be worthless. But by empathising with the users and diving into their pains I discovered a whole new world of possibilities wich could improve customers and stakeholders lifes.