Christina Translates

A portfolio website for an English Translator based in Tokyo to grow her client and brand

Role:
UX/UI Designer
‍
Duration:
March 2024 - April 2024‍
Designed for:
Responsive Web
‍
Responsibilities:
Client Meetings, User Research, Wire-framing, Product Design, Prototyping, User Testing, No-code Development
‍
Tools:
Figma, Figjam, Relume, chatGPT, Grammarly, Notion, Zoom, Webflow

View Live Site

Overview

Problem

Christina is a Japanese-to-English translator who lives in Tokyo, Japan, and wants a portfolio website to establish her online brand and increase clients.

Solution

A website that feels professional and personable, uniquely suited to the client’s needs and requirements.

How might we help Christina develop an online brand so that she may increase the number of clients for her business?

research

Know the competition

After listening to users, I did some competitive research and found that the most critical pieces were a strong hero, works, and a contact form.

An image of multiple sources of website information

Booking flow

All similar translator sites had a simple booking flow, while some sites also had calendars. Initially, I thought I could make a calendar, but I decided to link to an existing calendar system like Calendly or Google Calendar instead.

An image of a user task flow from point A to point B

Ideation

Gathering Ideas

Gathering all the information I had, I did the usual designer thing and started to iterate with sketches and wireframes.

Sketches

Making it magical

Christina loved watching anime as a kid and spoke about how it made her feel, specifically Sailor Moon and Card Captor Sakura, so I tried to base the concept on a magical girl. I made sure it was subtle, but the elements would still be there.

Defining the concept

I tried different variations and after multiple tries, I landed on something that we could agree on. I personally am a fan of City Pop version. Just one time!

An image of exploratory designs. This one is city pop inspired.

An image of exploratory designs. This one is professional and full of lines.

An image of exploratory designs. This one is inspired by ice cream.

An image of exploratory designs. This is inspired by super sweet magical girls.

Testing & client feedback

Making Revisions

I conducted 2 rounds of user testing and client feedback. In the end, I was faced with some challenges.

1) New Sitemap

After receiving feedback from the client, I realized that I needed to pivot a bit and revise the sitemap to better meet her needs.

An image of the new Site Map for the Christina Translates website

2) Slight pivot away from the user flow

Feedback:
‍Christina didn’t like the idea of sharing a calendar and wanted to use her e-mail only. Users also complained about filling out a complicated form.

Solution:
I made an embedded contact form and changed the labels to be Name, Email, and Message only.

An image of the new Get in Touch form for Christina Translates portfolio website

3) Changing Featured Works

Feedback:
Christina did not have that many projects she could showcase. She needed a better way to show her work without making it seem that she was lacking experience. Both testers and Christina felt that the Works section could be visually elevated.

Solution:
I changed to use thumbnails, include 3 types of work to show variety, and change the title to say Featured Works to indicate these projects are just the ones currently featured.

An image of the new Featured Works Screen compared to the previous one

4) Adding new sections

Feedback:
‍Christina and testers also felt the page was lacking in information. I realized I should have been more thorough on walking through the typical use case of the client and what was crucial information.

Solution:
I added the Services, FAQs, About Me so that potential clients can have all the relevant information they need.

An image of the About me screen for the Christina Translates portfolio website

An image of the new services screen for Christina's Portfolio website

An image of the FAQs screen for the Christina Translates website

Final Designs

Refining the Design

After overcoming some roadblocks, I put together the final product using Webflow. I did one last feedback meeting with Christina and did some final tweaking to the copy.

View Live Site

An image of the final desktop version of Christina Translates portfolio website

An image of the final desktop version of Christina Translates app

Impact

All of this leads to the following positive impacts for Christina:

An illistration of two people shaking hands

Credibility and Trust

An established brand and website instills confidence in clients by showcasing some past work and presenting herself as a professional

An illustration of a woman with multiple channels of communication

Enhanced Visibility

A well-crafted portfolio site is a professional showcase, increasing visibility and accessibility for potential clients seeking Japanese translation services

Communication

Her website now acts as a one-stop place to streamline communication and facilitate efficient client interactions

Conclusion

Results

Christina has a marketing website ready to increase her clients by establishing her brand.

Next Steps

Christina officially launched her website on September 2024. I completed hand-off and have an agreement to do a maintenance check with her after 6 months.

What I learned

✍️ Multiple User Flows is something I should have considered at the start. As there are different types of users who may visit Christina's portfolio.
‍
🗼 Different Cultural Mindset. I conducted interviews with several Japanese people and I was able to gain insight on small cultural things such as scheduling video calls are not a normal thing for initial meetings.
‍
💻 Using AI tools. I used different AI tools to speed up the process especially after pivoting to make a new sitemap and wireframes.