1

Yingnan Ju Portfolio for HCI Application

2010 – 2015

“I certify that the work included in this

portfolio is my own original work. Work

included which was conducted as a part of a

team or other group is indicated and

attributed as such- the other team members

are named and a true description of my role

in the project is included.”

2

Contents Windows Phone Apps ................................................................................................................................................................................. 3

GPS with Friends ..................................................................................................................................................................................... 3

Eight Glasses of Water ............................................................................................................................................................................ 3

Windows 8 / 10 Apps .................................................................................................................................................................................. 6

Binary Clock ............................................................................................................................................................................................. 6

Dinner Decision ....................................................................................................................................................................................... 6

CNBlog ..................................................................................................................................................................................................... 6

Nine-Block Diary ...................................................................................................................................................................................... 6

Classic Desktop Software .......................................................................................................................................................................... 16

Wave Generator .................................................................................................................................................................................... 16

Binaural Beats ........................................................................................................................................................................................ 16

Picture This ............................................................................................................................................................................................ 16

Drawings on My Phone ............................................................................................................................................................................. 20

3

Windows Phone Apps GPS with Friends

Eight Glasses of Water

GPS WITH FRIENDS

4

GPS with Friends is the App I designed and implemented as the

final project of a course cooperated by Microsoft China and

Peking University. I was inspired by the logo of MSN Messenger

and designed the logo with a letter G for GPS.

Friends can see each other’s location and message. I was

playing Final Fantasy XII at that time and I used large number to

display distances between friends and the user as a tribute to

Final Fantasy, which displays characters’ level with extra-large

digits.

EIGHT GLASSES OF WATER

5

Eight Glasses of Water is an app designed to remind the user to

drink enough water every day. The font in the logo was originally

used on posters and blackboards. This app was downloaded for

more than 27,000 times in the Microsoft marketplace and the

engineers in Microsoft also liked this app when I showed it to

them in the interview.

The user taps a glass of water and the count will decrease till 0. I

set an offset of the number at the screen edge to get rid of the

rigidity.

The tile of the app also changes as the user drinks a glass of

water.

6

Windows 8 / 10 Apps Binary Clock

Dinner Decision

CNBlog

Nine-Block Diary

BINARY CLOCK

7

The tile also displays the real time, so

the user does not need to open the

full app. How much time does a real

geek need to know the time with a

glance of the app? Only the geek

knows.

This app is for geeks who wish

to have a unique clock on the

screen that is not easy for

other people to understand.

The format is:

HOUR: MINUTE

SECOND

DAY/MONTH/YEAR

BINARY CLOCK

8

It is not difficult to finish this app but the most interesting thing is the color of the background. The original design was to set the value

of hour, minute and second to RGB value directly and the color would change as the clock goes. Then I also found that the color could

change in other different patterns by changing the increment of RGB value with a few lines of codes.

A group of Traditional Chinses colors’ transition pattern: Green to Red: 青葱

玉 葱

绿

葱

青

青

葱

翡

翠

碧 石

青

艾

绿

水

绿

朱

红

炎 丹 酡

颜

檀 缳 水

红

鱼

肚

白

绿 沈

石榴

BINARY CLOCK

9

A group of Traditional Chinses colors’ transition pattern: Green to Yellow:

青葱 青

碧

葱

绿

柳

绿

豆

绿

嫩

绿

柳

黄

鹅

黄

A group of Traditional Japanese colors in Buddhism theme:

梅

皮

色

栗

梅

雀

茶

宗

传

唐

茶

水

が

き

绯 甚

三

红

鸢色

松 柏

豆

黄

樱

花

鼠

DINNER DECISION

10

Some people have difficulties to make a decision

among many good choices, just like I always do

not know what to have for dinner. This app is

just for us and it will make a random choice

among available choices. The choices are

displayed in random order, size and location on

the screen, just like the mental activity of people

when they are trying to make the best choice.

DINNER DECISION

11

I also developed the

Windows Phone version of

Dinner Decision. Almost all

cellphones have GPS so a

list of restaurants can be

fetched from the web using

the GPS location and the

user can have a choice of

dinner with only one click.

CNBLOG

12

CNBLOG is the client of CNBlog, the biggest Chinese

IT blog community. I developed the app in Microsoft

for the promotion of Universal App.

CNBLOG

13

I made a lot of efforts to make

the app adapt properly on

different devices with different

screen sizes and resolutions.

The size of each block of blog

can be changed by simply

pinching.

The context menu is also

rearranged to adapt different

widths of screen.

CNBLOG

14

I also designed a rebound effect when the abstract tab

of a blog moves from the right side to the left side. I

calculated several key points with the following

equation to make the effect look natural:

𝑆 = 𝑣0𝑡 + 1

2𝑎𝑡2

The opacity of the covered part is also in bind with the

position of the moving part, to make a fading effect.

CNBLOG

15

There was a new type of diary

call nine-block dairy

originated from Japan in 2010.

It is a simple type of diary, for

users only need to answer the

given questions, e.g. news

today or the happiest thing,

like filling the blanks.

This was my first Windows 8

App and the background was

the mix of two photos I took

before.

16

Classic Desktop Software Wave Generator

Binaural Beats

Picture This

Wave Generator

17

I bought a pair of new earphone in 2011

and I wrote the Wave Generator for

them. It generates four types of sound

wave in the range of frequency that

human ears can hear, from 20 to 20,000

Hz. Another purpose of this software is

to generate long-lasting sound that

helps my earphone to run in. I set the

background of the software with the

Aero glass effect of Windows 7.

Later I continued to develop the Wave

Generator. I added a feature called

sweep frequency mode. But in

Windows 8 and 10, the Aero glass effect

does not work so the software looks

quite different from what it looked like

in Windows 7.

BINAURAL BEATS

18

I developed Binaural Beats right after Wave Generator. I did not start developing mobile apps but I started to try the

style of mobile apps on classic Windows desktop software.

Binaural Beats means that the brain produces a phenomenon resulting in low-frequency pulsations in the amplitude

and sound localization of a perceived sound two tones at slightly different frequencies are presented separately, one

to each of a subject's ears, using stereo headphones.

PICTURE THIS

19

This is a screenshot tool. I developed the

software before Windows 7 built-in snipping

tool was released. It is easy to use while has a

low memory use. The different between Picture

This and other similar software is that my tool

has a dynamic screen to capture while other

software have only a static full screen captured.

20

Drawings on My Phone I like to draw on my phone. Sometimes I played with

my friends with Art with Friends (original Draw

Something 2). Here are some of my freehand

drawings.

DRAWINGS ON THE PHONE

21

DRAWINGS ON THE PHONE

22

23

I took the photo in this summer as

I was deeply moved by their

happiness. I wish I could be as

happy as them, doing research in

the field of HCI in the future.

VISION