Project Overview
Teach Abroad is something I created in the context of a challenge to ideate, research, and design a website built within the context of nonprofit education. In order to encourage and introduce disadvantaged students to learning opportunities abroad, I focused on combining vivid, compelling imagery with descriptive and encouraging words.
The Challenge
After generating an idea for a nonprofit educational cause, perform exploratory research on everything from competitors to target audience, then formulate a compelling design.
Ideation
Proposal
Teach Abroad is an organization looking to give lower-income high school students the chance to explore the world while teaching English at an affordable price. Through our international English programs we hope students will get to see a fuller picture of the countries they visit, through not only the sights but, more importantly, the cultures and the people.
Preliminary User Research
Target Audience
The primary intended audience is high school students fluent in English from lower income brackets. Of course, as the hope of the program is to give students who might otherwise not have the financial capability the chance to visit a foreign country, there will be a preference for participants who have never been overseas before.
Crafting a Persona
I wanted to take the time to develop a user persona to avoid any potential personal bias. I tried to put myself in the mind of the user as a high school student who may have never even considered traveling abroad before.
Web Research
In order to better grasp what went into websites with similar goals to mine online and also scout out and analyze potential competition, I looked into multiple websites that were also invested in Study Abroad programs.
Based off my research, I found, in general, that large, blocky, inconsistent font use, generic stock imagery, and an irregular color palette came off as less legitimate. In addition, an uninspired generic website name could make a website seem untrustworthy, as it made the website feel less genuine. In contrast, websites with consistent font use, a unique logo or name, and well-organized hierarchical designs seemed more authoritative and legitimate. For instance, while the majority of the visually more legitimate websites I looked through included a centrally located search bar on their front pages to look for countries or programs of interest, one less legitimate website, studyabroad.com, lacked any search function, instead only providing an overwhelming list of programs.
Comparison
Perhaps one of the worst offenders I found, Studyabroad.com, lacked a consistent font scheme, a structured design, and also used a generic stock photo on its front page. This provided a clear and stark contrast to another website I found, gooverseas.com, which provided a more professional, consistent aesthetic and demonstrated how a website could be structured to provide straightforward navigation for its users.
Developing a Narrative
Before diving into the involved process of creating a visual prototype, I wanted to create a general layout of the content I wanted to put on the site first.
Lo-Fi Prototyping
Now that I had all the content planned out, the only thing left to do was start translating it into visual form.
Creating a Wireframe
Trying to strike a balance between following certain design patterns I saw on other similar sites while also introducing my own ideas and choices, I made a wireframe that, though fairly basic, was an effective proof of concept.
Now that I had everything laid out and a fairly solid image in my head of what I wanted Teach Abroad to look like, I could finally get started on a high fidelity prototype.
Hi-Fi Prototype
Header
To me, the most important component of the header was the image. I wanted to design elements around an image that would help visually draw visitors into the site. I thought the centrally located and full-width image would also help draw users’ eyes down to the call to action statement of Why Teach Abroad? Additionally, I thought the centrally located search bar would help visitors to the site easily navigate and find locations of interest.
About / Testimonials
One issue I tried to solve here was how to split up all the information into different, distinct sections that wouldn’t overwhelm a reader. To do this, I used different font weights and underlines for each section, and also used a highly faded image in the background to split up the “Who we are” and “How our program works” sections. I also added a “Read more” button in the lower testimonial section of this page to avoid information overload.
Apply
I wanted to keep the Apply section simple and clean so users would have no confusion over finding how to join.
Programs
I wanted to come up with a way for users to easily browse through available programs without having to scroll or search. To do this, I decided to use a rotating gallery-like section of travel location cards. Whichever card was currently selected would show a Program Information section with more detailed information about the respective location and program.
Closing Thoughts
- I still have yet to user test my design, especially with students. Bringing in feedback from real students would be significant in helping determine what parts of my design work and what parts could be changed.
- Though I was happy with the final product, I feel I could have taken a more user centered approach to the design. For instance, using rounded corners instead of straight ones could appear more inviting to students, especially those with no previous experience with traveling abroad.
