I do everything on my single MacBook Pro. While my life quite literally depends on this amazing machine, I keep my workflow simple. There are only a few app which I use and love.

Web Browser

I use Safari as my web browser. It is fast, elegant, and it keeps everything synced across Apple devices. On Safari, I have two extensions installed: AdGuard to block ads and Grammarly to help me write better.

In fact, I made the switch from Chrome because its design matches better with macOS — Chrome’s material design title bar feels cluttered and takes up too much screen space. Other things I love about Safari are

• Continuity support across my Mac, iPhone, and iPad
• Sign In with Apple and Apple Pay support
• iCloud support for bookmarks, reading list, and etc. I especially love its password manager, which generates unique passwords for sites and keep them in sync across devices for sites and apps
• Picture-in-Picture support, which allows videos to be played on top of other work. Tip: on YouTube, right-click twice to show option for this

However, I do use Chrome when doing web dev work, as it does have more extension options and has more helpful web inspection tools.

Music

I use Spotify for music and podcasts. Spotify’s Connect feature made it super easy to jump around all my devices, including Alexa, PS4, and smart TV. No other music platform provides this convenience.

It is pretty obvious that their macOS client is made with web technologies, which means it’s easy to hack since the front end code is not compiled before serving to the user. I used spicetify-cli (“the tool”) to inject custom CSS stylings to Spotify’s CEF core and made the app match better with macOS colors and design. Here are the steps I took to achieve the look.

In terminal, run these two commands to install and initialize the tool:

$ brew install khanhas/tap/spicetify-cli

$ spicetify

Then, open the spicetify_data that’s created in the directory where you ran the commands. In config.ini, set current_theme = macOS and inject_css = 1, which tells the tool to inject our custom styles into Spotify. In the Themes folder, create another folder named macOS, then create a user.css file in it.

Finally, copy my CSS code from here and paste it in user.css. Save the file, then, in terminal, run:

$ spicetify backup apply enable-devtool

Voilà! Spotify should start up looking fresh!

Email

I don’t use Superhuman, HEY, Spark, or other fancy email apps. Instead, I have Gmail Desktop. It’s a simple open-source Gmail client that runs constantly in the background, which means email notifications get delivered in real-time.

I find Gmail powerful enough and has all the features I need. I also like that it delivers the same user experience across devices. Here are the features I love:

• Accurate “Important” filter
• Single-click unsubscribe button that works for almost all marketing emails
• Snooze feature that works across devices
• Schedule Send
• Smart Compose that helps draft emails
• Native Google experience that integrate with other Google Services, like Meet and Contacts

With these features I am able to brief though every personal email and reach Inbox Zero everyday.

Calendar

I use the calendar app that comes with macOS to organize all my events. I had it synced to Google Calendar and set the refresh interval to 1 minutes so updates are fetched constantly.

I used to use Fantastical but left since it switched to a subscription pricing model. In fact, I’ve discovered that I love the native app more as it’s got a way better notification system that says “in ___ minutes” dynamically according to current time. It also has more snooze options. Third party apps can’t have these due to macOS’ limitations.

Code Editor

Visual Studio Code is my code/text editor of choice since it’s fast, powerful, and insanely customizable. Almost all my development works are done within VS Code. The best thing about it is its huge library of extensions that help speed up the development workflow.

I customized it so that it matches with the colors and design of macOS. For the theme, I use macOS Modern, which has light and dark modes that match Xcode’s design language. For the font, I had it set as “SF Mono” with a line height of 16. For the icons, I use Material Icon Theme which provides a extensive range of icons for almost all file types.

Terminal

All developers need a kick ass terminal. For me, iTerm has been the winning choice without doubt. I customized it so that I can spend less time on the command line.

I use Zsh as my primary shell and had the Oh My Zsh framework installed alongside it, which provides even greater customization freedom and plugin support. One of the plugins I love is powerlevel10k — it makes the interface more enjoyable. I use the SF Mono Powerline font so that my terminal shows nerd-font icons with the beautiful SF Mono font. Other plugins I love are zsh-syntax-highlighting and zsh-autosuggestions, both drastically speed up my development workflow.

Design

Sketch is the only digital design software I use. I love that it is truly native to macOS and has outstanding performance. It also has Sketch Cloud sharing feature that enables me to easily share design specs and assets with developers.

Sketch has an extensive library of plugins which I find helpful. My favorites have been the Artboard Manager, Data Populator, and Unsplash. It also has official design libraries from companies like Apple that’s constantly updated, and it’s helped me greatly in designing apps that follow the Human Interface Guidelines. It works great with the SF Symbols app as well.

Screensaver

Currently, I use the JW.S® screensaver, which displays absolute gorgeous imageries from Jon Way Studio. The images are so stunningly beautiful, I had them displayed for up to 3 hours after 2 minutes of idle time when my Mac is connected to the monitor. I have it on for so long because I had the monitor beautifully mounted to the wall, so when the screensaver is in display, it’s like a framed picture that changes dynamically!

Other beautiful screensavers I enjoy are Aerial and Padbury Clock. There’s also the screensaver which I built that displays the same content as on my university’s Engineering campus bulletin boards — it helps me keep up with events news while at school.

Utilities

There are a few more utility apps I use to help me boost productivity. These are usually hidden away and can only be access by keyboard shortcuts. I try to use only open source apps for these so I know they are using my data the way it’s intended to be used.

• KeepingYouAwake for preventing macOS from going to sleep for a set amount of time. Great for when in a presentation. It lives in the menu bar and is super simple.
• Paste for keeping past clipboard history. I use it all the time, especially when developing. It’s not an open source app, but it’s the best clipboard manager I’ve found. Simple and beautiful.
• Rectangle for quickly resizing windows. I only had three options enabled: centering window and aligning window left or right.
• IINA for playing all types of media files. It is open source and just as powerful, if not more powerful, then VLC. It’s got great subtitle support and has a beautiful, minimal interface.

I have been actively pursuing a minimalist lifestyle for a few months now, eliminating the unnecessary and keeping only the essentials. Reducing clutter on my digital workspace has allowed me to become more productive and focus on what’s truly important. I sure hope this article was able to provide you with some new insights!

My Minimalist Digital Workspace was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.

The room is a work of heart — it is full of things I love and care about. I wanted to make it personal, make it a space where I’d feel safe and at home being in. I also wanted it to be minimal yet aesthetic, having as little things as I’d need. Some features of my room include…

Full of Disney Pixie Dust

12 historical Disney Park posters collected, digitally restored, and printed by myself, as well as a 3D printed Haunted Mansion plaque — can you find where it is in the pictures?

Alexa Digital Assistant Powered

“Alexa, I’m home” turns on lights and TV, starts playing songs I like, and turns off fire alarm and window break detection. I can also ask her the weather, ask her to send books to my Kindle, or ask her to sing a duet with Ed Sheeran.

Background

I have long been a huge fan of Disney Parks around the world. My first Disney Park experience was when I went to Hong Kong Disneyland back in elementary school, then Tokyo Disneyland later. But I didn’t fall in love with Disney until the third visit in 2014 — During my high school exchange year, my host family took me to the original Disneyland in Anaheim and the Disney California Adventure Park. I was completely immersed in the stories Imagineers crafted throughout the park. The light, the music, the experience — everything was just so magical.

I started getting crazy about Disney Parks. I spent countless hours browsing through Wikipedia, Disney-Fan Forums, and YouTube to learn about the history of Walt Disney and his parks; I digitally collected hundreds of gigabytes of Disney Parks’ music and sound effects and borrowed official books written by Imagineers to hopefully see some behind-the-scenes of how they made the magical experiences.

During the summer of freshman year, I visited Tokyo Disneyland and DisneySea with my family, and a year later, we visited Disneyland Paris and Walt Disney Studios Park for the first time. My experiences were supercalifragilisticexpialidocious, I was in love. Then a thought came to my mind… I was just about to move to a new dorm room, what if I can bring this Disney magic with me…

Disney attraction posters have been displayed in the parks to build Guests’ excitements since just a year after Disneyland opened in 1955. These colorful posters can usually be seen just after Guests walk through the park entrance gates — as the sound of joyful music pipes across the promenade and the smells of popcorn waft through the air, the posters greet the Guests with a warm welcome, and provide them with the information about the newest rides in the park.

I first encountered these posters when I accidentally found the book Poster Art of the Disney Parks at a library. It talks about their historical significance and the stories behind many of the most iconic posters. As Disney Parks develop and expend around the world, the artistic styles of posters have also changed. Yet, every single attraction poster was carefully crafted by Imagineers, as they begin telling the story of each attraction even before Guests have entered the queue area.

The attraction posters truly have a special place in my heart. They greet me welcome, and they wave me goodbye. Therefore, when I was brainstorming how I should design my new room, I decided that Disney attraction posters should be the main theme.

However, it is not easy to acquire these gorgeous pieces of art. They are mostly only displayed in the parks and on books, with a small number of designs sold officially as art prints by Disney. Yet, these prints have to be purchased physically in the park, and they are limited only to certain attractions, sizes, materials. Realizing that my options are extremely limited, I decided to print the posters myself, so I can choose to display only the ones that are the most significant to me.

Digitally Restoring Historical Posters

It took me weeks to get the assets needed for poster printing. Most of the Disney attraction posters are over 30 years old, and they are usually not available anywhere, even as digital files. To find these digital poster assets, I spent days digging blogs and websites created by fellow Disney enthusiasts, I even rented and scanned books that contain printed images of the posters.

After a long process, I was able to get the digital image files for about 70 posters. However, many of them are very small in size, and what’s even worse, most of them have terrible color accuracy. They looked nothing like the posters I saw in the parks. I knew more work has to be done to get them close to printing quality, so I took on a challenge — to digitally restore and enhance these image files of historical posters to their original states. There were a few steps to this process…

Step 1: Enhancing Resolution with AI

Small images will look blurry when printed on a large poster, so enhancements have to be done. I used Let’s Enhance to scale up the image with artificial intelligence. Comparing to sharpening the image in Photoshop with Bicubic Interpolation, it enhances the image with the knowledge it’s learned from analyzing a huge dataset of other images. Although it’s primarily built for photos and not really for poster arts, I found that it worked quite well nonetheless. That being said, I did do some more tweaking in Photoshop.

Step 2: Correcting Colors

This is the primary and most annoying part of the process. Correcting the colors of an old file is very challenging, and it’s even harder without the right color references (a right color reference can be the official Poster Art of the Disney Parks book, a photo I took at the park of a poster, and etc.). Many of these files from online are compressed, so they only carry just enough color info, which means tweaking the colors too much may cause the image to lose details, so I had to be careful.

Each poster took me at least an afternoon of time — I played with the tone, contrast, levels, curves, exposure, vibrance, hue, saturation… you name it. For posters that I have a good color reference for, I usually start with the color matching function in Photoshop. But even with that, the colors are still far from accurate. This is a process of trials and errors, and I can’t really provide instruction on how to best do it since every file is different. Do prepare to sit down for a long time though…

Step 3: Correcting Angles

Most of the files I found online are the scanned images of past magazines or books that are no longer on the market. Since they are scanned, the sides and angles are often aligned incorrectly. I manually adjusted them with the crop and skew tools in Photoshop and used content-aware to expend the border a little, so that there is enough bleed around the edges for printing.

Step 4: Fine-tuning Final Details

Eventually, I just had to do a final, detailed check of the images to make sure they’re up to poster-printing standards. I used the spot healing tool to clean up the images and made sure every poster has the same amount of bleed (border) so that when they are printed and aligned side by side, they have the same height. I also replaced some Disney Parks logos with the vector versions, since they contain small texts and they’ll most likely be noticeable when printed on large posters.

And the process of digitally restoring digital files is done! It is time-consuming, but when I look at the folder with all the super-high-resolution images with beautiful colors and fine details, all the efforts were worth it for sure. I sent a total of 12 Disney attraction posters to print on flag fabric, 10 of them have a size of 60 x 95 cm (which I knew would fit a ceiling tile perfectly), and the other two are 90 x 150 cm. I had to communicate to the print shop that’s based in China to carefully make sure the size, style, and border finish are correct. Thankfully, they turned out perfectly.

Putting the printed nylon Disney attraction posters up is challenging. I had to push the ceiling tiles up, stick the posters in, secure them with tapes, then carefully put the ceiling tiles back in place, all while making sure all posters have the same height and space between them. When that’s done, I had to iron them to minimize wrinkles and make them stick to the wall. It took me a few days, but all those efforts were definitely worth it, as the end result did turn out very well.

“To all that come to this happy place, welcome.”

— Walt Disney, 1955

A Little Extra Touch

Almost everything in my room is internet-connected and Alexa powered — the lights, the TV, and the speaker. By simply saying “Alexa, good morning,” she’d turn on lights, start playing music, and make me breakfast (feature still in works).

I also care a lot about lighting, as the right lighting can truly influence my mood and productivity. When I study, I will have my lights in daylight color, and when I do anything casual, like when I play Mario Bros on my Switch, I’d have them in purple and magenta — my favorite colors. Connecting all these devices to the public campus network took quite a while, but when they’re finally set up, everything just works like a charm.

The End Result

I love my room, I love everything in it that is personal to me — the Disney Parks attraction posters, the little figures I’ve collected from around the world, the pictures of my family and I when we visited Disney Parks… they each tell a story worthy of a book. This space is truly personal, and while I am away from home in college, I feel at home being in here.

Emily and I wrote this article together, we thought that it’d be nice to share what we made and why we made them. We are confident that our solution is a good first step to solving the problems presented, which I will describe shortly.

The BuiltWorlds hackathon is a competition that focuses on solving the “built world problems.” That is anything affecting the world we live in — namely, our cities, buildings, and the underlying infrastructure. Our team already has a general understanding of the construction industry and its practices, so we felt quite confident about this hackathon.

We all strolled into Roosevelt University in downtown Chicago for the hackathon and marveled at how this one building, our main habitat for 36 hours, was nearly an entire college campus. Upon filing in the semi-crowded auditorium, we attentively listened to the three challenge prompts posed by the company sponsors of the 2019 BuiltWorlds Hackathon: Clayco, Autodesk, and Caterpillar Inc. Specifically, Caterpillar proposed the problem of not being able to effectively analyze the usage and wear off their machinery across construction work sites.

Drawn to Caterpillar’s issue and knowing we had some background in image analytics, we chose to accept Caterpillar’s challenge and immediately started talking to the Caterpillar team about potential solutions. This is also when we met Emily, the only person on our team that isn’t already a part of DeepWalk Research — Emily didn’t necessarily have the technical chops but she was very knowledgeable about the enterprise applications and presentation design due to her extensive venture capital background and prior hackathon experience. This complemented Brandon’s skills so in the end, we became a mighty team of 6.

With such a big problem at stake and knowing we had to use machine learning (“ML”) and image analytics, we needed to break the tasks down, based on what data we had. In this case, we extensively looked at existing surveillance video feeds of Caterpillar excavators at construction worksites. Brandon pulled out his erasable marker and wrote on a clear board the main types of the excavator’s actions which we can potentially analyze: moving, raking, and scooping. We decided to tackle one action first, namely scooping, as it was the most feasible for the limited amount of time we had for training ML models.

We collected a considerable amount of Caterpillar worksite videos from multiple sources. Now we had to annotate our image frames, choose our machine learning algorithm, train it on our image dataset, and test our trained ML models. After annotating hundreds of images across multiple videos of construction worksites, Anshul started training our model via YOLOv2. After a couple of hours of training, we started encountering multiple memory and storage problems with the EC2 instances we had on AWS. The problems eventually culminated and unfortunately broke the remote server…

While the team wrangled on the technical implementations, Brandon and Emily started brainstorming business applications for our solution. It was imperative to not only have a working prototype but to underscore its tangible business value to Caterpillar’s customers.

Essentially, the business case boils down to this question: How could we translate basic information like the number of excavator scoops per set period of time into productivity metrics like overall worksite efficiency? A logical metric was the project progress in terms of total cubic yards moved per day. We knew this metric was key for managers adhering to project timelines, as missing deadlines resulted in millions of dollars in construction claims per year.

Another metric that was of high importance to Caterpillar was machine health, as machine breakdowns can cost up to $180,000 per incident. The number of scoops was a factor in a predicted time modal for maintenance and repair. Lastly, we could measure operator productivity based on the volume of dirt moved.

A quick LinkedIn message to Dan Reaume, Chief Analytics Director of Caterpillar, confirmed his interest in being able to collect the raw data on scooping and its associated productivity metrics. Now that we had these 3 productivity metrics, the most intuitive way to visualize them was an online dashboard. Our dashboard would have 4 panels: 3 of the productivity metrics and 1 with the video of our working machine learning algorithm.

As the other team members continually worked on fixing the back-end algorithms, I decided to take on the front-end task. In order to present the complex data that we collected and analyzed, I created an intuitive online dashboard for users to view the data in real-time. I made sure that the online interface is intuitive, user-friendly, and mobile-friendly so that even workers on the construction site can access it easily and see the information quickly. I drew out some wireframes for the dashboard and started bringing it to life.

We got back to our Airbnb not long after. In the wee hours of the night, the team eventually decided to leave behind out trained YOLOv2 models, and switch to Mask R-CNN as time turned into a big concern. Fortunately, it worked like a charm. Although we still hadn’t figure out just what the issues were with YOLOv2, at least we had some working models.

By the end of Saturday, we had completely switched from YOLOv2 to Mask R-CNN for training our ML model. As things started to work again, we celebrated a little with the bottle of (cheap?) wine we were given at our Airbnb… We played some darts, watched some Netflix shows, and had a really good time together. We also wrestled with team names and settled with DeepScoop, representing our affinity and perhaps slight geekiness for Deep Learning. There was no going back now.

On Sunday morning, a mere two hours before noon, we finally managed to have a working video of our model successfully detecting the number of scoops of the Caterpillar excavator. Phillip incorporated the video and training data into our completed DeepScoop dashboard. Meanwhile, Emily had hammered out a sleek pitch deck. With an hour before the 12 pm deadline and knowing everyone had to present, Emily would begin by describing the key metric of productivity for construction companies: project timelines, operator efficiency, and machine health. All these factors were necessary for maximizing productivity and reducing unplanned downtime.

In just 36 hours, we built a solution called DeepScoop, and it uses Machine Learning technology to transform surveillance video feeds into informative insights and empowers machinery manufacturers like Caterpillar with powerful analytics data.

At its core, our MVP solution counts the number of scoops of excavators from surveillance video feeds and analyze them based on time-frequency and other metrics. These seemingly normal videos were transformed into quantitative metrics via our dashboard, allowing worksite workers to view complex analytics data that doesn’t usually get seen with human eyes.

Our final presentation at the hackathon was smooth sailing and we saw that the judges were intrigued. When asked about including other factors in productivity, Brandon answered that DeepScoop could incorporate weather data, the number of on-site construction workers, the amount of building materials, and so much more. Counting scoops was just an early start to solving this big, complex problem — it’s only a proof-of-concept, a barely feasible minimum viable product (MVP) we came up in the very limited amount of time we had.

After our presentation, we all felt very uplifted. We had all put our best, valiant efforts and were happy no matter the outcome. To our greatest delight, we actually won the hackathon! Right before they announced the winner, Dan Reaume said that the winning team “did not bite off more than they can chew by effectively presenting a small piece of the puzzle to a larger issue” — at that moment, I knew they’re talking about us! We were all indeed very happy about this positive outcome.

The great part about the hackathon is that we conversed frequently with the Caterpillar team, learning how they leverage the powerful services AWS offer for their digital services and platforms. We were fascinated by their innovative strategies with analytics platforms, autonomous vehicles, and drones to revolutionize the $10 trillion construction industry.

We celebrated with a meal at Gyu-Kaku, an authentic Japanese BBQ restaurant. We were all very thankful for the opportunity to attend BuiltWorlds Hackathon. I met so many people from different industry areas and learned a great deal this weekend, so I couldn’t be happier. This was the third hackathon that I’ve attended in my college career, and I am confident to say that it’s perhaps the best one yet.

This article was written by Philip Kuo and Emily Kuo in collaboration with Anshul Shah, Vishal Narasimhan, Quang Tran, and Brandon Yates, who were all a part of the team.

看我們在 Hack4Impact 如何透過系統化的「介面 UI 設計」、「使用者體驗 UX 設計」與「用戶研究」，打造一個人性化的應用程式，幫助使用者決定選擇行走哪條道路最安全。

在幅員廣大的美國校園，行走回家難免需要路經陰暗的街角。在夜間走在這些道路上，常常令人感到可怕。事實上，美國國家犯罪受害調查報告顯示，63.2% 的性侵害案件都是在入夜後發生的，而且大多時候，受害者都是獨自一人。

挑戰 Challenge：讓我們來解決這個問題

我於美國參與的非營利組織 Hack4Impact 的團隊看見了這個問題，並想試試著改善它。我們希望學生走路回家不應該擔心被侵害；我們想要降低針對「獨自一人」的行人下手的罪行。我們的做法是希望能提供行人一些關於他們身邊環境的有益資訊，以便讓他們在選擇行走哪條道路時，能做出更明智的決定，選擇最安全的道路。藉此，讓他們能更安心的於夜間在戶外行走。

我的角色

在這個專案上，我的角色是 UI/UX 設計工程師。事實上，我是伊利諾伊大學 Hack4Impact 團隊史上的第一位使用者體驗設計工程師呢！在這個專案上，我負責的是產品的「使用者體驗設計（User Experience Design）」與「用戶研究（User Research）」。我們團隊有 8 個人：一位團隊領導、一位技術領導、四位開發者、與兩位設計師：分別為我（使用者體驗設計領導）和 Annie Wu。在一學期間，我們密切的合作，最終建立了一個以人為本、以使用者為設計中心（User-Centered），並具高保真度（High-Fidelity）的展示原型（Prototype），提交給客戶。

痛點 Pain Points：認識問題是什麼

目前，網路上是有提供一些資料可以讓人更明智決定選擇行走哪條道路，例如過去案件地點或緊急公用電話的位置。但是，當人們想要使用這些資料來選擇行走路徑時，會遇到不少問題：

• 這些資料都存放在一些電腦版網頁或 PDF 檔案上，很不適合用手機瀏覽
• 目前沒有一個將各種資訊整合的頁面，因為各機關皆有自己的網站
• 網站上的資料可能是以文字方式呈現，使用者需要自行將資料轉換到地圖上，才能找出確切位置，頗不方便
• 剛入學的新生不知道於何處存取這些資料

「資料都在，但太分散了，很難友善利用。」

需求調查 User Needs：了解他們想要什麼

我們團隊在專案的早期計劃階段時，即一致下定了幾個本專案的目標。這些目標很重要，因為它們很可能可以有效解決上述的痛點。我們希望我們的解決方案：

• 可以整合各種現有的資料，並提供使用者一個中央平台存取這些資料
• 必須以手機程式（app）的方式呈現，這樣使用者到哪都可以存取資料
• 使用者必須要可以很快找到他想看到的訊息
• 這些資料要有效地被呈現，讓使用者能很容易理解它們，不用額外學習東西
• 介面的設計必須直覺、簡單，因為這個程式可能會在緊急情況下被使用
• 介面的設計必須適合讓這個程式在夜間被使用
• 任何使用者，不論成長背景，都應該能感覺介面的設計和他們已熟悉使用的程式沒有太大的差別

設計過程 Design Process：從打稿到交件

用戶研究

用戶研究（User Research）是我們開發過程中不可或缺的一部分，因為我們的客戶是一個非盈利機構 Cut to The Case，而他們的願景是希望這個程式能以「使用者」為中心做設計。在專案初期，團隊還在思考設計概念時，我們即採訪了大學當局，以更好地了解目前校園的安全狀況。藉此，我們獲取了一些很重要的資料，例如校園免費安全接送巴士 SafeRides 與隨行服務 SafeWalks 的用戶族群統計資料。

「天黑後，大多的乘客皆是國際學生，從圖書館進行接駁。但是到了午夜後，大多乘客則是從酒吧來往的學生。」

線框圖

在線框圖（Wireframe）上，我們選擇設計一個地圖介面，作為這個程式主要的介面，讓使用者可以直接在上面取得各式對他們有幫助的資料。這些資料的來源會直接從上述的各個不同網站取得。我們花了好一段時間才決定該如何展現「選擇要顯示的資料類型」這個選單（例如：顯示「過去案件地點」但不顯示「緊急電話」等等）。最終，我們決定用使用者能上滑顯示、下滑隱藏的「卡片」的形式呈現，因為：

• 根據一項調查大多人使用手機的手勢的研究顯示，卡片式的介面比起其他選項，例如三橫槓的「漢堡」式選單，來說，對使用者更方便。由於我們希望使用者能在最短時間內取的他們要的資訊，這個很重要
• 卡片式的介面的設計和大多人已經習慣使用的程式有類似的設計，例如 Google 與 Apple 地圖皆採用這種設計。藉此我們可以確定新使用者不會對我們的介面感到太陌生

線框圖提供了我們團隊一個大致的設計參考，讓他們更好進入開發階段。同時間，我和另一位設計師也開始了針對線框圖的「使用者訪談（User Interview）」與「可用性測試（Usability Test）」。

使用者訪談 與 可用性測試

我們參考了使用者訪談（User Interview）與可用性測試（Usability Tests）的結果來改進現有的設計。

「想像一下，夜黑了，而你必須自己走回家。你身旁沒有人，而且附近一片漆黑。你會怎麼做來讓自己感覺到更安全？」

這是我們在針對線框圖的使用者訪談中，詢問被訪者的第一個問題。在他們回答問題後，我們簡單介紹了一下程式的大致概念，並詢問他們是否有會有興趣下載，和是否有對我們想法的建議。最後，我們進行了可用性測試；我們讓被訪者實際與互動式的線框圖原型做互動，並觀察他們的操作行為。

「如果路上有其他大學生的話，我會即使走在比較危險的區域，也會感覺安心很多。」

進行訪談時，由於考慮到來自不同背景的使用者可能會習慣不同的設計，我們會盡量尋找不同族群的使用者進行訪談。我們希望這個程式能讓所有使用者都感到熟悉與親切，不要和他們已經習慣使用的程式在設計上有太大的差異。我們訪談了一位大一女生、一位大一男生、一位大三學生與一位國際學生，而每一位在可用性測試時皆能順暢的操控互動線框圖原型，幾乎不需要我們輔助，可說有達到我們的標準！訪談時使用者推薦的一些所需功能有（1）加入公車資訊和（2）加入緊急要撥打電話的按鈕。

視覺稿 0

視覺稿（Mockup）0 是由線框圖演進而來的，演進期間我們討論了該如何呈現地圖頁面上單一圖標背後的詳細訊息；意指，當使用者點擊了地圖上的圖標後，顯示詳細訊息的介面該怎麼被呈現？我們做了個艱難的決定：同上述「資料類型」選單使用卡片式介面。我們考慮了很久，因為怕使用者會對多張卡片感到困惑。但是，如果螢幕上永遠只有一張卡片，則會非常直覺。使用者看到不是「資料類型」選單卡，就是「詳細訊息」卡，後者若要顯示，則會覆蓋前者（可透過「x」關閉）。兩者不會同時出現。

視覺稿 1

這個視覺稿容納了所有在線框圖可見的頁面。我們使用深色圖片作為歡迎頁面的背景，因為設想到大多數人會在晚上使用本程式，不希望因為顯示過亮的頁面而讓使用者感到不適。

視覺稿 2

在這個視覺稿中，我們加入了一些使用者在訪談中推薦的功能，其一即是撥打電話的捷徑。要在這個原本只有一個功能的程式中加入新的功能，我們必然需要做一些大幅度的改變。一開始，我們是希望在頁面左上方加入「漢堡」式的選單，讓使用者可以開啟選單，選擇電話捷徑功能並撥打。但是，這樣的設計不符合 iOS 系統（我們當時優先考量的系統）的 Human Interface 設計規章，而且這設計並不符合大多人使用手機的手勢。

我們最終決定在頁面底部加了一個選單標籤，供用使用者切換卡片的選項。這樣的設計能提供最直觀的操作流程，同稍早闡述的原因：由於畫面上只會顯示一張卡片，使用者要不是在「資料類型」選單卡或「詳細訊息」卡，就是在「電話捷徑」卡，三選一。這樣，使用者較不會因為畫面資訊過多而被混淆。

同時，我們還更改了「詳細訊息」卡上資料被顯示的先後順序，因為我們希望使用者能最優先看到對他們更重要的訊息。 例如：我們在訪談中了解到，使用者大多認為「確切案件地址」比「案件類型」更重要，因為使用者通常都會選擇避免所有類型的案件。

「我喜歡你們把『詳細訊息』卡上的資訊歸納的這麼乾淨，讓我一目瞭然！不過，如果能加入該案件『是否有涉及學生或教職員』的訊息更好。」

視覺稿 3

我們把卡片的背景改成非半透明的，這樣使用者能更清楚的區分畫面上的卡片區域與地圖區域。我們同時還擇使用紫色作為程式的主要顏色，因為研究證實它可以平息心靈；可能有助於處於緊張心境的使用者。

視覺稿 4

在先前多次可用性測試中，我們發現有些使用者，尤其是國際學生，會直接跳過所有的歡迎頁面，不閱讀頁面上的文字。他們説這些頁面上的字太多了，而且以非母語呈現，並沒有吸引力讓他們停下來閱讀。 為解決這個問題，我們重新設計了這幾個歡迎頁面，並將它們整合成單一一個介紹頁面，並僅顯示最重要的訊息。我們還大幅減少了文字量，並添加了更多視覺元素及動畫，以吸引使用者留下觀看。

另外，我們在主要頁面上的各卡片上加入了標題文字，以幫助使用者區分它們。

解決方案 Solution：最終設計成品

互動式原型

經過多次的設計改良、使用者訪談和可用性測試後，我們使用 Sketch 設計程式建立了一個最終的、具高保真度的可互動原型（Interactive Prototype）。

這圖片顯示了我們程式原型的關鍵導航流程；另外，我們也製作了影片版。在使用者第一次打開程式時會看到介紹頁面，可以在那裡了解程式的主要功能。點了繼續後，會到主地圖頁面，使用者可以看到自己現在目前的位置，並透過圖雕資訊了解他們身邊周圍的情況。還影更多功能在影片中您也可以看到。

完結 Outcome：繳件給客戶

我們設計的高保真原型成功解決了本文所述的「痛點」和「使用者需求」。我們的解決方案（程式）讓任何能都可以隨時隨地查看他們周邊的相關資訊，藉此近一步保護自身安全。而且，這個程式提供一個直觀的使用者體驗，讓人們即使在緊急情況下亦能順利找到正確的資料與訊息。透過這個程式，我們讓在伊利諾伊大學的學生們在夜間更安全了！

我們的成品得到了非盈利機構客戶 Cut to The Case 非常正面的讚譽，他們非常喜歡我們的設計！我們的成品也在 Hack4Impact 年終發表會上獲得其他團隊的愛戴。「以人為本」的設計原則，成功的提供了直觀的使用者體驗，讓所有使用者皆感到親切，尤其是那些處於緊急情況，並需要快速找到相關資料與訊息的使用者。此外，本設計是可擴展（Scalable）的，只需要一點改良，即可應用於大多其他地區。希望我們透過謹慎的設計與研究所開發出的解決方案，行人在夜間返家能更安全！

如果你喜歡這邊文章，記得幫我「拍拍手」喔！

以英文原文閱讀本文：

UI/UX Case Study — Helping people feel safe walking at night at U of Illinois

本文由郭力銘撰寫與翻譯。在 LinkedIn 上可以找到我。

UI/UX 設計案例分享：如何讓行人在夜間返家更安全 was originally published in AAPD — As A Product Designer on Medium, where people are continuing the conversation by highlighting and responding to this story.

Walking around campus alone at night can be scary, some streets are deathly quiet and many are not well lit. According to the National Crime Victimization Survey, 63.2% of rapes and sexual assaults occur after dusk. Often, the victims were alone.

The Challenge

A project that I worked on with Hack4Impact hoped to address the issue stated above and help students get around campus safer at night. We wanted to reduce the rate of crime targeting pedestrians by providing them with useful information regarding their surrounding areas. This way, they can make better decisions when determining the route they take when walking at night and achieve peace of mind.

My Role

My role was to be the UI/UX engineer for an 8 person team that consists of a product manager, a tech lead, 4 developers, and 2 designers. During the course of a semester, I worked alongside developers to create a working prototype that is truly user-centered.

The Pain Points

Currently, there is information available online — such as locations of past crimes or emergency phones — that can be helpful in deciding what route to take. However, there are various problems when people want to use the info in this purpose:

• these data are not easily accessible on mobile platforms, as they’re often in the form of a website or PDF designed for desktop browsers
• there’s no centralized place to see the various information
• the available data does not automatically correlate to a pinpoint on a map, making it difficult for users to process the data
• students new to campus don’t know where to find these data

“The info is out there, but it’s hard to utilize it.”

User Needs

While coming up with the initial concept of our solution as a team, we had the following points in mind:

• it should put all available info that’s out there in one place to help users determine what area is safer
• it should be a mobile app so users can see the info whenever, wherever
• users must be able to find the info they need very quickly
• info has to be presented in a way that can be easily understood
• the design must be simple because of possible reliance on the app during emergency situations
• the interface must be suitable for use while walking at night (i.e. when the surrounding environment is dark)
• users of all demographics should find the interface intuitive and not too different from the apps they are already used to using

Design Process

User Research

Our user research was considered an integral part of our development process, as we are developing the app for a non-profit client, Cut to The Case, and our primary focus is our users. While brainstorming our initial concept of the app, we interviewed the university authorities to gain a better understanding the safety scenes on campus — specifically, the usage statistics and user demographics of the university services that aims to provide safer transportation at night, SafeRides and SafeWalks.

“Throughout the night, SafeRides users are mostly international students traveling from libraries. Later in the night, they’re mostly people traveling from bars.”

Wireframe

On our wireframe, we chose to have a map interface where users can see all types of relevant info directly on the map, sourcing directly from various established sources. It took us a while to determine how we want the “info type filters” selection menu to look like. Eventually, we decided to make a card-style menu which users can swipe up and down because of the following reasons:

• the card-style menu is more easily accessible compared to other options like the hamburger “swipe-from-the-side” menu, according to a thumb-friendly heat map analysis; since we want the user to be able to get the info they need as quickly as possible, this is important
• it is similar in design to map apps users are already used to using, like Google and Apple Maps; since users might be using the app under emergency situations, we want the design to be intuitive and familiar

The wireframe provided the team with a general idea of how the app will look like so that they could get started in the development process. In the meantime, we started to plan and conduct user interviews and usability tests on our wireframe.

User Interview and Usability Tests

We used the results of the interviews and usability tests to justify and contemplate all the new design revisions.

“It’s late at night and you’re outside walking back home. There’s no one around you and it’s dark. What would you do next to make yourself feel safe?”

For the wireframe interview, this was our first question to all interviewees. After they answered the question, we introduced them the app concept and asked if it’s something they would download, as well as what features they would look for in such an app. Finally, we did the usability tests; we showed them the interactive wireframe and watched how they interacted with the app.

“The presence of other university students alleviates my fears of walking alone through potentially dangerous routes.”

We made sure we interviewed people from different demographics, since apps from different regions sometimes incorporate different designs, and we want our app to feel familiar to what people are already using, making it more intuitive to everyone. All of the 4 participants we interviewed (two freshmen, male and female, one junior, and one international student) followed our predicted design flow; they navigated through the app quickly without needing assistance. Some desired features they suggested include (1) integrating with bus times and (2) adding emergency call buttons.

Mockup 0

While transitioning from wireframes to mockup 0, we discussed how the detailed info of a specific icon on the map should be presented, if it should be presented at all. Choosing it to show as a card was a tough choice, as we don’t want users to get confused having one more “card” showing up. However, we stuck with it because we thought there should always only be one thing on the screen: either the “filter selection” card, or the “detail” card; the later overlaps the other, and can be closed by tapping the “x” icon.

Mockup 1

All screens that are seen on the wireframe is included. We used images with dark colors as the background for welcome screens because we envisioned that most people would be using the app at night, and we don’t want to disorient the users with bright backgrounds.

Mockup 2

We incorporated some suggestions we got in the interviews into this mockup. To add the calling features, we had to introduce a new element to the design, separating this functionality from the “filter selection” function. We thought about adding a hamburger menu on the upper left of the screen, however, that doesn’t follow the iOS Human Interface Guidelines — which was our priority platform at the moment — and it is not easily accessible.

We end up adding a tab at the bottom for users to switch the card since it provides a more intuitive navigation flow: users are either on the “filter selection” card or the “calling” card, there are no other options. By default, “filter selection” card will be shown.

We also changed how the info is organized on the “detail” card in this mockup, specifically because we want the users to focus on the info that’s more important to them. For example, we learned from the interviews that users find the exact crime location more important than crime types, because users would usually like to avoid all types of crimes.

“I like how the info on detail cards is brief and straightforward, but I’d like to also know if a student/faculty was involved.”

Mockup 3

We made the backgrounds of cards non-transparent to better separate it from the map. We also chose purple to be the primary color of the app, since it calms the mind, which could potentially help nervous users.

Mockup 4

In our usability tests, we observed a behavior pattern that some users, especially international students, would skip through all welcome screens, not reading the copy text there. They mentioned that seeing so much information presented in their second language, it’s just not visually appealing. To address the issue, we redesigned the screens and made them into one intro screen, which shows only the most necessary information. We also reduced the amount of text and added more visual elements, as well as animations.

Another change was the introduction of title copy on cards. We added a title to both the “filter selection” card and “detail” card, to help users distinguish the two.

The Solution

Prototype

After several iterations of the design and multiple rounds of user interviews and usability tests, we proceeded to create a high-fidelity interactive prototype of the app using Sketch.

The image shows the key and desired navigation flow of the app. We have also created a video version of this demo. Upon opening the app for the first time, users are greeted by the intro screen, where they learn about the main functionalities of the app. Continuing to the main map view, they can view their current location and observe what’s around them. Other functions are also showcased in the image.

The Outcome

The high-fidelity prototype successfully addressed both the pain points described above as well as the user needs. Our solution enables the user to view relevant information that could enhance their personal safety, organized beautifully in an easily accessible mobile app that has an intuitive user experience, helping people feel safe walking at night at the University of Illinois.

The design received very positive feedback from the client, Cut to The Case. It also received praise from other teams during the Hack4Impact End of Semester Showcase. The project aims to use human-centered design principles to deliver an effective user experience for all users, especially those that are under emergency situations and need to find relevant information very quickly. Additionally, the design is scalable and can be applied to other cities. Hopefully, with our solution, students can walk home more safely at night.

Make sure to give this article some claps if you enjoyed it and want to see more!

A Chinese translated version of this article is also available:

UI/UX 設計案例分享：如何讓行人在夜間返家更安全

This article was originally written by Philip Kuo. Find me on LinkedIn.

Helping people feel safe walking at night at U of Illinois — a UX case study was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.