Connect

Rebecca Anderson

Acknowledgements

Andrea Alessandrini

Chris Lim

Ewan Steel

Hollie Moir

Kymo Misenica Kobayashi

Thank you to the community for sharing your

opinions, articles and videos. Without your

assistance I would not have been able to

gain the insights that founded Connect.

Contents

Research

Discovering the communities and current issues.

Using this key research to formulate the insights

that would become key to defining the project.

Develop

Using my research and concepts to develop

Connect. The many changes and iterations of

Connect through wireframes as the project is

gradually refined.

Deliver

The final rendition of Connect in the form the final

deliverables. A final reflection of the project

concludes the year long journey.

Personal Connection

The inspiration for Project Connect came when I was brain

storming communication. Thinking about non-verbal

communication I remembered an experience I’d had while

working. I work as a part time retail worker and one night I

was serving a customer who cannot hear. We struggled to

communicate, leading to the transaction being rather

awkward. I found myself thinking, is there something I could

design that could resolve this issue and make this kind of

scenario a thing of the past? And so Connect was founded.

Introduction to Connect

Recently online video sites such as YouTube have become more

viewed then then television programs. This is thought to be in

part because these sites offer videos from across the globe, many

of which cannot be viewed in your television. However when

watching a video in a foreign language while also watching the

subtitles things such as the emotions within the video can be lost

in translation. This can lead to viewers misinterpreting videos and

not have the experience the videos creator intended.

Currently the only way for a video creator to add personality to

subtitles to make their own custom ones, using additional

software. Connect aims to create a method to allow video

creators to edit subtitles without having to use additional

programs.

This booklet summarises my projects design process. The book is

split in to three segments: Discover, Develop and Deliver. Each

chapter discusses the process of Connect, from the start to the

final product.

Discover

Designing my Brief

I began the year with three very different concepts. The first two

revolved around games design. In contrast the third concept was

communication design. After further exploration with mind

mapping and research I came up with three initial briefs.

Pure

Pure was a brief focusing on the interactivity within a game. The

aim of the project was to create a more interactive form of

gameplay to create a more immersive experience for the player.

Between Realities

Between Realities was a brief focusing on the Virtual Reality

hardware, specifically when readjusting to reality after playing

with VR. A common complaint when using VR is that it is very

disorientating when taking off the headset after playing. Between

Realities would gradually reintroduce the real world to the gamer

prior to them removing the headset so they can readjust slowly

and avoid disorientation.

Connect

Connect was a communication brief aimed at the communication

of people who use sign language and people who may not know

sign language. The aim of Connect was to create something that

would ease the communication and prevent issues in

communication in situations where a translator may not be

present.

As I continued my research I found myself drawn to Connect and I

decided to pursue it as my project. I chose it as Connects brief

made me feel excited due the hidden potential I could unearth

during the year. I continued to develop the brief, though the name

Connect remained. With my project focusing on connecting

people I thought it was appropriate. A simple let powerful name.

Now with a solid brief I began to immerse myself in the topic. I

looked to gain a greater insight to the deaf community, to

solutions currently available and what the opinions were on these

solutions. With Connect being a communication focused project,

people and technology are key focus’ so were important factors in

my research.

Understanding the community

When I first started my research I took a broad approach,

looking into various areas of the deaf community, from

statistics to children’s toys. I wanted to gain a good idea of

the community as a whole before I focused on particular

areas.

*There are thought to be at least 48,000 people in the UK

alone who use sign language, however that statistic is

thought to be a gross underestimate. I found this fact rather

surprising. It raised the question of why? Why is it

unknown? What factors lead to this notion? I was keen to

find the answers to these questions as Connect may be able

to help resolve some of them.

My early research was mainly focused on people. As

Connect is a communication focused project, people were

the core element. The end product had to suit its intended

users, so gaining insights to the community was vital.

Understanding the Issues

During my research I found and gained insight to issues

surrounding the deaf/ hearing communities.

“it seems like the only way a Deaf person can be taken seriously

is if we convert our words t spoken form.”

There is a strong indication that it is spoken word or nothing.

Despite the many communication methods deaf people use to

communicate there is an opinion that it is spoken word or

nothing. Not only that but it has to be perfect speech, many deaf

people feel uncomfortable speaking as they have a “deaf accent.”

“From living in a society that constantly demands observation and

improvisation of us, we have learned to communicate in countless

ways.”

“Why does everything in our society have to cater to you?”

This quote stood out to me. The idea that there isn’t away for

communication that satisfies both communities, Reading this I

decided to create a communication tool that would satisfy both

deaf and hearing people.

Current Solutions

“From living in a society that constantly demands

observation and improvisation of us, we have

learned how to communicate in countless ways.”

During my research I came across a variety of ways

deaf people use to communicate. Many will write

down or use their mobile phones to show tell their

friends/family what they are saying.

I also came across SignAloud. SignAloud are a pair

of gloves that translates sign language into speech

as the user signs. The gloves use motion sensors

and Bluetooth to read and translate the signs. The

gloves were created by University of Washington

students Thomas Pryor and Navid Azodi, who won a

$10,000 Lemelson – MIT Student Prize.

SignAloud

Many people use devices such as mobile phones

to communicate.

Opinions on current solutions

Researching the opinions the hearing and deaf communities had

on current solutions was very interesting.

Talking to people who can hear the general consensus on

SignAloud was it was a great idea. By wearing gloves it will make

it easier for people with sign language to communicate to people

who don’t know sign language.

However the deaf community was a different story. The majority

were against it. The idea of having to wear gloves in order to

“talk” was seen as branding them. It is seen as insulting.

“Deaf people should not have to wear gloves to make their words

and presentation palatable to hearing people.”

Having seen both sides I couldn’t help but agree with the deaf

community. While I can see the benefits of something like

SignAloud, the idea of having to wear gloves to speak is not

appealing. Seeing this I made a decision to make Connect a

digital application, something more inconspicuous.

Gurus Day

Gurus Day was a day event in which previous

students who were now successful designers in the

industry came to see our project cases and discuss

our projects with us. I gained a lot of feedback on

this day I would later use in the project.

- One of the gurus showed me a blog his friend’s

blog. His friend had illustrated a variety of signs

and letters to represent emotions. The guru

suggested that I should look into colour and pattern

and perhaps add them to the translation.

- One of the gurus suggested creating the illusion

of a working prototype by using a motion sensing

device such as Leap motion.

Insights

* “Deaf people should not have to wear gloves to make their

words and presentation palatable to hearing people.”

There is no desire for a product that is obvious or requires

one person to wear something in order to be understood

when they communicate. Discreet design will be the best

path forward.

* “Why does everything in our society have to cater to you?”

The solutions currently available appear only to help one

side of the communication. This is part due to one

community preferring oral communication and the other

side feeling their methods of communication are not

considered. Therefore consideration should be and must be

considered for both sides in Connects development.

Key Reflections from Discover

Discover was a very interesting area. It was incredible

finding this community that I’ve never designed for and

seeing all the articles and posts they share.

I read some really incredible stories during Discover which

will influence Connect as I enter the Development stage.

Amongst these stories was the announcement of a film

about the Halifax school for the Deaf and their experience

during and after the Halifax Explosion, which got me

thinking about certain situations in which an application like

Connect could prove invaluable. Or the delight of a little girl

when Santa used sign language to ask what she wanted for

Christmas after her mother explained she couldn’t hear.

Currently I have some great ideas gained from my research

that I hope to take forward into development.

Develop

Starting Point

When I entered the develop stage of Connect I

intended to create an application that would

translate spoken word into sign language and vice

versa. This application would ease the

communication difficulties in a method that would

benefit both communities.

From my research I gleamed an application would

be the most appropriate approach. There are a

variety of portable devices that could operate this

kind of application, many of which are

inconspicuous.

Design Focus

To create an application that translates sign

language into spoken word and vice versa.

Initial 112 words

For many in the world talking through speech is taken for

granted as a means of communication. However for those

who cannot hear sign language can be a primary means of

communication but not many people know sign language

and as a result communication can be difficult. Translators

can aid this but there are certain occasions in which people

may not want an extra person present.

Connect will be an application that will assist both of those

who can hear and those who are deaf to communicate

effectively without requiring a translator to be present.

In addition Connect will help those who can hear learn sign

language as they use the application.

Early Development

One of the first things I did in Connects

development was create flowcharts. As I had two

ideas for the direction of Connect, both of which

had different functions. I was keen to get a

flowchart made for each idea so I had a clear visual

of the ideas and their potential interactions.

Creating the flowcharts was very helpful, outlining

the interactions I would need to consider moving

forward with the design.

Having this information came in very useful when

drawing up some initial concept images for

Connect. It gave me an idea of the things the

application would need. However it appears my

tendency to do too much detail lead me to draw

detailed concepts rather than wire frames. I took

note of this so I didn’t make the same mistake

further in development,

Changing Point

During early development I discovered my original

intention for Connect was in the process of being

prototyped.

Undeterred I quickly came up with a new goal. I

know the technology exists so I will create a digital

tool to create an addition to this technology that

allows people to add emotion to text such as video

subtitles.

New Design Challenge

An addition to existing technology that allows

emotions to be conveyed in the translation

subtitles.

New 123 Words

For many in the world talking through speech is taken for

granted as a means of communication. However for those

who cannot hear sign language can be a primary means of

communication but not many people know sign language

and as a result communication can be difficult. Translators

can aid this and there are now a variety of applications that

can translate conversations live time. However these

applications do not communicate the emotions being

expressed, something that is crucial in communication.

Connect will be addition to existing technology and will add

emotion to messages so the people communicating can add

a personal touch to their messages. By doing this the

messages will better convey the words being communicated

and enhance the users experience.

Beginning to Build

Connect has always been a visual based and wanting to make the

project the best it can be I chose to use prototyping software over

coding. Having used both in past projects I knew this was the

better option for Connect. At first I was unsure if this would be

possible, however when Connect became a plugin I knew exactly

which software would be best suited the prototype.

Hand drawn

Before and in-between digital prototypes I hand drew wire

frames. I chose to hand draw as I feel I gain more from drawing a

new wire frame then rapidly generating digital prototypes.

Adobe Illustrator

Illustrator was a key software for development. Before I can make

the prototype functional I need artboards. The software supplies

a variety of options for creating detailed artboards, which is

crucial for making a successful prototype.

Adobe InVision

This is a software I have used before to create an application,

though this is the first time I’m using it to create a mock website.

This software uses artboards, (which I have created using

Illustrator.) and allows the designer to make a functional

prototype by adding active spots to the artboards. This software

is perfect for a prototype that is highly visual.

Mark 1 Prototype

The mark 1 prototype was a hand drawn wire

frame. The wireframe showed Connect as a social

site where people could share a variety of media. In

addition if the user wished, they could edit their

media prior to uploading, adding text and altering

the text to match the emotion they wish to show.

The site was based on popular sites that currently

exist as Connect is an addition. It works with

currently existing technology. I also chose to allow

the editing of a variety of media as I felt it was

better to offer a choice rather than enforce one

media.

I chose to have prototype 1 paper based as at the

time I did not feel it was time to digitalize. There

was still much to be gained from hand drawn

wireframes.

From website to Plugin

One of Connects biggest changes was the decision to

change the project from website/editor into a plugin.

The decision was made after I was debating my next steps

as I progressed towards my second prototype. During a

break I decided to check one of my social media sites and I

needed to use a plugin while on the site. That was when it

dawned on me. I know the technology exists so why am I

creating an editor when I could be creating a plugin?

Plugins work with a variety of technology, adding something

different, which is what Connect will do.

And so in the middle of March I chose to change my project

from editor to plugin. It was a bold decision given my time

constraints but one I felt was best for the project.

Initial Plugin

Plugins work in tandem with the technology they are

created for, so when I created the initial plugin I knew the

best way to prototype it would be to show it being used

through the type of site it would be designed for. Having

decided on creating a plugin the next decision I made prior

to drawing up an initial wireframe was to focus on video

technology. As a result the initial wireframe had influences

from current video sharing sites. If the prototype is to be

believable it needs to look believable. The initial wireframe

displays the path the video creators take in order to alter

the subtitles.

While the interactions after selecting to upload a video are

sleek I could not help but think the homepage did not. It felt

like there were interactions that were unnecessary and did

not add to the plugin. Further wire frames would be needed

before I started digitalizing.

Development of Plugin

As I continued to refine Connect I made a two small but

necessary changes.

* The homepage has been completely redesigned. The side

bar has been removed. Instead the key areas the user would

need are available in the top right corner. This allows for a

more contemporary style and a less complicated path to

upload videos, something that would be appealing.

* A loading screen and an after a video is uploaded page

have been added to the interactions. Adding these two extra

art boards will create a more believable prototype as it

completes the journey the user takes to upload a video.

Furthermore a user may wish to upload more than video. To

demonstrate this the prototype will have the ability to loop,

a user testing Connect can click upload to go through the

prototype’s interactions as many times as they wish to.

Mark 2 Prototype

Prototype 2 was my first digital model for Connect. The

journey followed the steps of wireframe #4, taking the user

through the journey from the homepage, to changing the

typography and back to the homepage, having “uploaded” a

video.

* I was reminded to not lose focus on the main focus of

Connect: the ability to change the subtitles typography.

While the prototype does have the ability to change the

typography it is merely place holding typography. Further

development needs to be done.

* It was suggested during the Mark 2 presentation that

adding an animation to show subtitles being changed at

different points within a video would be better than just

showing one emotion throughout the video.

Mark 3 Prototype

The third prototype of Connect only had one big addition. A

timeline has been added to the video once it is uploaded. I

intended to use the timeline to create an animation of the

video at different points. At this point I also considered

using InVision’s hover function to simulate an active video,

however I was wary as each typography would require

around 80 clips for this to work.

Feedback

Before developing prototype 4 I showed and

allowed two people to test prototype 3. My testers

were friends who I know to be video creators, so I

knew they would be able to give me detailed

feedback of what they thought of the experience.

The feedback was predominately positive. My

testers were surprised and pleased at the journey

the prototype took them through. They liked the

idea of being able to use a plugin to alter subtitles.

A key piece of critical feedback I took from my

testers was the emoji box. It was suggested that

having it automatically appear at the bottom left

was old fashioned. I would take this feedback on

when I developed prototype 4.

Mark 4 Prototype

The fourth prototype of Connect had many new changes that

refined the plugin as I drew closer to a final prototype.

* The emoji box no longer appears automatically. Instead it

appears as a smaller box when the use clicks on the subtitles,

similar to when you edit work on Microsoft Word or on social

sites such as Tumblr.

* To give the option to change the subtitles more than once in a

video two options have been added. The user can now chose ‘one

emotion’ if they only wish to have one emotion playing through

the video or ‘multiple emotions’ if they wish to add more.

* There are far too many clips. As nice as it would to simulate

going through the video it is unnecessary and makes the

prototype difficult to use. Instead there will be two set points to

display changing the subtitles twice in one video.

Now that I was satisfied with the prototype there was one thing

left that needed changed for the last prototype: the typography.

Typography

A key element of Connect is the typography, changing the

sterile video subtitles into a more expressive ones. I had

previously done a lot of research into symbolism,

predominately in colour, from China to the western world.

I chose four different emotions to design for: joy, sarcasm,

relief and sadness. I wanted to show an array of emotions

so I chose these ones as they are not similar to each other.

I initially sketched out some ideas for typography with the

intention to use a graphics tablet and Adobe Photoshop to

create PNGs for my artboards.

However I couldn’t design typography that I was happy with.

Experimenting with Illustrator I edited some typography and

created four different typography’s that I like. It was these

four typography’s that I used in my final prototype.

Key Reflections from Development

The development stage of Connect gave me many

challenges, however I feel I managed each one well,

adapting quickly to changes and never taking my eye off the

focus.

I made the decision to change Connect into a plugin quite

far into development. The choice was not taken lightly,

however I feel this decision was the right one to make. The

project really took flight after becoming a plugin and if given

the same options I know I would make the same choice.

Having less time to develop a plugin meant I had to rapidly

prototype throughout development. I’ve surprised myself

with how well I managed to do this, making swift decisions

and never stopping with prototyping, be it wireframes or

artboards. I hope to take these skills forward as I move on in

my career.

Deliver

100 Words

Connect is a plugin that gives video creators the

option to alter traditional video subtitles so they

express the emotions they are conveying in their

videos. By selecting from a range of options

Connect will improve the experience for the both

the video creators and their viewers. When a viewer

is trying to focus on a video and subtitles at the

same time things such as emotion can be lost in

translation. By altering the subtitle’s typography the

video’s creator can insure their viewers experience

the video in the way they intended.

1 minute Video

Having completed the plugins development I began creating

my one minute video. I wanted to create a video that

showed the prototype in action but also captured the calm

ambience of the project.

One of my testers, Kymo Misenica Kobayashi volunteered to

assist me with the video and is seen at the start if the video

working on uploading a video. There is a cross dissolve into

the demonstration of the plugin. I chose to use this effect as

it’s almost like the viewer becomes the video creator and is

uploading the video. When the upload button is clicked to

the scene cross dissolves back to Kymo and finishes with

him shutting the laptop. This last scene embodies Connect

as a whole, with the laptop representing the technology and

Kymo’s hand representing sign language, the language that

inspired the project.

The video was created using a mixture of smart phone

technology, Bandicam and iMovies. The song in the

background is Madoka’s Calming Ambience.

Final Reflections

Since its early beginnings my end goal for Connect was

primarily to create a more personable means of

communication between people who can hear and people

who use sign language. Along with this primary goal was a

secondary goal to raise awareness for sign language as a

means of communication. Though not in the way I'd

originally intended I believe Connect achieves both of these

goals. Through using the plug in users can create a video

that offers subtitles with a psychological addition that

allows viewers a greater insight to what the person is saying

and how this is expressed in a non-verbal language such as

sign language. It also encourages people uploading videos

to alter their subtitles to fully express themselves as they no

longer need to use multiple programs. Instead it is now an

optional addition to already existing technology.

The interactions for Connect are versatile and fit in with

currently existing technology. This approach can be seen in

the prototypes as the user navigates through a mock site

that is based on currently existing social media sites. This

has led to a plugin that is simple for any user and will make

it more appealing than having to spend hours creating

custom subtitles in a different program and then having to

waiting even longer for the video to render before it can be

uploaded. In addition Connect is highly visual, using

recognizable symbols such as the emoji to clearly represent

the available emotions. If Connect was developed further I

could see it being used in a variety of social media sites,

some of whom I could work with to maximize the experience

for both creators and viewers.

A main goal of mine was to improve my visual design skills.

Throughout my years in university I have been more of a

technical designer but I wanted to be different this year as I

need to be able to show that I can do successful visual

design. I feel that this year I have made significant progress

and this can clearly be seen in the digital prototypes. The

prototypes have a high standard appearance and could be

mistaken for an actual website. Compared to my previous

projects Connect stands out in terms of visuals. Completing

a project to such a high standard proves that I can create

successful visual designs and this will benefit me greatly as

I look into my future career.

Project Connect has not all been an easy path. Changing my

project halfway through the year was a huge decision and it

certainly wasn't one I took lightly. However as I look back I

see only benefits. Changing my project has brought about a

new plugin that could revolutionize video media but that is

not the only benefit. Because I changed the project later I

have had tighter time constraints then others may have had,

but I have never let this get in my way. I have demonstrated

determination, improved rapid prototyping skills and proved

to myself that I can excel under pressure. It has helped me

grow not only as a designer but as a person. I hope to

continue this growth as I enter the industry.

My biggest highlight while working on Connect was talking

to people about the plug in, in particular with my testers.

Having people look at my work and discuss it was amazing,

especially as many commented on how subtle yet clever the

plugin is. It has been a great moral booster throughout the

project. In addition, having people comment on its usability

and how they would personally use it is highly encouraging

as that was a key reason I chose this project: to create a

personable means of communication that people would

want to use. I am glad to of succeeded in this and I hope to

use the skills that I have learned throughout this project in

future projects as I graduate and go to my first job.

Rebecca Anderson

Personal Honours Project 16/17: Connect

Email: r93anderson@gmail.com

Project Connect Blog: rdesign93.wordpress.com