Proyectarse
Website development of an emotional consulting startup.
Overview
"Proyectarse" is a Chilean emotional consulting startup with a mission to foster well-being and cultivate a harmonious work and learning environment for companies, schools, and families. They strive to empower organizations and individuals by providing expert guidance in emotional intelligence and communication, promoting positive growth and development.
The challenge is that until now consulting company has been offering its services to a limited number of small businesses through their existing network. However, to broaden their horizons and reach a wider audience, they recognize the necessity of establishing an online presence by creating a website.
I would like to know about the primary motivations behind people hiring these services and their specific expectations. Additionally, I am interested in understanding the expectations concerning the website of the emotional consulting company. Furthermore, I would like to identify any challenges or pain points they might have had when hiring similar services in the past.
A responsive website that help users to get to know this consultant and let them schedule an appointment to talk to the professionals.
UX and UI designer
Time
4 weeks - September 2023
Tasks
Research, user & tasks flows, wireframes, prototype, test.
Background
Goals
Solution
Role
Empathize
Problem: It was confusing to have two buttons of “booking a free consultation. The users thought that they were meant to be different things.
Design Thinking Process
Define
O1
01 EMPATHIZE
03 IDEATE
Research Objectives
“Once I decided to hire the service, I visited the website to understand better the services they offered, and contacted them by sending a message through the web.” - Raúl
Ideate
O2
Prototype
O3
Test
O4
Before I started the research I determined a plan to be clear about the proper steps to get the information needed. The first I needed to do was to talk with the client, get to know about their business, their expectations in this website and the information they want to include. After that, make a competitive analysis and see how the direct competitors have organized and built their websites. Finally, to get a better understanding of the user, I decided to do interviews to 5 participants that have already hired similar services to get to know their expectations with consulting websites.
O5
User Flows
After talking with the client and get to know their expectations about the website and the information they wanted to include, I proceeded to do the competitive analysis with other websites that offered consulting emotional services and that the client had them as references.
What I analyzed the most was; they all have clients quotes about their experience using the services. Also, they gave a lot of relevance to the section of About Us, even some of them had the explanation in the home page. Finally, just one of them included a button to get the quote of the service. For the rest, the user needs to contact them through email and then get an idea of the cost of the service.
After being clear about the features that were going to be added to the website, I developed a Site map to organize all the features that need to be there. I started with the 5 features that are going to be in the main navigation menu and all then the information inside those tabs.
Explore the website and get to know the services that the consulting offers.
Go to the section “About Us” and get to know the professionals.
Book an online free consultation.
Competitive Analysis
Based on the POV/HMW statements, I created a feature roadmap to prioritized the features that are going to be added to the app. I divided them into “Must have”, “Nice to have”, “Surprising and delightful” and “Can come later”. To develop my MVP I will move on with the “Must have” and some on the “Nice to have”, and then, depending on more research if I add more features.
Site Map
I created 3 User Flows to be clear about the user’s journey within the new website. The 3 flows are the following:
04 DESIGN
05 PROTOTYPE
Prototype
Iterate
Mid Fi Wireframes
After sketching out in paper the low wireframes with the 3 tasks the user needed to perform, I did the mid Fi wireframes on Figma for the desktop version and the mobile version.
In this stage I came back to the client to ask them about the information they wanted to put in every section. Also I asked them for the photos of the team and for the Logo.
Style Tile and UI Components
To start designing the UI Kit, I asked the client about the colors of brand, the key brand words and the Logo. With that in hand I started choosing the font and typeface for both, the desktop and the mobile version.
Then, I continued choosing the color palette. I wanted something similar to the colors of the Logo but more vibrant and engaging. After that, I chose the illustrations, I created the buttons and started making the components.
High Fi Wireframes
WIth the Style Tile and UI components ready, it was quite fast to design the High Fi wireframes.
With the High Fi Wireframes ready, I created the prototype on Figma to be ready to test. It has one starting point an the user could do the three tasks in the order that he/she prefers.
06 TEST
Testing
I conducted usability testing with the same five individuals who had previously been interviewed, as they had prior experience with this service. The testing took place via Zoom, allowing me to observe their interactions with the website.
I requested them to accomplish the following tasks:
Explore the website and get to know the services that the consulting offers.
Go to the section of the team and get to not the professionals.
Book a free consultation.
All of the tasks were completed in their 100%, but there were lots of different comments in the first and in the third task. To organize the findings I did an affinity map dividen into different categories according to the different pages of the pages. I wrote the successes (in purple) and concerns (in green) of each. After that, I made a prioritization matrix to define the iterations that I needed to do.
Affinity Map
Findings Affinity Map
All of the participants were able to complete the tasks and they found the website friendly, clean and easy to navigate. The content was clear and the photos and illustration were also good for them. Anyway there were some pain points:
In the landing page: The dropdown button was distracting and not friendly. To have both CTA’s in the Hero section is confusing because some users think they mean different things.
Book a free consultation feature: Is not clear that the consultation is online. In the confirmation page there is something missing that reminds the user about the day and time. The buttons to move back and forward are not seen immediately.
Prior to proceeding with iterations, I opted to create a matrix that prioritizes changes based on their potential impact on users, considering the effort required for implementation.
Based on the usability testing and its findings, I did 5 iterations to improve the product.
Problem: For the user, it was tedious to scroll all the way up to book a free consultation.
Problem: For the user, it was not clear that the free consultation was online.
Problem: The user said it was important to add the name of the organization that was requesting the service.
Problem: The user suggested that it was important that in this page appears all of the details of the appointment because the person might forget.
User Interviews
After studying the market, I had 5 one-on-one interviews, each one lasting around 40 minutes. Then, I organized the most relevant information in an affinity map. The questions of the interviews tried to uncover these following information:
Understand what are the main reasons to hire these consulting services.
Understand the users journey when hiring a consulting service.
Learn about the experience that the users have had in the past when hiring similar services. The pain points and gains when hiring the service.
After conducting interviews and creating an affinity map, I focused on identifying the insights related to the users needs and the things they prioritized in the moment that they were thinking in hiring a consulting emotional service.
Key Research Insights
“I hired the service because I trusted in the relators. I trusted in their capacities and in their communication skills.” - Juan
Users want to believe in the skills of the people providing the service. This means it´s important to show the professionals qualifications and make sure they communicate openly, so users can feel they can trust.
Users value in this kind of services that they could be customizable depending on each one
Users prioritize easy access to contact information, indicating that a clear and prominent display of contact details is essential for user engagement and inquiries.
“I liked that they were flexible in discussing the plan, according to our needs. “ - Tere
Users prioritize easy access to contact information, indicating that a clear and prominent display of contact details is essential for user engagement and inquiries.
“When I look for this kind of services, I expect to see in the website experiences of other people that have hired the same service.” - Berna
02 DEFINE
User Persona
Based on the research findings, I created 3 different User Personas. The first one represents a user that hires the consulting service for a school she/he is working on. The second one represents a person that hires the service for his/her company. The third one represent a person that hires the service for his/her family.
POV/HMW questions
To be clear about the user’s needs and before thinking in the solution, I came up with the most important POV statements and HMW questions according to my User Persona.
Users needs assurance in the competence of service providers to establish a sense of trustworthiness.
Users appreciate the flexibility of customizable services that cater to individual needs.
Easy access to contact information is a user priority, emphasizing the importance of displaying contact details to facilitate engagement and user´s inquiries.
Sharing success stories contributes to building trust and credibility, enabling potential users to establish a stronger sense of trust.
Feature Roadmap
POV statements
How might we effectively showcase the expertise and qualifications of service providers to build user trust?
How might we create a service structure that allows for customization based on individual needs?
How might we optimize the presentation of contact information to ensure seamless and effortless user access?
How might we effectively leverage and present success stories to enhance user trust and credibility?
HMW questions
Final Product
Conclusions
I'm really happy with how the UX project turned out. Working with a real client was a big deal for me, and even though it was tough at first, it ended up going really well. The client trusted me, and seeing them happy with the results was awesome. Good communication was key, making sure we were on the same page with their business goals and brand values.
One important thing that helped a lot was testing the product with people who had already tried emotional consultations before. Getting their feedback was super helpful and made the user experience even better. The testing process was crucial because it not only met the users' expectations but went beyond, making sure the product works well in the real world.
Looking back, this project taught me a lot about working with clients and users, and it sets a solid foundation for future projects in the UX design field.
Next steps are to work with a developer and develop this website. After that, do another round of testing and iterations. In a long term basis, and depending in more research add the “can come later” or “surprising and delightful” features.
Project Takeaways
Next Steps
Iteration: The CTA button was eliminated from the main navigation bar.
Iteration: A CTA button was added at the end of every page that offers the consulting services.
Iteration: A video call icon was added to the confirmation page. Also a sentence that specifies that the call is online.
Iteration: A field with the name of the organization was added for the client to fill it up.
Iteration: The details of the appointment were added to the confirmation page.
After one round of iteration I got to the prototype of the final product in Figma. Please click and enjoy it.