Increasing Usability & Foot Traffic

Category:

UX Design

Client:

MSU Translation Center

Duration:

3 Months

Preview

Preview

Preview

Abstract:

MSU's Translation Center is a recently founded program that ​offer high-quality and affordable translation and interpreting services in over 20 languages across the MSU community and beyond. The Center can provide training, administer language proficiency exams, and develop workshops or classes in specialized topics in a variety of languages. So when I was brought on board my job was to ​Improve usability, appeal, and increase foot traffic.

 

The Challenge

The goal was to allow users of different backgrounds in need of translation for important documents or events to have an accessible, user friendly, and visually appealing website.

Responsive

Designing for different backgrounds

Develop

Develop a research based site that enables necessary translations

Constraints

The major limitations ultimately stripped down to do it in a reasonable amount of time with the resources I have.

Timeframe

During this project I was taking summer classes so I was challenged to work around my busy schedule

Data Knowledge

The current structure lacked user data so the need of surveying was necessary

Personal Experience

I only have a background in 2 foreign languages so designing around 20+ was something I had to work around

My Role

I was the sole user experience researcher, designer and media assistant for the translation center revamp. This meant that I had direct contact with management and took part in weekly meetings in the coordination of this project.

Defining Project Goals

Usability

Create an easy to use and accessible platform

Outdated Design

Users found the website's design unattractive and difficult to navigate.

Accessibility

Establish WCAG 2.1 standards for accessibility

Translation Expansion

Expand translation center reach with new LinkedIn page

Original Site

The Process

Key Takeaways

Key Takeaways

Key Takeaways

One obvious takeaway was lack of accessibility of a multilingual website.  This was highlighted in my managers' concerns and later echoed in initial user testing

One obvious takeaway was lack of accessibility of a multilingual website.  This was highlighted in my managers' concerns and later echoed in initial user testing

One obvious takeaway was lack of accessibility of a multilingual website.  This was highlighted in my managers' concerns and later echoed in initial user testing

Wants from Translation Center

Wants from Translation Center

Wants from Translation Center

Aesthetic

More visual appeal, make a good first impression, create a positive brand image, and to increase conversation.

Accessibility

The current site does not offer translations or any accommodations to any imparities which is especially crutial to this type of work

Review of Discipline standards

Review of Discipline standards

Review of Discipline standards

To create a design consistent with the expectations of the websites target audience, I analyzed websites associated with Michigan State University that would match the audience

Logo
Logo
Logo

Defining Deliverables

Site Map

To make sure I had included all the features they needed, I showed my clients a site map and asked for their feedback before I started designing.

Mid-Fidelity Wireframes

Based off of research and meetings with managers, i curated wireframes with the current goal in mind:

Reproducibility

Create simple layouts based off the infastructure of Wordpress

Reproducibility

Create simple layouts based off the infastructure of Wordpress

Prioritize Accessibility

Dealing with many languages this sites need to be accessible

Prioritize Accessibility

Dealing with many languages this sites need to be accessible

Ease of Use

With having many people with different backgrounds access this site it

Ease of Use

With having many people with different backgrounds access this site it

High-Fidelity Design

​A process-oriented approach to design

Accessible Web Design

To ensure access to all languages there is a setting that will translate the entire site to the preferred language. All internal sites have had proper translation and is able to reach a vast demographic.

Accessible Web Design

To ensure access to all languages there is a setting that will translate the entire site to the preferred language. All internal sites have had proper translation and is able to reach a vast demographic.

Accessible Web Design

To ensure access to all languages there is a setting that will translate the entire site to the preferred language. All internal sites have had proper translation and is able to reach a vast demographic.

UI Design

The navigation is simpler, the text is easier to read, and the contrast is improved. I have also divided the homepage into sections to make it easier for users to find the information they are looking for.

UI Design

The navigation is simpler, the text is easier to read, and the contrast is improved. I have also divided the homepage into sections to make it easier for users to find the information they are looking for.

Visual Appeal

To ensure access to all languages there is a setting that will translate the entire site to the preferred language. All internal sites have had proper translation and is able to reach a vast demographic.

Visual Appeal

To ensure access to all languages there is a setting that will translate the entire site to the preferred language. All internal sites have had proper translation and is able to reach a vast demographic.

Testing to Improve

Participants

Participants included 4 people whos second language is english and 1 linguist

Participants

Participants included 4 people whos second language is english and 1 linguist

Desktop

The desktop version of the website was tested because students will use computers at school to access it.

Desktop

The desktop version of the website was tested because students will use computers at school to access it.

Translation

Testing to make sure translations are accurate for multi-lingual ussage

Translation

Testing to make sure translations are accurate for multi-lingual ussage

Key Findings

All participants were able to compete user tasks flows

Issue 01

After reading the home page 3/5 users took a minute to find the request a translation area

Issue 02

Users were unsure where to find pricing for translation services

Issue 03

2/5 users attempted to navigate to translation request when viewing translation services

4/5 users found transparency more helpful

Made services clickable to bring you to translation requests

4/5 users found transparency more helpful

Made services clickable to bring you to translation requests

4/5 users found transparency more helpful

Made services clickable to bring you to translation requests

4/5 users were able to compete this task successfully

Made services clickable to bring your to translation requests

4/5 users were able to compete this task successfully

Made services clickable to bring your to translation requests

4/5 users were able to compete this task successfully

Made services clickable to bring your to translation requests

High-Fidelity Mockup Designs

High-Fidelity Mockup Designs

Closing Thoughts

I got to learn so much from this experience with MSU's Translation Center. I believe this has been extremely valuable as I was able to think about designing for multiple languages in mind. I would like to thank my manager Tony Grubbs for giving me so much trust in my first real experience in user designs.

Closing Thoughts

I got to learn so much from this experience with MSU's Translation Center. I believe this has been extremely valuable as I was able to think about designing for multiple languages in mind. I would like to thank my manager Tony Grubbs for giving me so much trust in my first real experience in user designs.

Closing Thoughts

I got to learn so much from this experience with MSU's Translation Center. I believe this has been extremely valuable as I was able to think about designing for multiple languages in mind. I would like to thank my manager Tony Grubbs for giving me so much trust in my first real experience in user designs.

Next Steps

As of now I am still with the MSU Translation Center so any updates or changes will go through me to implement. Also, I am in charge the the center's LinkedIn page so I ​continuously update that and expand their network to bring in users who are in need of their services.

Next Steps

As of now I am still with the MSU Translation Center so any updates or changes will go through me to implement. Also, I am in charge the the center's LinkedIn page so I ​continuously update that and expand their network to bring in users who are in need of their services.

Next Steps

As of now I am still with the MSU Translation Center so any updates or changes will go through me to implement. Also, I am in charge the the center's LinkedIn page so I ​continuously update that and expand their network to bring in users who are in need of their services.

What I learned

Think about EVERYTHING

It seemed like after every design I forgot to include something. Wether it be a certain translation or even the tiniest drop shadow. I needed to account for everything and once I stuck to a process while designing I was able to stick to design ​continuity.

Design will never be perfect

With working with such a large user base with all completely different backgrounds I was bound to have users disagree. In my testing phase I had one user who took a minute in the translation request page

Get creative!

Tony gave me the opportunity to step outside of my comfort zone, and I learned that I'm capable of more than I thought possible. With this freedom I was able to take creative risks and grow from what worked and what didn't.

Selected Case Studies

Mental Health App Gamification

Learn how Framer can optimize your site for search engines.

Read More

Spacial Design Data Visualizer

Get inspired by blogs, job openings, events and more.

Read More

Instagram Reels Content Strategy

Learn about hosting built for scale and reliability.

Read More

Award Winning Club Social Media Management

Learn how Framer can optimize your site for search engines.

Read More