UX/UI Designer
.png)
Project Brief
ITA (International TEFL Academy) is a travel-focused education start-up that specializes in certifying international English teachers and assists them in their transition to life teaching English overseas.
ITA currently offers a wealth of eBooks and blog articles to its users but does not have a singular digital product that centralizes and organizes all of its user-facing career and relocation services in one place.
ITA's students and alumni needed a more accessible way to determine which countries they are eligible to teach in, how to find a job there, and the resources available to them.
Employer
International TEFL Academy
Timeline
2 Years: March 2020 - April 2022
Medium & Tools
Responsive Website Built on Google Sites
Graphics & Images Designed in Canva
Role
UI Designer & Copywriter
Introduction
I worked with International TEFL Academy for 5 years. For the first three years, I functioned primarily as a customer support specialist on the student services team, providing career services, travel advice, and relocation information to thousands of ITA's customers.
In my last two years at the company, I advocated for our team to design and build a new website for our customers, taking on the role of UI designer, copywriter, and assistant project manager.
Our goal was to create a comprehensive, empowering, and inclusive website to better serve our 40,000+ students and alumni.
Over the course of two years, we designed and created a responsive website on the Google Sites platform. Our hard work resulted in a comprehensive and delightful career and relocation services website for ITA customers to use and enjoy.
The Problem
As customer support specialists, our team had years of collective user research data, having spoken to our users directly on a daily basis. We'd listened to their pain points, worked to resolve their problems, and created many products large and small for them during our time at the company.
Currently, ITA users who are actively job-searching and relocating abroad are either directed to read a 400+ page PDF file, or they have to sift through thousands of blog posts and articles on ITA's main website in order to find the information they need to be successful.
From our extensive experience talking directly to our users, we knew that there were a few common user pain points that the majority of our users had when it came to our career service offerings:
-
Users feel overwhelmed by the amount of information available to them in the 400+ page eBook and on ITA's main website
-
Users aren't able to easily find answers to specific questions related to their individual needs
-
Users aren't sure where to start the process of transitioning their life abroad to teach English in another country
As such, our team saw the need to replace this eBook and consolidate those blog posts with a comprehensive digital product, determining that a website would be the best platform for this information.
Research
With a wealth of user research already collected and primary user needs identified, we focused the initial project research on ITA's competitors and their websites' features
To get an idea of the types of user experiences that our competition provided their users, I, along with my fellow interface designer, completed a competitive analysis of several websites, including GlobalU and Teaching Nomad.
I focused my research primarily on how our competitors used specific design tools and elements to present information to their users. I examined how they packaged large amounts of information in a way that was more digestible and accessible to their users.
I discovered that several of our competitors used icons as signifiers and guiding markers throughout their content, keeping text as brief and succinct as possible and guiding users through their resources with images and icons. We decided to incorporate icons as a secondary form of navigation in our new website.
Example of GlobalU's use of icons, inspiration for our product's UI
Developing a Persona
Like many fields, there is a lack of diversity and inclusion in the field of international education, and we wanted to make inclusion a top priority in the development of this new website.
While ITA's primary user is an American citizen who speaks English natively, is typically caucasian between the ages of 21-30, and holds a bachelor's degree, ITA has several other secondary user groups.
Most of ITA's current product offerings are marketed and created for its primary demographic. In the interest of making space in the industry for a more diverse group of English teachers, we chose to create a user persona who fell into one of ITA's minority user groups.
We wanted to take this opportunity to create a product with new content and a fresh perspective to provide a more inclusive voice to our users.
As such, we created Ada. Her demographic information defines what kinds of resources and information Ada needs to be a successful English teacher abroad.
By keeping Ada's story in mind over the course of this project, our goal was to make sure we were being more inclusive to more of our users outside of the primary user base.
Content Style Guide
One of the key pieces of this new website was updating the content of the 400-page eBook and creating new content for users.
We knew that the eBook, though extensive, ITA's current content doesn't provide users with enough detailed information, and doesn't have a consistent tone or voice. It had been written by multiple authors over several years, without the guidance of a copy standard.
As such, before we began writing any new copy, the team generated a copy guide, complete with guidelines for tone and voice.
Keeping our goal of inclusivity in mind and our desire to keep in line with ITA's family-oriented company culture, we decided to speak to our users directly, in a personable, friendly, succinct tone.
Copywriting
Though I worked primarily as a UI designer on this project, I also put my writing skills to use, serving as the lead copywriter for several sections of the website.
I researched and wrote new content - writing blog articles and microcopy (including the section shown here), and functioning as a copy editor for the content of other writers.
Design Style Guide
In collaboration with the other UI designer, I created a design style guide for the website. This resource guided each design decision we made over the two-year project, and maintained design continuity throughout the site.
We tested and selected a color palette, typography, CTA designs, and the style of photographs and images we wished to incorporate into our final product. We presented this guide to key stakeholders in the project for approval prior to implementation.
View the full project design style guide here
We selected inspiring and empowering hero images to generate an atmosphere of wonder and excitement for our users.
We also incorporated as many customer-provided photos as possible into the body of each page of the site, showcasing the diverse group of customers ITA has, with the hopes of providing a more inclusive and empowering experience to our users.
The Final Product
Unfortunately, due to budget cuts and other unforeseen delays, our team wasn't able to complete this project and launch the new website before I completed my time with the company.
While the copywriting for the new website is still in progress, and updates need to be made to the homepage, I finalized the primary navigation, subpage layouts, hero images, and written copy for many pages of the site. Once a few more things have been finalized, the site will be ready for launch.
The results of our work are an inspiring, user-focused, responsive website that is full of rich, tailored content. ITA's users will be able to experience the website on their mobile devices and computers.
Next Steps
Due to the previously mentioned budgeting issues, ITA hasn't yet been able to bring this project to completion, but they hope to launch the site in early 2023.
Though I won't be able to work with ITA on the final iterations of the initial website design, these are my recommendations for the next phase of the project:
-
Conduct usability testing of the website on both mobile and desktop with users across several of ITA's user groups
-
Complete updates to the website's homepage including:
-
Create CTA buttons for key sections of the site
-
Create a user onboarding video to walk new users through the features of the website
-
Complete build-out of an interactive world map with a hover function that shows facts for each of the 70+ countries, which can be filtered by teaching qualifications and other identified user needs.
-
Complete updates to the breadcrumb subpage menu
-
Conclusions
Some of your most beautiful designs won't make the final cut because they're simply too complicated to build
There were several decisions I had to make in favor of usability and scope based on the limitations of the platform we were using, rather than on what was the most aesthetically pleasing design.
Some of the more elegant UI had to be sacrificed in order for the product to ultimately be more usable, and in order to get a minimal viable product launched within a reasonable timeframe.
Always use project management tools and define team roles prior to launching a project
Before we started the project, we failed to determine each team member's role on the project, or set specific deadlines for project deliverables. The more we started to work on the project, the more features each team member wanted to add. Because we had not defined a project manager, a system for making key decisions, or a scope of work, the project deadline continued to shift further and further into the future.
Finalize your problem statement, complete a feature prioritization session, and get sign-off from the entire team for the scope of work before diving into the project
Initially, our team had planned to design, create, and launch this website in 6 months. Two years later, final touches are still being implemented prior to launch.
The main reason that our team missed this initial project deadline was that we continuously shifted the scope of the project as we worked on it. Though our talented team of designers and copywriters had so many good ideas and produced so much great content for our users, we failed to complete the project within the planned deadline.
We had a lot of difficult conversations that didn't always end in a defined solution, and there were some days when morale was low. I believe that had we defined the scope of work for the initial phase of the project at the beginning, we would've been able to create a minimal viable product within our planned deadline.
That being said, having the creativity and freedom to create the content that we really believed would be the best for our users allowed us to generate a much more comprehensive website than we had initially planned.
Once ITA is able to fund the completion of the project, I have no doubt that this will be a successful, essential product for their customers for years to come.