Xueer Zhangis a digital/tangible
UX Designer,
who thinks big picture and cares about minutiae.
She diverges and converges, and is not afraid of detours.
Beijing University of Posts and Telecommunications
理学士 BSc / 伦敦大学玛丽女王学院 &
工学士 BEng / 北京邮电大学
BSc & BEng Telecommunications Engineering with Management
电信工程及管理
London, UK & Beijing, China伦敦 & 北京
EXPERIENCE跨领域工作经验
独立体验设计师
Freelance Experience Designer
🍷
https://mulledwine.design
New York & Remote纽约 & 远程
• handcrafted reader‑friendly online interactions, hammered out the minutiae in the wording, layout and hierarchy, and experimented with the capacity of CSS and Javascript
• consulted for clients from food, fashion and architecture industries on user‑centered design and creative technology solutions
• facilitated the founder in setting up the factory, obtaining licenses, and establishing regulations, as well as managing contracts, orders and relations
• took charge of communication and negotiation with buyers, suppliers, procurement managers, engineers, product managers, investors, government officials, lawyers, bankers and board members throughout the tendering, sales, manufacture, transport and delivery processes of industrial products
• translated project document for foreign market, organized product training, and integrated promotion materials
• facilitated setting up the factory, obtaining licenses and establishing regulations, and managed contracts, orders and relations
• took charge of communication and negotiation with buyers, suppliers, engineers, investors, lawyers and government officials throughout the tendering, sales, training, manufacture, transport and delivery processes of industrial products
• took charge of communication and negotiation with buyers, suppliers, engineers, investors, lawyers and government officials throughout the industrial product lifecycle, including factory setup, tendering, sales, contracting, manufacture, transport and delivery
—a regional branch of a software corporation⸺传统软件企业的区域分部
Hainan, China海南海口、博鳌、儋州、东方
• participated in business development, product demo, requirements management, project coordination, tender submission, system testing and deployment of toB and toG services across cities
• shadowed different roles including consultants, sales, project managers, and software engineers in interacting with leads, clients, stakeholders, and end users, gaining holistic perceptions of healthcare, education and IT application innovation industries
• participated in business development, product demo, requirements management, project coordination, tender submission, system testing and deployment of toB and toG services
• shadowed consultants, sales, project managers, and software engineers in interacting with leads, clients, stakeholders, and end users in healthcare, education and IT application innovation industries
• participated in business development, product demo, requirements management, system testing and deployment of toB and toG services in healthcare, education and IT application innovation industries, with consultants, sales, project managers and engineers
—the world’s first bricks‑and‑mortar food museum dedicated to creating interactive and edible exhibits⸺致力于创造世界第一座专注可食用展览的大型博物馆
Brooklyn, New York纽约
• redesigned and launched an informative website, designed nine museum panels, a brochure and a menu, renovated installations and conducted culinary research for four exhibitions/projects and ten events, reaching tens of thousands of visitors
• collaborated with curators, chefs, product managers, developers, photographers, operations managers and volunteers, and enhanced MOFAD’s brand and value
—a start‑up design studio specialized in 3D experiences⸺来自布鲁克林的创新设计工作室
Brooklyn, New York纽约
• converted a prospect to a client, and represented the studio in the full product design cycle—from concept, to research and design, to iterations and testing, and through to product launch—of a project crafting web and mobile interactions
• assisted group user testing sessions, documented user feedback, and provided constructive critique for teammates, clients and stakeholders
• facilitated object‑oriented programming in building Unity visual shaders for a VR paintbrush game
Information Architecture信息架构,
Wireframing线框图,
User Personas/Scenarios/Stories用户画像/场景/故事,
Journey Mapping体验旅程图,
and Paper, Low/High-Fi, Interactive Prototyping纸质、低/高保真、交互式等不同程度的产品原⁠型
Drones have been controversial. The Predator first gave the public a negative impression of warfare brutality. This perception started to shift as commercial drones emerged since . All of a sudden, venture capitalists were interested, the media was talking about it, and at least 3 drones in the following year crashed around the White House, attracting extensive public attention. Amazon was approved by the Federal Aviation Administration to test drone flights outdoors for package delivery. The leader of the industry, Da Jiang Innovations, was on its way to iterate its most celebrated aerial cinematography product, Phantom 2 Vision+, to the next version. The market was already estimated to ramp up quickly and even double over the next decade. Consumer drones were becoming the new popular toy for the tech‑savvy generations.
MQ-1 Predator, armed with AGM-114 Hellfire missiles
Screenshot of abc7 news, reporting that a drone crashed on White House lawn on January 2015
The initial testing drone of Amazon Prime Air, announced back in 2013
DJI Phantom 2 Vision+
Good Drones LLC is a human‑centered drone innovation and design lab founded by Mehdi Salehi and Kristen Kersh in New York City. Their mission is to solve human problems with drones, focusing on emotional connections between the human and the drone. During this collaboration, they became our advisors, bringing rich experiences from the field, providing us with feedback on identifying human‑centered problems and designing drones to solve the problems. We sat down regularly for design workshops, drone flying, presentations and critique.
Three drones we acquired for this project
Feeling the Smog
It was the spring of 2015. It had been three consecutive winters that hundreds of millions of people in northern China suffered from the alarmingly poisonous smog. Not only big factories contribute greatly to the air pollution, restaurants, gas stations and cars release waste gas without filtration. The documentary Under the Dome had just gone viral online, spurring wide discussions on what the culprits of the air pollution were and how individuals could start to take responsibility.
My teammate Haotian and I have both lived in Beijing for more than 3 years. We feel the murky air there, and have certainly witnessed the sales surge of face masks as the air quality deteriorated. We asked ourselves:
how can technology help with this smog ?
While the most effective measures would be policies and regulations imposed by the authorities, each citizen can become mindful of culpable behaviors and help report violations. Therefore, we established our target end users to be urban dwellers who were concerned about air quality and suspicious about particular pollution emitters.
Notes of the documentary Under the Dome on the causes of the smog and actions that can be taken by every citizen
Starting from the History
At the time we saw a commercial drone, we knew the mobility of drones can be of great use on supervising urban air quality issues. Seizing this opportunity of innovating a good drone, and proposing an actionable solution to help reduce the smog, we directed our research at:
what are the aspects about drones that can be improved to help reduce the smog ?
One of my habits when I get to know a thing, is that I always look into the first of its kind to start my research. The first drone was inspired by the Austrians’ attempt to use unmanned balloons filled with bombs to attack Venice in the mid‑19th century. It came into being in the early 20th century for military training. Thereafter, development of drones has been carried out by several companies during WWI and WWII. Until 2015, there has been more than 50 countries using drones.
drones
history
start
1849, Austrians, unmanned bomb balloons
early 20th century, for military training
WWI, Dayton‑Wright Airplane Company, a pilotless aerial torpedo
1915, Nikola Tesla envisioned a UACV fleet
1916, Archibald Montgomery Low, aerial target
1935, Reginald Denny, first RPV
1959, USAF, first US RPV
milestones
1960, USAF UAV program Red Wagon launched
1994, Predator took its first flight
1998, Global Hawk took its first flight
2001, Reaper took its first flight
2004, CIA UAV program launched as a result of 9/11
current state
military development continues
commercial uses become increasingly popular
uses
collect data
camera
film making
sports
surveillance
scientific research
environment
forest fire detection
natural resources exploration
rescue
sensors
convey messages
education
mourn your pet
carry things (messages)
delivery
logistics
medical emergency
public health
proposal
disaster relief
humanitarian aid
military killer machine
protect human lives
military UAV
issues
political problems
(anti‑)terrorism
international arms race
social issues
common fear of drones
pilot error
lack of regulation
future
relationships between
user/controller and drones
user/controller and other humans
other humans and drones
Mindmapping my research findings on drones
The history of drones started with war, but people have discovered many other uses in civil industries, such as transportation and entertainment. Social and legislative issues emerge as more and more people interact with consumer drones in public places. To better deal with the relationships among the user, the controller, the drone as well as other people, is integral to the future of drone industry.
The relationships among these four parties are significant
Flying and Observing
From my primary research impressions and our mentors’ industry input, it came to our attention that some people are afraid of drones. To investigate this assumption, we needed to obtain deeper insights into the relationships of the aforementioned parties.
We took small drones to the street of New York City with our friend Charles, who turned out to be a better pilot. One of us flew the drone, one recorded short videos on people’s reactions, and one took notes of the things uncaptured. We deliberately took the camera module off our drone to avoid any privacy intrusions. We compared large indoor space and different outdoor environments, and noticed different emotions from people’s interactions with us and with the drone.
Shadowing with small drones in public spaces
LOCATIONSINTERACTIONSEMOTIONSIndoorIn a building lobby on 5th Avenuea young woman seemed to feel it’s noisy and walked awaynegativea security guard approached us and said we weren’t allowed to fly in the lobby because too many people were passing throughnegativeOutdoorWalking towards Washington Square Parkkids commented on the drones (immediately understood what the toy was)positiveparents were confusedneutralIn front of a building on West 4th Streetpeople passed by, noticed the drone but did not show much surprise or interestneutralpeople took pictures of the dronepositivepeople stopped to watch and showed curiositypositivesomeone threw a snowball trying to hit the dronepositivea food truck owner curiously passed by, (after a while), silently stopped, and (after a while), finally talked with us and asked:
How much is a drone?
Are you guys selling drones?
positive
Shadowing notes
We came back, reviewed our notes and video recordings, and analyzed our observations. It appeared 5 out of 9 instances of interactions appeared to be positive⁠—interested, curious and amused. There were 2 neutral reactions and 2 somewhat negative ones. There was qualitative speculation to be drawn here, but we thought these non‑positive emotions could be our starting point to a valuable improvement.
We disected these findings as a team by exemplifying what types of people, where does the fear come from, and of what kinds of drones respectively, and generated five HMW questions based on the discussion.
We came to realize there were two directions we could carry this project⁠—functionality versus appearance. For a toy drone, its appearance might be prioritized over its functionality. But for the problems we were trying to solve, the essential functional integration to help reduce the smog should be balanced equally with, if not more important than the appearance.
Breaking down the statement that some people are afraid of drones
Contextualizing Interviews
After previous observations, analysis and discussions, we refined our HMW question to:
how might we design a drone to reduce people’s fear and make them be willing to use drones in their daily lives ?
We wanted to answer it through contextual interviews. There were 4 interviewees we found who came from different backgrounds. For each session, we did a brief drone flying demonstration to give the interviewee some context, and then asked him/her questions based on what was seen, heard, felt and thought.
Interview sessions
QUESTIONSANSWER #1 MaleANSWER #2 FemaleANSWER #3 FemaleANSWER #4 MaleKEYWORDSWhat would you like to call it?mini droneflyeralien flight/flydroneHave you ever seen anything similar before?not in person, but have heard of military surveillance drones and consumer droneson the Internetyes, have heard of Amazon drone delivery servicein newspaper, do not know other namesmediaHow do you feel about it?In general?this small one without a camera is very cool, cute, an interesting little quadricopter. drones with cameras can be kind of weirda game for kids, can attach a camera to take photosvery interesting, looks like a toy, but with professional functionsit can do a lot of things, such as taking photos and carrying stuffinterested, expect to add cameraSound?high‑pitched, kind of annoying, definitely a little bit noisy, but doesn’t matter since the technology is so coolsounds like fly and insectsnatural noise from a machinenot that noisy because of the size. you may not hear it on the streeta little noisy, yet tolerableDistance?kind of scared, afraid of it would hit me, gets louder, spinning fasta little scaredjust a little afraid, feels like it would attacka little afraid, but since it’s light and small, it won’t hurt so mucha little afraidAppearance?not aesthetically nice looking, just has what it needs, eg. propellors, but cool, futuristicsimple and lightnormal machine, nothing specialquite normal, just like other dronesnormal, has room for improvementWould you be interested in buying something like this? Why (not)?yes, if it’s afforable and having enough space (in the woods, not in the city) to fly it around. reasonable price range: $50⁠–⁠$100, pretty close to $50no, because do not know what to use it forno, because do not know what it should be used for, do not know how to use itdepends on price, from 30 to 50 dollars, as a toydepends on usage and priceDo you think it can help you in any way? eg. transportation, for fun, recording/camera?project people’s voice, on behalf of the pilot talking to other people, using camera and speakershoot others, carry thingsdeliver things when lending to friendsjust a toy for fun, transport stuffcarry things, add modules
Interview notes
From these participants who had general knowledge of drones from the media, we saw relatively positive interest and acceptance level to current drawbacks and potential improvements of commercial drones. It was common to expect additional modules, such as camera, to enhance drones’ functionality, as well as more work on improving drones’ appearance. Probable reasons for being afraid of drones were high‑pitched noise and close distance.
Refining the Question
Gathering potential solutions
We workshopped our new findings together by listing problems and needs discovered throughout the inspiration phase, and decided to focus on two of the more viable solutions among all propositions⁠—to improve drone’s appearance and to add modules other than camera.
The final HMW question we arrived at was:
how might we design an aesthetic drone to help people get the air quality of their surrounding environment ?
Building Personas and Scenarios
With the insights gathered from previous phases in mind, we created three hypothetical users—Chris, Min and Tang—and produced a detailed persona followed by corresponding scenarios for each of them, to better contextualize our idea.
Chris Johnson 姜克里PERSONASCENARIO
DemographicsAge46GendermaleFromDallas, Texas, USOccupationassociate professor EducationPhD in EconomicsEconomicannual income $70k ≈¥⁠430kBackgroundChris teaches Microeconomics at University of Illinois at Urbana‑Champaign (UIUC). In 2010, the School of Economics at UIUC and the Peking University(PU) became partners. Chris then became a guest professor in the School of Economics at PU. Thus he goes to Beijing twice a year and stays there for about two weeks each time.Goals & NeedsChris is very concerned about the air quality of where he lives.He wants to know if there is smog before he goes out of his apartment in PU.He would like to be informed when the outdoor air condition is good for exercise.Pain PointsChris tends to cough when the air condition is poor.He doesn’t believe the air condition data provided by the Ministry of Environmental Protection.Even though Chris is aware of the smog in China, he has no idea how much harm there is to his body under different air quality indices.Current Behaviors and BeliefsChris will travel to Beijing in the coming April. But the air pollution in Beijing is severe, especially in spring. He believes that the statistics released by the embassy of his home country is more accurate.
🕕 Chris has been staying in Beijing for 7 days. He wakes up at 6am when the sun has not totally risen up. He likes to take exercise in the morning. But he is not sure about the current outdoor air condition. He asks a waiter at the hotel about the air quality. The waiter flies a drone out in the air, at the same height of Chris, so that he can get the information of the air which Chris would be breathing. Chris notices there are lights on the drone blinking in green, which means the air condition is good for exercising. He opens a related app on his phone to check the data sent from the drone. It shows that the PM2.5 index is below 50. Chris is happy about it and goes out running for half an hour. After that, he comes back, takes a shower, has his breakfast and has his driver take him to the school.
🕚 His lecture begins at 10am. At about 11am, during his short break, Chris finds it windy outside and the visibility is lower than that in the morning. He asks one of his students to check the air condition using a drone. The light on the drone changes to red, indicating the air quality is poor. Chris is very disappointed because he planned to go to the Forbidden City after work. But under such circumstances, that will only gives him continuous cough. So he gives up the plan and has his driver send him back to hotel. It’s so boring to stay indoor and he wishes the weather could be better tomorrow.
Detailed persona and scenario #1
Min Zhao 赵铭PERSONASCENARIO
DemographicsAge28GendermaleFromBeijing, ChinaOccupationproject manager in an e‑commerce companyEducationMSc in Computer ScienceEconomicannual income $48k ≈¥⁠300kBackgroundMin grew up and lives in Beijing, where smog has become a major environmental problem because of severe air pollution. He got married right after he graduated from Beijing University of Posts and Telecommunications. Now he has a 3‑year‑old daughter who goes to a kindergarten near their home on weekdays. He usually gets off work at 5pm, drives back home, and walks 15 minutes from home to pick up his daughter at the kindergarten.Goals & NeedsMin needs to protect his daughter from the smog.He needs to know the real‑time air condition around his home, his workplace and the kindergarten his daughter goes to.Pain PointsMin has to pick up his daughter at the kindergarten before 6pm. This period of time happens to be the rush hour in the neighbourhood. Traffic jam makes it impossible to drive. That’s why he has to walk.At the same time, heavy traffic makes the air quality worse.There are lots of restaurants along the way. It is always dinner time when Min and his daughter pass by. They can smell greasy cooking smoke.During his 8 hours at work every day, Min has no idea how bad the quality of the air his daughter has been breathing.Current Behaviors and BeliefsMin wears a mask and takes an extra one for his daughter every time he goes to pick up her. They wear masks and walk back home together. Min believes masks can protect them from the air polluted by tail gas and cooking smoke.
🕖 Min gets up at 7am on weekdays. He always checks weather and air condition on his phone when he wakes up. Unfortunately, today is another bad day. The data collected by other people’s drones says that the PM2.5 index has exceeded 500. He kisses his daughter before he leaves home. He puts on a mask and reminds his wife to put a mask on for their daughter before taking her out.
🕛 It usually takes him an hour to drive to his company. He starts working at 9am. During lunch break, his colleagues are talking about the impact of the smog on their kids, who have bad cough under poor air quality. Min wants to protect his daughter from the smog and keeps her healthy. He finishes his work at 5pm. Then he goes to the kindergarten to pick up his daughter. Min helps his daughter to put a mask on carefully because there are lots of restaurants along their way home. When they pass by a BBQ stall, his daughter feels hungry and wants to have some shish kebab. Min feels that the smoke smells weird so he takes out his phone to check if there is any data uploaded by others about this stall. Fortunately, there is a record saying that the stall is not clean and the smoke contains certain carcinogenic chemicals. Min tells his daughter her favourite cartoon series is beginning soon so they better leave now. Therefore they go home right away.
Detailed persona and scenario #2
Tang Li 李糖PERSONASCENARIO
DemographicsAge20GenderfemaleFromShanghai, ChinaOccupationstudentEducationsophomore majored in voice and operaEconomicno incomeBackgroundTang has been passionate about singing since she was a little girl. After years of diligent practice, she was admitted into the Central Conservatory of Music in Beijing, her dream school. She likes to vocalize in the park near her dorm every morning. It makes her feel energetic to start a day by singing with birds. Her boyfriend told her not to go outdoors to practice because he got a sore throat for a week after vocalizing in the park for just one hour.Goals & NeedsTang would like to check the air condition in the park before she decides whether or not to get up.She wonders why her boyfriend’s throat has been feeling so uncomfortable recently.Pain PointsTang kept practicing in the park every morning until one day, she woke up and found her throat was so dry and sore that she can barely speak, not to mention sing.Even though the weather looks sunny and clear, Tang cannot hear birds singing in the morning any more.Current Behaviors and BeliefsTang dares not go outside without a mask now. She has no choice but to practice in her studio every morning.
🕡 Tang got a severe upper respiratory tract infection which made her unable to speak. It took her over a week to recover. Now the midterm exam is around the corner. She has to practice more than usual to make up for the time when she was sick. She gets up at 6am, so that she can secure a practice room in her studio. She wants to get some buns for breakfast on her way to the studio. At the bun place, she meets her boyfriend. “Are you feeling better today?” he asks. “Yeah, much better. I can finally try this place.” Tang answers. “Great! It opened only last week when you were sick. Their buns are awe...” She starts to cough before her boyfriend finishes the sentence. He thinks it is the exhaust from the kitchen caused her cough. But Tang thinks it is ridiculous as she doesn’t sense any smoke. Her boyfriend takes out a drone from his bag, flys it around to measure the air quality. He shows an app on his phone to Tang where all the air quality data captured by the drone are nicely laid out. It shows an alert that the sulfur dioxide concertration exceeds the specified amount. Now Tang believes. They then call 12369 to report this breakfast place. Soon there comes an officer with a ticket of ¥⁠1000, commanding the owner of this bun place to install a specific type of smoke filter as regulated. Tang and her boyfriend are glad to be contributive and to see actions being taken.
Detailed persona and scenario #3
The scenarios depicted above envisioned how enhanced drones could be used in a city to facilitate air quality related activities⁠—we can easily fly a drone to get a reading of the air quality indices, and view the data synthesized on a mobile app. Building these scenarios helped our design solution taking shape.
Forming a Solution
The idea we came up with was to integrate sensors to an existing drone, provided it could hold the aggregate weight of all the electronics, enabling the drone to measure air quality indices. The numbers would then be sent to an app, which would synthesize and present the data to the user.
Illustrating data flow and technologies needed for each step
Accordingly there would be two parts⁠—a drone and an app. This project focused on the former part since our material here was commercial drones. We wanted to focus on exploring physical computing opportunities to reinforce existing drones, rather than spreading out our energies all at once on tackling aeromechanics to engineer the drone machinery, or building a cloud to receive, host and distribute air quality data, or deploying a system to station our devices in the city⁠—these directions would each worth a separate project.
Incorporating user touchpoints with data flow and clarifying solutions needed for each step
Our long‑term strategy was to make full use of current wheels by collaborating with service providers on the market. For instance, our drones could upload sensor readings to an open‑source database instead of maintaining our own cloud. An air quality and drone management section could be integrated into an app people already have, such as weather forecast, ride sharing, bus/subway time, maps, payment, restaurant booking and other local services, since the scenarios these apps are used in certainly overlap with ours on the street.
In a parallel project, I individually designed an Apple Watch app⁠—before the first Watch launched in April 2015⁠—based on an iOS app called China Air Quality Index, which covered some of the proposals mentioned above.
Home Screen
swipe up from the bottom
Glance
raise wrist
Short‐look Notification
tap
or
remain raising wrist
Long‐look Notification
tap
Main View
tap
Detail View 1
Detail View 2
Detail View 3
High-fidelity prototype of the Apple Watch app I designed
We would like to give the drone a cloud‑like appearance to keep it public‑friendly, expressing the sincere hope that the blue sky and clear cloud would soon return, therefore decided to name it—Cloudrone.
Our sketches on appearance design
Choosing a Sensor
The way a Sharp PM2.5 sensor measures data
Once we had the general solution logic sketched out, we started making. The first part we implemented was attaching a sensor to our drone, and the first problem we faced was that the air quality was actually not bad in NYC. Although there were PM2.5 sensors available, we struggled to get a meaningful reading. We had to dial up the particulate diameter that we measured. I looked up online and Haotian met with an expert, Joseph Saavedra, for advices on choosing an effective sensor for our situation. Their meeting helped us clarify a few things about the electronics.
StructuresThe working principle of drones is that propellers push air and then get a counter‑acting force. The propellers will make air flow, which can affect the accuracy of air quality sensors. To keep sensors accurate, we may need to keep sensors about one meter away from propellers. Maybe hang the sensors above or below drones.Sensors & BoardsThere are a lot of sensors we can use to measure air quality. The Grove dust sensor is popular. There is also Seeeduino Stalker, which is small and light. Maybe they are proper for measuring dust such as PM2.5 and PM10.Air Quality EggIf we want to use it, we need to contact the company but it’s not a good choice. The Air Quality Egg is very expensive and too heavy for drones. Also, it cannot get accurate results combining with drones directly because of propellers.Data TransferArduino Yún can transfer data in a short distance. If drones fly higher or further, we may lose connection. For testing, Bluetooth is a good and convenient way. The best way is to use DJI because it can connect to Wi‑Fi and then transfer data and videos. But it is too expensive.To StartBuy the dust sensor and combine it with drones and then measure air quality. Do it again without drones to see if the result is almost the same. Design the structures based on the result.
Meeting notesSome of the microcontroller boards, sensors and add‑on modules to choose from, collaged from product shots by Sparkfun under CC BY 2.0
We assessed our options, bought a tiny carbon monoxide sensor and a compact dust sensor, wired them up and tested the results. It appeared that the dust sensor was our best choice, because it gave perceptible readings and had a more windproof enclosure. Even though the carbon monoxide sensor was much lighter and smaller, it was similarly difficult to detect the density of carbon monoxide and PM2.5 in the environments we were able to create.
As for the wireless connection, we took the expert’s advice to settle on bluetooth over heavier and more costly Wi‑Fi enabled boards or drones. We used an add‑on bluetooth module on a bare‑bones Arduino board, because we preferred separable, distributed structure to ready‑made, integrated component.
Weight Lifting Tests
Weight lifting tests with our tiny, mid-sized and large drones
Once we figured out the essential electronic components, we bound them to our drones to see if they could be lifted. Our smallest toy drone could not lift even one regular‑sized Arduino board. The mid‑sized drone would not fly higher than our knees with the load.
We had to buy a more powerful drone within our budget. The shipping took some time, but it turned out great. The final model was powered by a 7.4V 850mAh rechargeable battery, which allowed 10‑minute continuous flying. Including a 9V battery that powered the boards and the sensor, the model perfectly handled the combined weight, saving us time to potentially reframe the circuitry with smaller components.
Making a Cloud
Sewing a cloud and a droplet to encapsulate computing parts
We wanted the Cloudrone to resemble a cloud displaying the shared hope. Soft materials, such as polyester fiber, instantly came to us as a way to make a quick prototype. However, the rotary motion of drone propellers made them prone to tangle with loose fiber. We tried to turn to harder materials, considering paper sculpture, papier mâché, 3D printing with plastic filaments and plastic molding. But for one thing, it would be more time‑consuming to make. For another, it would require extra support to stabilize the electronics at the center of a hollow cloud, which would add more weight.
We focused on building a minimum viable prototype to demonstrate our concept, leaving possible concerns like heat dissipation and discoloration to a future iteration. Therefore what we needed was a lightweight shell to secure the soft materials appropriately. Felt perfectly did the trick. We cut it to shape and sewn the edges together, enveloping all the components inside with a velcroed opening reserved for recharging batteries.
The dust sensor needed to be placed away from drone propellers. We drew inspiration from a precedent project and found it easier to hang the sensor below the drone. The wires between the board and the sensor were lengthened, twisted together and protected with insulating tape. We spray‑painted the body of Cloudrone to be bright blue and white⁠—the colors that were easily recognizable in a smoggy background. To keep the shapes in line with the colors, we used light blue felt to form a droplet silhouette as the enclosure of the dust sensor, with a length of transparent plastic straw clearing the detection hole.
Proof of Concept
The final Cloudrone prototype
Cloudrone is an accessible, drone‑powered, semi‑stationary air quality monitor.
We believe in the value of deploying Cloudrones to make a social and environmental change. On city streets, a Cloudrone would serve as both a static measuring station and a mobile data collector.
Static mode
Statically, we envisioned to set up Cloudrone stations at existing bus stops, bikeshare stops, subway exits, gas stations, convenient stores, outdoor drinking fountains, news stands, telephone booths or Wi‑Fi stations. These places were economic choices that could provide shelters and supply power for Cloudrone, and had already had their own widespread network in cities.
Mobile mode
When people suspect harmful gas release in the city, they can easily control Cloudrone to measure the air quality indices at specific sites, such as a place close to a restaurant’s chimney, near a car’s tailpipe or around a construction site.
This dual‑mode implementation would engage the public with new technology while improving their sense of trust and responsibility on the environmental issues. All the data Cloudrone collects would be open‑source, which could be synchronized to a public database, and reported to monitoring departments.
MOFAD City was a multimedia collaboration between the Museum of Food and Drink, a nonprofit that is creating the world’s first large‐scale museum with edible exhibits, and Eater, an online network of food news and dining guides by Vox Media. The project told the stories of food cultures in 8 US neighborhoods through website, videos and brochures.
With their collaboration came to an end, my client MOFAD needed to transfer the contents from the collaborator's domain, eater.com/a/mofad-city-guides to the museum's own website, city.mofad.org so that viewer traffic would be kept in‐house.
It was also during the extended period of MOFAD's celebrated exhibit, Chow: Making the Chinese American Restaurant. Therefore, the Chinatown section was prioritized as a Minimum Viable Product over the other 7 neighborhoods, aiming at promoting the shared topic and extending audience's journey from the museum space to online communities.
The museum panel that introduced the MOFAD City 1.0 project
Client’s Goals
transfer contents
retain web traffic
extend visitor journey
translate intoDesign Requirements
contribute to content audit
use MOFAD’s brand guidelines
echo with physical exhibition
break down toActionable Steps
receive desired framework draft from PM
evaluate information architecture
assess all the available assets
identify useful asset candidates
make suggestions accordingly
confirm copyrights
study existing guidelines
decide on main colors from predefined palette
review previous branding materials
test type hierarchy
examine exhibition spaces
identify representative elements
explore opportunities to make cultural connections
sketch out, propose and revise
design a tangible and economic takeaway
Dissecting client's goals into actionable steps
Pushing Forward
As I was taking in the requirements and resources, I pushed for retrieving user data of the old site from the previous collaborator. Unfortunately, we hadn’t gotten any fruitful results. However, I took the opportunity as I frequented the museum as an exhibition docent and culinary design assistant at that time, and initiated a few interviews with visitors and staff, who made a good sample of the target user. My strategy was to engage my interviewees with a task:
could you pick a dish you would like to try in Chinatown, and find out the address where it is served from this site ?
From their reactions, I summarized three pain points of the old site.
Long Bottom Navigation
A banner link at the bottom of a long scroll is a way to prompt the readers with more content to follow, and to keep them stay longer. But 4 links, taking up more than 2.5 folds on a desktop screen, can be difficult to correlate.
Not to mention, each of these links points to another long scroll. The corresponding four pages are organized by content topics⁠—history (Learn), dishes (Eat), places (Visit) and audio clips (Listen). At the end of each topic, the other three links reappear.
The alternative navigation on the page is hidden away, so these banner links essentially serve the purposes of recommendation and navigation. This part caused confusion among my user interviewees. In one case, a user lost interest in the middle of a long scroll, never got to the bottom links, and was stuck on the page with no choice but to return to the homepage.
Chinatown
Learn
Eat
Visit
Listen
Long navigation at the bottom of old site pages
Missing Content
Sorting out the old site’s contents and mapping them into a table, I discovered 5 situations of content interrelation.
There was only one entry that made a consistent connection among a dish, a place to taste the dish, and an audio clip that told the related story. The other 4 situations posed questions.
missingmissingcheung fun noodle cartcha chan tangping's dried beefnom wahasia market corp.yung sunhop lee
Listen = 8 audio clips
missingmissingcheung fun noodle cartcha chan tangping's dried beefnom wahasia market corp.yung sunhop leecontent interrelation1dishes are introduced but there is nowhere to taste2places are featured but there is no recommended dish to order3the only consistent entry4two places link to the same dish5two dishes point to the same restaurant ➔ eg.The first two situations involve missing content⁠—filling them in can help completing the information logic.The last two situations require some careful handling of the way elements are linked.
Mapping contents from the Eat, Visit and Listen pages of the old site, and uncovering their interrelation to locate problems
Chaotic Linkage
Let's consider the following scenario:
1A user became interested in a tofu dish when browsing the Eat page, and wondered where the place to taste this dish would be.
2A link took our user to the Hop Lee restaurant section of the Visit page.
3However, as the user continued reading about the place, the contents got confusing because there was no mention of tofu in that section, but a prompt to another dish that took our user back to the previous page, but a different section.
4From there, this second dish did not provide a link back to its corresponding restaurant. Instead, it promoted an audio clip that introduced the place.
5The hash‐linked section on the Listen page presented a link back to the restaurant on the Visit page.
EatVisitListena disha placean audio clip
another dish
where to eat?what to order?learn more?where is the person talking about?
Illustrating an example of chaotic linkage where two dishes point to the same place
In this scenario, jumping around different sections of a page and between different pages produced a recursive and fragmented reading experience.
The place section managed to maintain a complete interrelation with the audio clip section, only through the second dish. Curves 2345 were all one‐way links that provided no indication of the orientation for users.
These prescriptive linkages the old site employed resulted in a linear narrative which our users easily got lost in. A clearer content structure was called for.
Proposing Solutions
To tackle the three pain points mentioned above, and to answer the following question:
how might we redesign mofadcity.org, to clarify the narrative structure of food experiences ?
I proposed these solutions:
turn the Learn page into a dedicated history page
break up Eat, Visit and Listen, and consolidate the content around each place
fill in holes, and coordinate the copy for 12 places
Outlining the old site structureDeriving the new site map
Mapping Structures
By detangling the information architecture, I derived a new site map that was concise and straightforward. Then I sketched out initial ideas and played with shapes that resonate with the museum space.
Sketching out initial wireframe for each page in the new site map
Diverging and Converging
Navigation evolution: extracting symbols
To name one challenge I faced when implementing wireframes, it was the search for cultural symbols that could resonate with the exhibition and also serve as website navigation. Signs, lintels, plaques, lanterns, firecrackers, and Chinese knots ... came to my mind.
Navigation evolution: reviewing candidates
It appeared to be a challenge because my client disagreed with all the candidates I explored. They were thought as being too cultural for this one of the 8 neighborhoods and thus lacking generality. This feedback was valuable to me in better understanding my client’s mission, instrument and content.
Navigation evolution: diverting exploration
Accordingly I adjusted my direction, looked beyond Chinatown, and dropped most of the ethnic specifics. But this process of divergent exploration had helped me converge on the generic goal of this website—⁠to inspire diverse audience with different content—therefore, a middle ground was needed.
From the octagonal box of an electric firecracker, I eventually came round to the ubiquitous stop sign. It was created in the States and adopted around the world⁠—it’s common enough to be recognized, and had connotations of intersection, indication and navigation.
Iterating
Similarly, I diverged and converged on many iterations of page layout for mobile and desktop screens. For instance, I tried metaphoric visual element to convey connection, varying sizes to prioritize important item, bare display to list calls to action of equal significance, and reminiscent composition to maintain content continuity.
Either were overthrown from my drafts or vetoed by my client, the mockups above culminated in the versions below. These screens constituted key prototypes in the final deliverables.
Key prototype iterations on both mobile and web screens
On a micro level, I tested various designs of modules, components and even map styles generated by JSON files.
The versions above culminated in the final deliverables below.
Debating and revamping several micro sections
Interactive Prototype
The interactive prototype created in Figma
The final design was delivered for hand-off using Zeplin with all the parameters and assets in place, and also as an interactive prototype where user flows were intuitively laid out.
Design System
To formulate a design system for this project, I employed most of the preexisting brand guidelines to stay in accord with my client’s other visual establishments.
A red solid logo in its micro version with text on the right upon a transparent background became the finalist from the MOFAD logo family.
A map pin icon was extracted from the MOFAD City logo and remade with numbers to signify the core offerings of this website.
Full‐bleed homepage video was editted accordingly to bring out audiovisual content at first sight while reducing the loading time.
web
mobile
The key typeface was fully exploited by relying on its weight variation to form a frugal type system. A type scale was first devised for a general web layout, including desktop and tablet screens, and then remodelled for mobile screens.