The Local Guest House
Solution Outcome
This project was created to try to fulfill stakeholder requests but at the same time create a website able to give the potential users the experience they search for when looking for a place to stay in Lisbon.
The idea was to highlight the Guest House characteristics, showing as many images as possible, pointing the best assets they have to offer and giving the user the possibility to create a good concept in order to make them decide book a room.
Located in Alameda, Lisbon. Portugal, A very traditional, bohemian neighborhood.
To try to better understand the client’s needs and porpoises with this project, I asked him three clarifying key questions which gave me the chance to figured it out how to start and bring up the problem statement.
It was important to define needs and the imperative on having a website where he were able to have a booking section and not be dependent on external payed platforms which not always would let him showcase his property as he would liked it.
The Challenge
Briefing
We started identifying the client’s business needs, asking why he thinks he needs a website.
Been Pedro the stakeholder, I raised a few questions to him, to be able to identify what he really wants and need and be able to set up a research strategy and start with the process of building The Local Guest House website.
The client provided the logo, and the color palette, since he already had this features and did not want to change them.
Research process
Understanding a little bit better the client motivations, needs and how he would like the website to be, with the briefing, it was time to start with the research process, to try to get to know what his potential clients / users would need, because this user perspective would be the key on what should be highlighted in the website in order to respond on what the users are really looking for in a Guest House website to take the decision and book a room or make a reservation.
Quantitative
It was a 10 question survey, (multiple choice and open questions), mainly asking participants about their preferences when they are booking a place to stay during their holidays/business trips. Here are the charts and metrics obtained.
Data collection technique
Survey Sample 14 People: 8 Women, 6 Men. Ages between 26 and 55 years old.
1 person in the range of 46 to 55
2 people in the range between 36 to 45
11 people between 26 to 35
Jobs:
12 people are full time employees
2 people self employee
-
Survey - Quantitative Technic
The survey was the chosen method, since it was more versatile for this particular case where the client needs to know what people looks in a Guest House website.
After a first look, I proceed to organize the ideas in posits -
Answers - Organizing information
The first analysis made to the answers provided by the participants. This step was important to get a first interpretation on peoples ideas and opinions
-
Analysis - matching the info
At this stage, having the info organized and categorized, it was the moment to find the matches, most common answers and compare the numbers to start modeling our user persona, our first archetype.
-
User Person - Archetype
This technic allow to use one or more survey participants to define a final possible user. It is important to describe the person adding demographic info, but also goals, needs and interests
The previous process was necessary to obtain our user person, an archetype, generally based in one or more real participants from the survey, having this person defined and described, the next step was to get the insights that will help me to answer to client’s goals.
These insights were the summary of some the ideas given by the participants, were supported by the verbatim. The insights provide deep understanding of problems, needs, desires, behaviors of the possible users.
Once the insights were found it is time to define the JBTD (Jobs to be Done), which can be translated into the main goal that the users want to achieve with the product or service
Getting to the MVP
Minimum Valuable Product, is a version of a product with just enough features to be usable by early customers who can then provide feedback for future product development.
It is a good way to learn about the user, it is also a good stage in the design process to define the value proposition, how the design is going to contribute to align the users needs and the stakeholder goals.
The MVP can be delivered or tested in the sketching early stage and it is an easy and fast way to start organize ideas, features, functionalities and visuals.
Wireframes
This phase gave us a lot of inputs and we were able to realize on possible failures and weaknesses. User journey, Interaction, Testing. At this stage of the process we found it relevant to include a “Services” section, since users strongly express the need to know what could they find in the house once they arrive.
Building the UI, starting from the smallest to the largest device
Mock-ups: It is recommended to start the UI design from the smallest devices, such as phones, and go increasing to tablet and then desktop version, that technique would allow detect possible interphase issues, more easy adaptable from small sizes to bigger sizes than the opposite
Languages
Portuguese, Spanish and English.
It is important to be able to set up the page in different languages, since the Guest House main target are tourist specially from Europe, that is why the chosen languages were: Portuguese, Spanish and English.
Spain is Portugal’s neighbor and Lisbon receive hundreds of people from Spain the whole year. Also countries like France, Italy, Germany and the UK are frequent visitors, that is why English is appropriate to display the page to people from these countries.
Design System - Component Library
At this stage it was time to start to built a library to facilitate the design process
Responsive Grid
The responsive layout grid is made up of three elements: columns, gutters, and margins.
According to material design, on mobile the layout grid uses 4 columns with 360 dp of spacing, on tablet, at a breakpoint of 600 dp, this layout grid uses 8 columns and website is 12 columns
Website sections
This phase was dedicated to show up the different sections of the website, starting for the home page, and including all the others described in the site navigation bar
Conclusions
Probably, the most important is the impact that the end result got in the users through the testing and also how captivating and pleased the stakeholder felt about the work delivered.
The overall work accomplished was that the high fidelity prototype made the porpoise of provide the stakeholder with an website mock up that highlights the best features of his space and what he offers and also an intuitive, accessible an user friendly design digital product.