Portfolio Print

TABLE OF CONTENTS PLACEHOLDER


Vítor Gonçalves

UI/UX Designer

👋 [email protected]
🤙 (+351) 916065748 
👉 LinkedIn
👇 Berlin, Germany

About

I’m passionate about making a useful digital product and I believe in clichés like “teamwork makes the dream work” or “design has the power to improve our world”. Most importantly, I make a mean hot sauce.

Skills

User Research // Fast and Early User Testing // Wireframing // Fast or Hi-fi Prototypes // Journey Maps //

Figma // Adobe XD/AI/Ph // Vector Design // Web Development // WordPress+PHP

CV

Experience

Web Designer/Developer // Jan 2020 – Present

Freelancer | Kolkata, Aveiro, Berlin

UI/UX Designer // Jun 2018 – Dec 2019

Watgrid Solutions | Aveiro, Portugal

Digital Communications // Mar 2017 – Nov 2017

My Friends in Portugal | Aveiro, Portugal

Key-Shoe Repair Salesperson // Apr 2015 – Sep 2015

Mister Minit | Aveiro, Portugal

Photographer // 2004 – 2014

FotoFelicidade | Vila Verde, Portugal

Education

Masters in Multimedia Communication (16/20) // Sep 2015 – Dec 2019

University of Aveiro, Portugal

Language

Native in Portuguese
Fluent in English
Basic in French, Spanish


YourEstate – Case Study

Renting an apartment in Berlin

Intro

I needed an example of my process to better display my user centric approach. I feel a quick case study can shine a light on my methodology, better yet if related with issues I had myself. I moved to Berlin, where I felt the German customs and the Berlin market can be overwhelming and, considering the influx of foreigners into the city, there might be a good impact opportunity. Nevertheless, it helped me get usable information without spending too much time on research. I based this case on the Immoscout24 platform as it is a major website to find apartments for renting, and for source of information I used allaboutberlin.de as it gave me nearly all that I needed for my adaptation.

Placeholder Logo

FAQ – TABLE OF CONTENTS PLACEHOLDER

Prompt

Adapt a real estate website to accommodate foreigners looking for apartments in berlin.

  • help people navigate the requirements and processes
  • only applies to houses in berlin
  • only applies to foreigners

Goals

Establishing the company goals helps in determining performance metrics and the focus of design. It also helps balance business interests with user interests.

  • Increase conversion, reduce bounce rate and exit rate of visitors from outside of Germany looking for an apartment in Berlin.
  • Help visitors satisfy their needs through our platform (measure satisfaction through FAQ, or conversions made after FAQ).

Research

Process

First I need to find pain points.

I’ll assume the pain points to the best of my ability, from my experience, foreigners have an issue understanding the requirements and processes of finding and renting an apartment in Berlin due to the customs and legal German terms.

I recently moved to Berlin, which gives me some idea of the challenges in this situation. I know the website allaboutberlin.de has a lot of very valid information, so I will base my research on their content.

Otherwise I would have tried looking into the analytics data for the causes of the bounce rate (if available), and made a survey for which I may find participants through facebook, reddit, maybe the platform users as well. If these data proved not to be enough, a focus group, or interviews, would provide better insight, depending on the resources available.

Pain Points

  • Users might make mistakes because they don’t understand all the customs necessary to rent an apartment in Berlin.
    • It’s difficult to learn because: websites are usually not translated;
    • German terms like Anmeldung even in English documentation are not translated;
    • most landlords don’t speak English.
  • It’s demanding to find an apartment because UI doesn’t allow to simply filter unwanted results, like exchange apartments.
  • Users might feel compelled to find a simpler channel of renting as they feel overwhelmed when looking for an apartment.

Value to be added

  • timely information of what is required to rent an apartment in berlin
  • Translatable interface
  • glossary of terms
  • helpful resources,
  • encouraging messages during the process
  • fancy tools

Ideate

“Computers are useless. They can only give answers”

Pablo Picasso

Making questions about how, what, where and when, help convert facts into usable changes. To expedite the process, and considering I don’t have real data about people and users, I chose not to create user personas and cases. Instead I ideated some solutions from the pains by asking myself what users need, when do they need, if they should have it before and how we can give them.

When do users feel these pains? when is best to intervene?

  • on enter → website is not in english
  • listing results → what is an exchange apartment? How can I filter it?
  • apartment conditions → what is a cold rent? what is a 2 zimmer?
  • renting and further → what is this document I need? how many rents I have to pay? how can I trust the landlord? what do I need from them?

What is missing?

  • Timely information which can be coupled with some encouragement.
  • Further resources to make the user feel supported.

How can we add value?

The idea is usually to give users information, control and motivation. I tried to come up with as many ideas as possible, and placed a ⭐ next to the ones that are essential in order to add the value we proposed.

  • Easy to translate interface. ⭐
  • Clear and thorough FAQ about the subject. ⭐
    • with an encouraging landing page. ⭐
    • each FAQ can have it’s own page with a message at bottom motivating the user and referring to related pages.
  • Small hover tooltips on potentially complicating words. ⭐
  • A message inviting visitors to visit the help section. ⭐
    • we want it to be easily available, noticeable, but we don’t want to nag visitors that already know.
    • a dismissible section embedded in the listing (before the first result) inviting visitors to visit the help section. This allows more control and noticeability than the toast message, while feeling less intrusive.
    • a small section in a berlin apartment’s page inviting visitors to visit the help section
    • JavaScript detection of potential target visitors to trigger a toast message [in search, in a Berlin apartment listing] This should be tested, detecting a listing for berlin apartments should suffice, and toast messages can be regarded as annoying.
  • Check-list for logged in users of all the things they need in order to rent an apartment
    • links to resources, contacts, FAQ
    • ability to upload documents for easy access, easy submission, maybe paid verification
  • An interactive page that helps to choose the ideal neighbourhood of the city
  • Two dedicated help sections for the interface and for renting itself
  • FAQ may include details about living, i.e. how good is public, shared and private transportation links to allaboutberlin.de

Collected info for the prototype

FAQ
  • Things you need to rent an apartment in Berlin
    Open a bank account: you need to pay the rent by bank transfer. You can use Wise or SEPA compatible bank account Save money: first month and deposit (typically 3*cold rent) Documents: Schufa This is like a credit report. If you are new in Germany, your Schufa could be empty. This is normal, and landlords know it can happen. You can get a free Schufa. You can also bring a work contract, to prove that you make enough money. Some services like Wunderflats do not need a Schufa. Passport or personal ID You must show it when you apply for the apartment. Also bring photocopies of your ID, just in case. Proof of income Bring a work contract, your last 3 pay slips, or your last Steuerbescheid. If you are a freelancer, bring a profit and loss statement. If you don’t make enough money, you can get a Mietbürgschaft. Bank account statement (optional) This shows how much money you have in your bank account. If you are a freelancer, bring one. Mietschuldenfreiheitsbescheinigung (optional) This document proves that you don’t owe money to your previous landlord. You get it from your previous landlord. It does not have a standard format, but you can use this template. Mietbürgschaft (optional) If you don’t have a stable income, a parent or a friend can be your guarantor. If you don’t pay the rent on time, your guarantor must pay it for you. This is a good option for students, freelancers and people with a low income. Use this Mietbürgschaft template. Application form (optional) If the apartment is listed by an agency, download their application form and fill it in advance. If you like the apartment you visit, you can apply immediately.
  • Get a residence permit
    A residence permit (Aufenthaltstitel or Aufenthaltserlaubnis) lets you stay in Germany for more than 90 days. Some residence permits also let you work, study or freelance in Germany. The freelance visa, the artist visa, the work visa, the Blue Card, the student visa and all other Category D visas are residence permits. The tourist visa is not a residence permit. The residence permit is a plastic card. In the past, it was a sticker in your passport.
  • Open a Bank Account
    When you move to Germany, you need a European bank account to get paid, to pay your rent and to buy things online. It doesn’t have to be a German bank account, but it must support SEPA transfers. Some Expat-friendly banks: bunq – They speak 7 languages1. They accept many passport types. They don’t need an Anmeldung. You get a German IBAN1. When you create the account, the app uses GPS to check if you are in Germany. Berliner Sparkasse – They have basic online banking in English. The rest is in German. If you open an account in person, they accept most passport types. Commerzbank – They have basic online banking in English. The rest is in German. If you open an account in person, they accept most passport types1, 2. Deutsche Bank – Online banking, customer service and some documents are in English1. The rest is in German. If you open an account in person, they accept most passport types1, 2, 3. Monese – They speak 14 languages. They don’t ask for an Anmeldung. You get a Belgian IBAN. N26 – They speak 5 languages. They accept many passport types, but they sometimes ask for a German residence permit1. They don’t ask for an Anmeldung. Bank accounts have German IBANs. You need a German address to receive your bank card, but it doesn’t have to be registered. Revolut – They speak 24 languages. They don’t ask for an Anmeldung. Wise – They speak 14 languages. They accept most passport types. They don’t ask for an Anmeldung.
Glossary
  • Warmmiete & Kaltmmiete
    The warm rent (Warmmiete) is the total amount of rent you pay every month. It’s the amount you pay to your landlord every month. The cold rent (Kaltmiete) + the utilities (Nebenkosten) = the warm rent (Warmmiete). The Warmmiete does not include electricity for the lights and appliances. You must choose an electricity company yourself.
  • Schufa
    Schufa is a credit bureau in Germany. They give a credit score to German residents. If you have a good Schufa score, it’s easier to rent an apartment or get a loan.
  • Bürgeramt
    When you apply for an apartment, you should include a Schufa Bonitätsauskunft (credit report). This document shows your credit score. There are many ways to get a Schufa Bonitätsauskunft. The citizens’ office (Bürgeramt) handles many aspects of German bureaucracy. This is where you register your address, exchange a foreign driving licence, apply for an International Driving Permit and more. If you need a piece of paper, you often get it from the Bürgeramt.
  • Zimmer
    Zimmer means rooms in German. However, in Germany, the living room also counts as a room. A studio is a 1 Zimmer Wohnung. A 3 bedroom apartment with a living room is a 4 Zimmer Wohnung. The kitchen and the bathroom do not count as rooms.
Tips
  • Finding an apartment is hard. It’s easier if you have a stable job, good income and speak German.
  • You can get a temporary furnished apartment. Expensive but easier to get.
  • Watch out for scammers
  • You need
    • What to look for?
      • Appliances Check what appliances fit in the apartment. Do you need a smaller washing machine? Is there room for a dishwasher?
      • Hausordnung Each building has different house rules (Hausordnung). For example, some buildings have quiet hours from 13:00 to 16:00. The Hausordnung often has rules about quiet hours, BBQs, ventilation, musical instruments, vehicles and pets. 12
      • Neighbours Check who your neighbours are. For example, if they have pets and children, you will sometimes hear them.
      • Pets Check if dogs or pets are allowed in this apartment.
      • Internet access Some apartment buildings don’t have a fast internet connection. For example, the fastest internet connection could be 50 Mbps. Before you choose an apartment, check what internet connections are available. You can use this tool.
  • Do not pay anything before you sign the lease and see the apartment. If you pay with cash, always ask for a receipt.
  • You must register your new address at the Bürgeramtfind a good liability insurance (Haftpflichtversicherung), get an internet contract, find an electricity provider and a few other things. You should also join a tenants’ union (Mieterverein).

Planning

This process and prototype took me two 12 hours in total to do, but I can do better.

Features to Include

See ⭐

User Journey

I expanded on the pains and solutions for each step of the user journey.

  • on enter
    😃 user might be excited on entry because he is moving to a new place, and he found a website with several apartments
    🩸 website is not in English
    🙄😒😠 user might feel different negative emotions [disappointment, frustration] when they find a language barrier
    🩹 easy to translate interface ⭐
  • listing results
    🩸 what is an exchange apartment?
    😕😖 user will be confused and frustrated with the amount of new words
    🩹 small hover tooltips on potentially complicating words ⭐
    🩹 a message inviting visitors to the help section ⭐
  • apartment conditions
    🩸 what is a cold rent?
    🩹 small hover tooltips on potentially complicating words ⭐
    🩹 a message inviting visitors to the help section ⭐
  • renting and further
    🩸 what is this document I need? how many rents I have to pay? how can I trust the landlord? what do I need from them?
    😨😱😲 users might feel fear, or simply overwhelmed, as they learn about the challenges they are up against
    🩹 Clear and thorough FAQ about the subject ⭐

Wireframing

Done in Miro.


Freelancing – Conferences

Complete Product Design and Development

Intro

Since 2020 I’ve been working as a freelancer, and my biggest projects were two IEEE backed scientific conferences that needed to go virtual. There was still no ideal solution at the time that matched the specific needs of scientific conferences. Mainly because authors need to present their papers, which is difficult to achieve in global online event due to the different time-zones. Participants are used to visit a new country in order to attend the event so they would be fully available and in the same time-zone. Here this is not the case and brought out some challenges that the video-conferencing solutions were not solving yet.

These were then held online and I designed and developed the whole platform for each, how it integrated with external services (like registration, video and document uploads, video hosting and video-conferencing) and helped the organizers in adapting the event to an online format as this was a fairly new affair. I also handled all event related e-mail communications to the users to maintain consistency and even handled the certificates.

both Conferences’ Logos

Key Points

  • CSNDSP2020 spanned over 3 days, over 200 presented papers, 85 virtual sessions and over 3100 comments in online scientific discussion.
  • Accomplished collaboration between over 200 active participants from several countries including Canada, Brazil, Belgium and China, by creating an adaptive UI and using simple but meaningful copy.
  • Introduced the concept of asynchronous 2 hours long discussion to a group used to 15 minute quick presentation sessions by ensuring a clear onboarding path and testing with a sample of users.
  • Guaranteed a consistent and valid UX across different third-party services and digital onboarding by studying user-cases, testing pain points and providing clear information.

About the Project

Client

Local Organizing Committee of CSNDSP2020 (Aveiro, Portugal) and later CONFTELE2021(Leiria, Portugal)

Request

To replace the physical venue for the upcoming science conference, by developing and implementing a virtual one that makes use of the advantages of the online space whilst maintaining the conviviality of the prior.

Process

Issues that were found

  1. This is a live event and many users will be in distant time-zones.
    • predictably from Brazil to China
  2. Some users might get confused or frustrated with converting time-zones
    • one pre-event meeting had some participants join an hour late
  3. Authors with papers to present need to participate in a Q&A.
    • it is a requirement from IEEE
  4. Many professors and researchers will be expecting a conference with a strict schedule.
  5. As participants are not in the vicinity of the conference, there is a concern of low participant numbers in sessions.
  6. LOC wants a place where participants can “visit the city”(Porto), relax and network.
  7. A digital event lacks the feeling of community that is created when several people with shared interests come together under the same roof.
csndsp2020 site map

Actionable Conclusions

  1. The event sessions and schedule need to happen in a small time-frame or asynchronously in order for all participants to have a fair opportunity to participate.
  2. The platform needs to adapt to each visitor’s time-zone.
  3. Q&A needs to happen asynchronously in order for the schedule to accommodate the most relevant sessions.
  4. The UI/UX copy needs to be clear and pro-active so that participants learn how the unusual (asynchronous ) sessions work in a timely manner.
  5. The event schedule and platform need to have a method to engage the participants so they stay from one session to the next.
  6. The platform needs a dedicated space to divulge the city with promotional videos, that allows participants to converse freely with each other.
  7. The platform needs to display all participants in a way that users feel they are not alone with impersonal, scientific content.

Resolutions

  1. The most relevant sessions will happen live via video-conferencing. The technical sessions (where papers are presented and authors do the Q&A) will be held asynchronously on paper dedicated pages. These will have a pre-recorded and pre-approved presentation video from the author, and a space for Q&A.
  2. A small module was programmed to change all time and date displays in accordance with the browser’s time and it a label was included to indicate the detected time-zone.
  3. Instead of a live Q&A, a 2 hour interval was established, where authors have to reply to any queries about their papers.
  4. Information was placed in strategic places.
    1. A label was placed in each papers’ page stating the paper is not yet available, in the least amount of words possible and explaining the user how they will be available to access this content.
      label stating "The paper will be accessible once the session has started"
    2. The FAQ was made clear and concise about the types of sessions and how to participate in them.
    3. The welcoming e-mail had a small phrase preparing all participants to adapt to a virtual venue.
  5. The asynchronous sessions will also have a specific starting time, promoting that participants log in several times throughout the event and not only in a short period. As the papers are grouped in Technical Sessions, all papers of the same session are to have their contents made available at the beginning of the session, and remain so after that. Up until that time, only abstract, title, authors and keywords will be available.
  6. A Lounge page was created for participants to discuss freely with other users through an online forum, with videos about the city of Porto. Some members of the LOC and staff would promote this space in between sessions.
  7. A User Directory page was created where everybody was listed with a name and photo.
    1. Each user also had their participation in the event listed, whether it was as an author, speaker or moderator, as well as their contacts if they so wished.
    2. At the top of the page there was the world map with countries highlighted where there was a user.
Screenshot of the user directory page
screenshot of a user profile card with photo and information
world map where romania is highlihgted and three names are showing

Main takeaways

The biggest challenge was in adapting the event format for an online venue. In typical science conferences papers are presented in 10-15mins combined in sessions of 5-8 papers back to back and many professionals could not validate fully asynchronous discussion. This is impractical in an online event as we had participants from different time-zones who’d normally travel to the conference’s location.

It was a very engaging project because I had to ensure everything from video submission, validation, hosting etc. to e-mail communications. Very rewarding and I’d love to do it again. However the tech giants have controlled this market so my services are no longer optimized to this niche. Even still, I would love to continue this type of project as many ideas came forward.

Feedback

Sérgio Faria, PhD – IT Leiria

conftele2021.ipleiria.pt

“We’re very satisfied with Vítor’s service in providing not only a complete platform to host our conference, but also in collaborating on several aspects of administrative processes and graphical design.”

Luís Nero, PhD – IT Aveiro

https://csndsp2020.av.it.pt/

“Vitor was very flexible with every request and was able to deploy a complete platform on a very short notice.
This allowed for a very successful transition of the conference to a virtual venue and I think I can say that all participants were very satisfied with the experience.”

Screenshots

Logo Banner for CSNDSP202
Front Page CSNDSP2020
Program Page CSNDSP2020
Logo Banner CONFTELE2021
Front Page CONFETLE2021
Program Page CONFETLE2021

Watgrid Solutions

Branding Consistency and Web App Improvements

Intro

I worked as a UI/UX Designer with Watgrid Solutions, a company that started with water monitoring and entered the wine industry with a new product, Winegrid, which consists of a SaaS with IoT connected devices for wine production monitoring. This was an amazing project and most of all, I worked with a great team, in tune with the startup environment and with strong values of collaboration. 

Pre-defined Logos

Branding Consistency

Here I did UX Design while I was doing web development on a product that was already up and running. Understandably, different people had worked on it at different times and with different styles, so the company did not have a consistent image either for product design, or for marketing and branding. My first efforts were then to establish a cleaner and simpler aesthetic, and oversee all marketing and branding artifacts for consistency.

Cover
Page

Web App UI/UX Design +Dev

After this, I could focus on studying the process of wine production and bridge the gaps between the mental model of our engineers and how the wine producers structure their process. This wasn’t easy because this industry has very strong traditional roots and competition in various aspects is key, but finally some adjustments were found to be made and the platform went through significant change while I was there.

Web-app Splash Animation

One particular contribution I was proud of was this measuring timer adjustment for IoT sensors that I designed and implemented. We wanted to give flexibility for the user to set their readings times, but at the same time there were technical and strategic limitations to be put in place. This component of UI was complex enough to deserve a modal, but still it needed to be simple as it had the potential to be a pain point. We needed the user to choose an interval and a starting time for each day, and as they were both correlated, the interface had to reflect it otherwise it would lead to deep frustration. Explaining anything in this scenario is simply too demanding so, as usually is in any interface design, the best solution lies in a direct relationship between actuator and display. To solve this, I included a slider and with a simple visualizer of daily readings I was able to come up with this intuitive, simple but effective interface that relies on affordances instead of unnecessary copy to guide the user. There was positive feedback from engineers, managers and users. Please note the “CRON definition” was an admin only feature.

Video Capture of a UI component

Web App Remake

I continued with web development and even QA as we outsourced some of our developing efforts to make a new version from scratch. Before this I designed a prototype in Adobe XD to help to dialog about new features, study the user-experience in detail and test the overall feel and branding of the web-app.

Prototype’s Page

Banco de Tempo Feira

Design Thinking and Fast Prototyping

Key Points

  • Studied UX Design, user research and Design Thinking;
  • Researched about the Sharing Economy, the Collaborative Economy, and the importance of establishing trust in these platforms;
  • Created two prototypes, one in Adobe XD, another in WordPress
  • Initial Surveys and interviews showed that participants were mostly not welcoming of a digital product and they saw the personal contact of their community the most valued aspect of it. However, all subjects attested a very positive experience with the digital product and that they would in fact make more service requests because of it.
  • Although the design of this digital product would be based on the much known e-commerce website/app structure, several features would not be compatible with this scenario.
    • Users do not need to manage their current credits as they are more eager to contribute with their own services.
    • The matching of customer and provider has to be monitored by one of the group’s moderator as they manage it’s balance and guarantee that everyone gets an equal chance to contribute.
    • Participants need to go through a personal interview to be accepted in the community.
    • There are several other communities like these that may have their own nuances of how they work so the platform would need to have a certain flexibility. The extent of this need was not thoroughly studied.
Logo

Intro

This project’s goal was to create a digital product for a time-banking community in Portugal in the context of my master’s thesis. The thesis itself contemplated the growing phenomenon of the Sharing Economy with its affiliated ideas wherein time banking revealed to be a subject with potential for technological contribution as well as social impact. UX Design and Design Thinking were also studied to frame the methodological phase. Ultimately it was a very stimulating project from a technological, design and social point of view.

The Problem

One of the biggest challenges found by this time-banking community was the fact that participants tend to offer more services than to request, therefore creating an imbalance in the credits management. Considering that one of the goals of this initiative is to strengthen it’s social fabric by allowing individuals to contribute, it becomes an issue if participants do not get a chance to do so due to lack of requests.

The Cause

Through literature, surveys and interviews, the two main reasons found that could explain what causes this problem were: the fact that there was no catalogue or list of services to chose from; but mostly the fact that participants felt shame because they saw their action of requesting for a service as asking for help or charity.

The Solution

It was then hypothesized that using the e-commerce methods ubiquitous to our current society, it would favour a more consumption frame of mind rather than a charity one in the participants towards their activity in the community. Hence a prototype was designed, implemented and tested to validate this hypothesis. It was not possible to corroborate it because there was no resources to continue the project as there had been already more work done than was account for. However we derived the conclusion that a digital product for this community was very welcomed and could bring several advantages to its functioning.

Screenshots from Prototypes

Service Request Page
Services Listing Page
Backend sample
Service Request Page
Services Listing Page
Home Page