l3-04.png

L3@BC

Reaching citizen scientists all around the world

l3-04.jpg
UI/UX DESIGN // COPYWRITING // SCIENCE OUTREACH
 

IMPACT HIGHLIGHTS

Role UX Design Intern

Partner L3@BC

Timeline 8 Weeks

Location Chestnut Hill, MA


The Language Learning Lab

Designing for a research lab that uses crowdsourcing methods for data

In the summer of 2016, I had the opportunity to intern as a UX Design Intern at the Language Learning Lab, located in Boston College. To study how humans learn language, the lab creates quizzes that recruit thousands of participants as well as citizen science projects in which volunteer or amateur researchers can help advance science at home.

Because his work requires the brains of many individuals with varying levels of scientific knowledge, it was crucial for his web-based laboratory—GamesWithWords.org—to appeal to diverse users.

Over the course of eight weeks, I explored how we could enhance the gamification of citizen science projects and promote science in the general public.

THE OUTCOME

After sending my design prototypes off to the lab’s developer, the new and improved Games with Words website was launched along with the new logo. It is still used to this day. The initial blog posts that I had published set a precedent for future research assistants. Even though I am no longer working in the lab, current contributors use the same categories and writing style as the standard model.

THE PROCESS

INSPIRATION 💭

On the Games with Words website, the most popular citizen science project is VerbCorner. The goal behind VerbCorner is to have amateur scientists provide linguistic judgments of abstract aspects of verb meaning. But instead of having people simply complete a boring survey, I helped incorporate elements of the gaming experience to elevate user engagement.

From reviewing the literature, I found that gamification is helpful for fostering human motivation and performance. With this knowledge in mind, I wanted to redesign the original Games with Words website into a virtual world akin to an arcade, filled with memorable color combinations and buttons.

IDEATION 💡

My first task was to redesign the Games with Words logo (below). The previous logo featured a wordmark design on top of a seemingly irrelevant image of a colorful galaxy. Although identifiable, the logo depended on its abstract slogan (“Play the game. Learn about language.”) for brand recognition. Further, the typography itself lacked both memorability and the playfulness that should be implicit in gamification.

Games with Words logo (BEFORE)

Games with Words logo (BEFORE)

Some rough sketches

Some rough sketches

Mockups done on Adobe Illustrator

Mockups done on Adobe Illustrator

I mapped out the organization itself, its core goals, as well as the groups and individuals I aimed to target. The key points I wanted to address included the following:

  • Be more recognizable — How can we get both the text and icon to work together to reinforce the brand?

  • Target curious amateur scientists — What’s something that would appeal to educated individuals with a strong love of learning?

  • Feel fun but not childish — Is there a balance between liveliness and looking immature?

Finalized Games with Words logo (AFTER)

Finalized Games with Words logo (AFTER)

Besides Games with Words, there are other existing websites, such as Zooniverse and SciStarter, on which citizen scientists can work on research projects. However, Games with Words is unique because of its focus on language learning. And so, after doing some word mapping, I chose three icons—pencil, computer mouse, and line graph—to assist with immediate recognition.

I played with the original slogan and assembled a symbol that highlighted the power of “play” and “learn.” The subtle cues of the icons prevent the logo from looking too kitschy, and I kept proportions of the pencil itself to resemble a bubble, which immediately resulted in a youthful yet sleek look.

To support the new symbol, I chose a simple sans-serif typeface to give a sense of forward-thinking and honesty. Additionally, the brown and orange color scheme ensured that the brand retained its image as a reliable and friendly organization, allowing for differentiation from potential competition.

Quick empathy mapping of core user gains and pains

Quick empathy mapping of core user gains and pains

Continuing the pursuit of gamification, I prototyped a redesign of the main Games with Words website. The original website featured a leaderboard on the front page and an active progress status, which were definitely in line with the goals of gamification (below).

Web UI of Games with Words (BEFORE)

Web UI of Games with Words (BEFORE)

However, the website was misleading because an uninformed user may think VerbCorner and Games with Words are the same, but they are not! VerbCorner is simply one of the many projects in which users can participate on the main Games with Words site. So, for my redesign, I wanted to make the user journey was as intuitive as possible such that this distinction was made clear from the beginning.

IMPLEMENTATION ☑️

After initial wireframing, I created a prototype of the newly designed website, which is still used today. The best part of my internship was having the freedom to work on diverse projects. I was the sole designer in the lab, which granted me the opportunity to explore new methods of front-facing UI and user engagement. From making sketches on paper to creating high-fidelity prototypes, I got to have a taste of the whole design process.

New landing page with original illustrations

New landing page with original illustrations

Video demo of finalized website (AFTER)

 

On the landing page, I also created my own animated GIFs on Adobe After Effects to complement the web copy regarding what Games with Words is all about. It was a must for me to include movement on the redesign because of its association with dynamism and youthful activity.

3.gif
1.gif
 

Finally, I was tasked with relaunching the blog they used to communicate with their citizen scientists and participants. Since 2007, Dr. Hartshorne used Blogger, a Google-owned blogging platform, and he was able to gain a following via a network on Field of Science.

Original Games with Words blog (BEFORE)

Original Games with Words blog (BEFORE)

 

Although the blog was doing its job of sharing information, there were severe limits to which the Language Learning Lab could interact with users (e.g., clunky UI and options for communication). For my project proposal (below), I decided to investigate various blogging platforms to see what people were using, what features were available, and, ultimately, whether Games with Words should “migrate.”

Relaunch of Games with Words blog (AFTER)

Relaunch of Games with Words blog (AFTER)

 

Copywriting samples of my blog posts can be seen below:

Special thanks to Dr. Joshua Hartshorne.