Bocca Bilingual equips brands to reach Spanish-speaking audiences by providing personalized, contextual translations for high quality multilingual campaigns.

Product
Responsive website
Services
UX/UI Design
UX Research
Project Background
Bocca Bilingual is a Spanish translation and bilingual marketing agency based out of Oklahoma City. It is a recent startup and is in need of a fully responsive website in order to market to new clients. The new website should provide information on services available, showcase previous work, and facilitate communication between the agency and potential clients. The client wants a website that reflects the level of professionalism and quality that clients can expect from the agency’s services.

Foundational
Research

I completed a competitive analysis in order to gain insights into the translation/bilingual marketing service landscape and performed user interviews to grasp the priorities of potential clients. Additionally, I recruited several native Spanish-speakers to interview so that I could learn more about how I might promote the value of Bocca’s services.
I wanted specifically to understand:
  • How users prefer and expect to interact with a website when looking to hire for services.
  • How native Spanish speakers feel about poor/out-of-context translations in media and messaging.
  • If the market is meeting the needs of both clients and native Spanish speakers.

Competitive Analysis

How is the market providing these services?
I identified three different groups that make up Bocca Bilingual’s competitive landscape:
AI Localization Services
Translated | Weglot | RWS
Large scale, often international, software companies working in generative AI and SAAS.
Bilingual Marketers
Alpha Co. | Caceres Consulting
Agencies and freelancers who specialize in translation and bilingual marketing with websites of their own are not easy to find, and seemingly non-existent in Oklahoma City.
Local Consultants
Club Creative | Arrow
These are consulting services.
There doesn’t seem to be any local presence at all of translation or bilingual marketing services.
Opportunity
The translation and bilingual marketing landscape is currently dominated by AI-driven software and large international companies. Very few options exist for clients who prefer a human approach and a personal relationship. An option like that appears completely non-existent on a local level in Oklahoma City for businesses and organizations looking to communicate with Spanish-speaking audiences. A professional and polished website that showcases the value of contextual translations performed by a human professional could help Bocca fill a need that is not being met by the market locally in Oklahoma City or even nationally.

User Interviews

I compiled all user feedback into an affinity map.
Here are my key findings
Allowing multiple ways to communicate is crucial
Potential clients all have different ways they prefer to make contact. If their preference isn’t available, they may move on.
Users value easy and timely communication
A quick turnaround is a priority for users when hiring a business to perform a service.
Services, previous work, and reviews
These are the top things that users want to know as they’re researching a business to perform a service.
Spanish speakers see incorrect translations everywhere
Native Spanish speakers frequently see incorrect or out-of-context translations in ads and messaging and it leaves a negative impact on credibility and brand opinion.

Persona

Understanding who I'm designing for

Define & Design

In order to define the value in and understand how I could use the website to promote Bocca’s services, I explored the local and national competitive landscape in detail and spoke to native Spanish speakers about their experiences with bilingual advertisements and messaging. This helped me better understand where the market opportunity is for Bocca and how I can use the website’s content to put the business in the best position possible to attract new clientele.

To ensure my designed solutions were aligned with the needs of users who are interested in hiring a business to perform a service, I spoke to users to learn what their priorities and contact preferences are when it comes to interacting with a business’ websites. Their responses shaped the hierarchy and entire content layout of the website.
Notes on visual direction:
  • Bocca already had a visual identity in place for me to work with.
  • Client requested a boutique aesthetic for website.
Problem Statement
Spanish-speaking audiences are frequently exposed to incorrect or out-of-context translations in advertising, media, and messaging. These language mishaps leave lasting negative perceptions of a business or organization among the Spanish-speaking audiences they’re attempting to reach.
POV
I would like to explore ways to showcase the translation and bilingual marketing services that Bocca Bilingual offers because businesses and organizations are frequently not effectively communicating with Spanish-speaking audiences.
HMW
How might we help Bocca Bilingual showcase their services so that businesses and organizations can better communicate with the Spanish-speaking audiences they are attempting to reach?

Key Screens

Mobile Wireframes

Key Screens

Desktop Wireframes

Usability Testing

Key task flows were designed into a clickable prototype
Two types of unmoderated tests were conducted: a 5-second test and a prototype usability test. Each test type included a mobile version and a desktop version. Participants were asked to complete one of the tests using either desktop or mobile designs.
5-second test participants were asked the following questions:
  • What service(s) does this website offer?
  • Did any buttons stick out to you?
  • What was your first impression of the design?
Prototype usability participants were asked to complete the following tasks:
  • Locating examples of work and previous clients
  • Locating information about services
  • Submitting the contact form
Task Completion
7/7 users were able to complete the assigned tasks. All users described the tasks as “very easy” to complete.
Positive feedback
User feedback was overall very positive in regards to design and layout. Participants described the design as “clean” and “professional” and appreciated how easy and quick it was to find what they were looking for.
Design Integration
9/11 users were able to identify the services that Bocca offers.

Only 4/11 users were able to identify buttons that stuck out to them.

Usability Testing

Iterations
Why did I make this change?
Less than half of the testers were able to identify any buttons following the 5-second test. This issue was more prominent in desktop designs where the hero contained no call to action and instead relied on the button in the top right of the nav.

Lessons Learned & Next Steps

Working with a client
This project taught me a lot about working directly with a client to develop a fully responsive website design. I was fortunate to have a client who was easy to work with and very open to sharing ideas.



My main challenge in this project was during the foundational research phase. Due to constraints in time and resources, I wasn’t able to fully seek out interview participants who have a history or future plans of procuring the types of services that Bocca offers. Instead, I decided to focus my research on better defining the value of Bocca’s business proposition and learning what users are prioritizing whenever they’re interested in hiring a business to perform a service.

Given more time I would seek out feedback from real potential Bocca clients.

Next Up

MedForm