Author: Bi

Posted on

Melt Dictionary–UX Azure(Zane Fadul Candy Bi)

Documented by: Candy Bi & Zane Fadul

Team members:Candy Bi & Zane Fadul

Project name: Melt Dictionary

Professor: Azure Tianran Qian

Problem

As a language learner, building your vocabulary is usually the most difficult part, because while a dictionary is always static, the words that native speakers are always evolving and changing. Not everyone has the luxury to travel abroad and immerse themselves in the language, and so this prevents people from truly mastering a language, and more so deters people from even trying.

Solution

Using Melt Dictionary, you have access to words that are being updated and verified by other users in real time. This ensures that you have the most accurate word choice when making translations or inputting simpler definitions.

Pre-Design

Story

When creating this project, we both equated the target problem with problems we faced head on. As a native English speaker, I understand that many languages function differently than I expect, so I’m constantly being told I “can use a better word” when I’m having daily conversations in Chinese. This cycle of always being able to use a better word is the exact motif we we used when creating our user story,

Storyboard

We start our scene with an interracial couple: Nick—a native English speaker—and Lily—a native Mandarin speaker. Despite not being able to completely understand each other at times, they are in love. Nick decides that he wants to propose to Lily on Valentine’s Day, but he just cannot find the words he wants to say to her to express his love in Mandarin. Using Melt, he is able to effectively melt her heart as well, as his proposal leaves her teary eyed, ending the scene in her saying “yes.” Another way we can show that it is the app that helps him to communicate better with her could be to include some smaller tidbits of them having some communication barriers earlier in the scene.

User Research

Before we began working on specific features of the application, we surveyed about 60 students in our school using questionnaire platforms like Google Forms and Wenjuan Xing. Since we know that every student at NYU Shanghai is learning a language, this was the perfect population for us to get samples from. With these, we were able to establish a few personas.

Persona

We were also able to survey students and see what kind of features they expected from Melt Dictionary.

Discovery

By just explaining the main premise of the application, our surveyees were able to give us some more insight on the features we could implement into our original idea. Keeping this in mind, we obviously didn’t want to clutter our app with unnecessary features. I think that understanding the realms in which your app does not belong is just as important as understanding where it’s primary focus should be.

Design

Based on the data we received from our soon-to-be users, we were able to begin the design process.

User Flow

Sitemap

We used this rudimentary sitemap to emulate the typical cycle that a user would take on a dictionary app, while including the verification service needed to update the dictionary’s word database.

Lo-Fidelity Wireframe

After creating our sitemap, we implemented a basic layout in the form of a lo-fidelity wireframe. This allowed us to make any tweaks to the sitemap if we needed to, and to also account for any tweaks to our layout design.

Usability Testing

Branding & Final Details

Mockup & Hi-Fidelity Wireframe

When creating our mockup, we wanted to keep in mind what our general audience was. For example, we are pitching to a demographic of younger, relatively tech savvy, language learners. Because of this, we wanted to maintain a brighter color scheme; we felt this embodied the essence of our demographic.

Using tools like Adobe Illustrator and online color resources, we were able to develop a color scheme that was both bright and relatively appealing.

After this, we added color and other visual details to our applications wireframe. While the wireframe still obviously can’t allow the user to search up their own words, the hi-fidelity wireframe gives quite a few examples that the user can interact with to understand how the app works.

Reflection

Through the design process, we were able to truly understand the process that a UX designer goes through. From start to finish, it is honestly a lot more work than I had initially thought, but it’s fascinating to see how important it is to keep in mind that you—the creator—are nothing without your users. It seems like an obvious thing, just like how a play isn’t a play without an audience, but it really does make a difference how aware you are of your product and how well you can implement what your users truly need.

Challenges & Solutions

Through our process, we assumed that the only useful information we needed was from students at our university, when in fact the entire city of Shanghai is growing with people from all over the world. It’s safe to assume that many of them, students or not, would benefit from this app, and definitely would add to our user research.

The user flow can always be made smoother, and I think that if we were to look at this project again, we could create a smoother interface that was easy for users to understand just upon opening.

Referring to the story arc that we would expect our users to follow, we assume that the only thing maintaining user attention is the demand of learning a new word, which we can expect would happen at a regular rate. I think despite this, there are other possible ways that we could attract users. However, this is not something that you can just make happen. Adding extra features would definitely take a lot more user research and and prototyping, which we unfortunately do not have the luxury of time to do. But this is also something to keep in mind.

Posted on

Reading Response 1–Ann(Candy)

A Four-Century Retrospective of Marine Fauna and Fisheries Around New York City

The authors provide a quite detailed picture of fishery industry in New York City by providing related information of the past four centuries. They point directly to the problem of overfishing that though species composition has changed relatively little, population sizes, and the mean size of individuals have greatly declined. It surprises me that facing such situation, government is still investing into the expansion of fisheries and promotion of
seafood consumption. However, I do acknowledge that this is a difficult problem to solve for governments worldwide. Overfishing does not seem to be a new problem and It is impossible to simply tell the population just stop consuming fish. The problem is how we deal with it. I recall a good example I saw on TV: fishing nets is made to suit the size of local species in a way that it would avoid small fishes that are still young.

WCS Informational Sheets

It is my first encounter with this organization and I am deeply impressed by what they are doing. I really appreciate the education program WCS founded for it is crucial important to educate children about the current natural situation on the planet. Since 1895, WCS gradually involved 60816 members. However, I do think this great organization should get more attention from the society and I believe it will.

The Ainu: Beyond the Politics of Cultural Coexistence

This article presents the charm of Ainu music and dances as well as their situation and struggle in Japan. It seems to me the Japanese government is trying to deny the existance of this minority by claiming there are “no pure Ainu people”. One culture can only be protected when it is acknowledged by the public. The first step to take for Japanese government is to recognize Ainu before it trys to protect its culture.

Posted on

Nature of Code: Week 1 assignment–Moon(Candy)

Documented by: Candy Bi

Project name: Drawing Board

Professor: Moon

Date: 2/19/2019

final（video version）

For this assignment, I started without an idea of what I want to do, rather I choose to experiment to see what I could get.

I start with a red background with some moving rectangles. I make the background transparent so that the three reactangles could leave trails.

I then draw a white ellipse that would move according to mouse:

1

For some improvments I use the “mouseIsPressed” to create the effect that only when user clicked there would be the white circle:

2

I suddenly came up with the idea to make th white circle a bouncing ball that would bounce whenever it touches the three rectangles. It turned out a failure.

I then shift to the idea of playing around with lines and this is what I got:

3

For better visual effect, I made the other side of the lines ramdom in a certain range ( inside the big rectangle the three black moving rectangles formed). It somehow gives the feeling of modern arts:

final