A Design Challenge

Supercharging a Help Center

A solution for a more integrated Help and Support community within DigitalOcean's dashboard.

DESIGN CHALLENGE

An experiment in redesigning a crucial piece of an ecosystem.

In July of 2015, Joel Califa, the Design Lead at DigitalOcean sent me a message on Twitter, asking if I'd be interested in joining their design team. After a whirlwind week of interviews and a design challenge, they flew me out to their sun-filled Big Apple office space for a final interview. At the time, 100% of their design team wrote Rails or Javascript, which I struggled to do. Although this exploration was created for a design challenge, it accurately showcases my problem-solving process...so I'm including it here for you! 

Computers@2xComputers@2x

TL;DR

Exploring the challenge.

Years ago when I started trying to learn Rails (pick a time...there's been so many), I needed more access to my server than MediaTemple's shared grid allowed. After a little debating, I settled on DigitalOcean, and immediately fell in love with the scalability of their platform. As a total n00b, I struggled through everything from installing WordPress to setting up NGINX and running my first apps. I had so much trouble with their support community, in fact, that I recorded my own help videos (if you want a laugh, you can watch them here). When the DigitalOcean team tasked me with this challenge, I felt like it was a gift. I could finally spend time trying to fix their support system! 

1New1New

A BRIEF LOOK

The current state of support.

HIDDEN IN PLAIN SITE

From the dashboard, you could access the help center through a modal that pops up when you clicked on the discreet question mark at the top right of your screen. The modal had some cool typeahead functionality that allowed you to quickly find articles, but in order to read the content you had to open a new tab.  Not so bad, I guess, unless you're writing code. That leads to...window hell.

WINDOW HELL

When I write code, I have a plethora of apps open. At any given time, I have no less than three tabs spread out across three browsers, Sketch, Coda (or Sublime, depending on what I'm writing), Codekit, Sequal Pro, Spotify, and Who-Knows-What-Else. Adding a tutorial screen into the mix just created more chaos, and often got in the way of my workflow. How could I simplify this?

THE PRETENDER

Alright, so I'm working inside of my dashboard, but I bump into an issue that I can't figure out. Naturally, I would have entered DigitalOcean's support center through the modal and found a helpful article. Cool, a solution! But wait...now I'd have to copy/paste the code back into my Terminal?  There's a shell within my Droplet's dashboard, and I'd already have signed in! Could we make this a little easier on me, the end user? 

TESTING, TESTING

But first, ask.

When it comes to product design, I try to begin from a state that Marc Andreessen describes as "strong opinions, loosely held." After all, my frustration with the support community may be 100% of my own doing! Before putting pencil to paper, I created a Typeform questionnaire and trolled Twitter for volunteers. 

The Results

Over the course of four hours on a Saturday, seven tweeple completed my questionnaire. I learned a couple of important things : 

  1. All seven people have at least five tools open while writing code.

  2. Six of the seven would go out of their way to avoid the support center because of the interpretive nature of its usability. 

  3. Six of the seven felt "Very Unhappy" with the usability of the support center. 

  4. The seventh person had no opinion about the DigitalOcean support community. 

Interesting! Okay...so it's not just me. I thanked my testers and told them that I'd be in touch in a couple of days with a prototype. Time to get to work...

2New2New

CONTENT PLANNING AND ARCHITECTURE

Planning the integration.

At this point, there were a couple things that I knew for sure. First, I needed to find a way to make it easier to search all of the articles and tutorials housed in the support center from the Droplet's dashboard. Navigation must feel as seamless and interconnected as possible, and the platform should be more assistive to the user. So much ownership is placed in the hands of the admin that the system feels more nerve-wracking than empowering. I wanted to find a way to make that same information more indigestible.

To help guide my designs, I set in place three keywords.

SIMPLE

Finding help should never be a difficult process. There should be no friction in the content or the platform that keeps the visitor from overcoming her challenges.

SEAMLESS

The visitor should feel empowered by how easy it is to implement the solutions to her challenges, from any location within the platform.

CONTEXT-AWARE

The platform should be able to understand the needs and frustrations of the visitor and offer unexpected support during times of need. 

Exploring the navigation.

My first challenge was to figure out how to incorporate the support center into the existing application in the least obtrusive way. I opened Framer and prototyped two use cases :

CLICK FOR EXPLORATION ONE

Initially, I explored a crazy fly-out, side navigation. It looked cool, but I couldn't imagine this interaction being usable on mobile devices or, for that matter, accessible to a wide user base. I liked how the link to the support center was tucked out of the way, then entered the view on the z-axis, on top of the dashboard.

CLICK FOR EXPLORATION TWO

Instead, I moved the link to the support center to the left-hand sub-navigation. When the visitor interacts with this link, she'd be able to see context-aware support articles and tutorials on a page within the dashboard. From there, she may be able to search for and open articles without impeding her workflow. There was something to this idea. 

CircleDividerCircleDivider
Flow2Flow2

USER FLOW AND NAVIGATION

Defining the journey.

Now that I'd paired the new support center link into the Droplet's navigation, I needed to gain a fuller understanding of the user's journey. For the sake of the design challenge, I began from the expectation that the admin is looking for assistance while working within the shell, either through the Droplet's web version or through her native app. 

Okay...it felt like I was off to a good start...but for my own sanity, I needed to sketch out the implementation within the current infrastructure. Time to dig up some pencil and paper...

FINDING HELP

At the time, DigitalOcean used a "Get Help" button at the top right of the screen to open a search modal. The visitor would search for an article, then open it in a new tab. By integrating a "Find Help" link in the dashboard navigation, I hoped to better integrate the support functionality.

THE HELP PAGE

Once the visitor clicks on the new link, we can assume that she's looking for one of two things: help from a person or help from an article. Integrated articles surface first, based on her recent searches and top suggestions based on her server configuration. If she needs more specific help, she could open a support ticket by clicking on a persistent button at the top of the page.

SEAMLESS SUPPORT

When the visitor opens an article, she's greeted with all of the expected content, but also with an integrated console, already logged into her current Droplet. Now, she can follow along with the article while implementing her learnings. To make education a little more digestible, I included a pop-out Console Help and Dictionary button at the bottom of the integrated shell.

FunDividerFunDivider
3New3New

#INTERFACING

Let's design!

By this point, I was feeling pretty comfortable with my sketches and research. I'd been envisioning the UI for these flows from the start of the challenge, and I could finally dive into creating the interface for testing. I navigated to my droplet and popped open Chrome's web inspector to start replicating the DigitalOcean UI as fully as possible. In order to get the best feedback, this prototype had to FEEL like it could be a functional part of the greater ecosystem, so staying on-brand was crucial.

I created a styleguide from some of the most common UI elements in DigitalOcean's visual language. Throughout the design process, I referred to this tiny document for guidance.

Styleguide2Styleguide2

AN UPDATED NAVIGATION

A NEW HOME FOR HELP

Find Help now lives in the left-hand sidebar, along with all of the other droplet-specific actions. The simple but clear language intentionally leaves "Help" ambiguous, allowing the word to spread an umbrella over the forms of content that might be found there, from discussions to tutorials, articles, and support tickets.

CONTEXT-AWARE TERMINAL

ACCESS TO AN INTEGRATED CONSOLE

In my experience, most of the support articles and tutorials include step-by-step instructions that require a dizzying dance between the admin's code editor, Terminal, and the page's content. With just a little beautifying of DigitalOcean's in-browser shell, the admin could implement the content within the tutorial without ever having to leave the page. If she'd rather follow a different workflow, she can simply collapse the sidebar, and hide the shell altogether.      

SHELL, LEVELED UP

RUN AUTOMATED SHELL COMMANDS FROM WITHIN THE BROWSER 

Many of the tutorials and articles focus on actions that follow an unchanging step-by-step workflow. From setting up new users in NGINX or Apache to installing the latest version of WordPress, the system has the opportunity to automate simple workflows at the click of a button. Not only would this eliminate user error, but it would also help the admin become more familiar with the workflows in a more educational environment.

finalDesign Copy@2xfinalDesign Copy@2x
[unex_ce_button id="content_23d586xvn" button_text_color="#ffffff" button_font="custom_one" button_font_size="17px" button_width="auto" button_alignment="center" button_text_spacing="0" button_bg_color="#dbd93e" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#dbd93e" button_border_radius="50px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#d8d631" button_border_hover_color="#d8d631" button_link="https://invis.io/WJ7JBXYEZ#/162839418_F_Dashboard" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]SEE THE PROTOTYPE[/ce_button]
4New4New

DESIGN ROUND ONE: COMPLETE!

Test and iterate.

Four hours and almost eighteen versions later, I arrived at an iteration of the interface that I was excited about. The designs were tight and on-brand and the InVision prototype flowed smoothly. It was time to write some user experience testing questions and to schedule some demos with my questionnaire takers. 

ON ASKING QUESTIONS

QUICK THOUGHTS ON UET 

User testing is a crucial part of the product designer's job, but it can take a while before it feels comfortable. In my opinion, UET (User Experience Testing) is about 21% critical thinking and whatever-else-percent people skills. Oh, and 100% humility, because your assumptions are usually wrong in some capacity.

When I'm writing UET questions, I try to create uninfluenced, organic questions that encourage detailed answers. It's important to avoid leading questions or to use body language, inflection, or attitude to influence the responses of your testers. Usually, I'll plan for this by creating a script, or a pre-defined set of factual questions, to ensure that I don't steer the reviewer in any misleading direction. This data is important! 

WHAT THE TESTERS SAID

Michael Schultz

DESIGNER & DEVELOPER AT SIDEWIRE

"I love this concept, especially the idea of having access to my droplet's shell from the support center! This would save tons of time."

Jordan Koschei

DESIGNER. MANAGING EDITOR OF THE INDUSTRY.

"This seems like it would be a lot easier to use than DigitalOcean's current support center. I think I'm in love!"

"One word: nice. The icon for the console is confusing, but everything else is great. LOVE the one-click install idea."

FIN

Final tweaks and last words.

Collectively, the user experience testing was an overwhelming success. My three testers loved nearly everything about the implementation, though all of them commented on how confusing the icon was for opening the shell. I made a couple small tweaks to give it more prominence and sent the prototype and case study away to DigitalOcean. 

A short week later, I was walking into their 6th street offices in New York for the in-person interview. After presenting my work, the team suspiciously asked if I knew what they'd been working on for months. I shook my head, and Colin, one of the designers, pulled up the staging version of their community site. To my shock, it included many of the features that I brainstormed here! We all had a good laugh about the serendipity. 

Sadly, a week later, Joel Califa (Remember him? He runs the design team over there.) called to let me know that they had decided to go in another direction. They loved the work, but they were looking for someone with stronger development chops. At the time, that wasn't me. Regardless, I'm grateful to have had the incredible opportunity to brainstorm some cool ideas and meet some incredible people. 

How do you solve design challenges?

[unex_ce_button id="content_kugi57gvj,column_content_ug5j9rdph" button_text_color="#ffffff" button_font="custom_one" button_font_size="18px" button_width="auto" button_alignment="center" button_text_spacing="0" button_bg_color="#ffd300" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#dbd93e" button_border_radius="50px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#d8d631" button_border_hover_color="#d8d631" button_link="chris@christopheralandavis.com" button_link_type="email" button_link_target="_blank" has_container="" in_column="1"]TELL ME WITH AN EMAIL[/ce_button]
fslr after hoursapple md199ll ais protonvpn goodpanasonic ez1000aaxa m5lmgcmdyvcmct stockgamevice sues nintendolg g4 bootloop freezer fixticc stock dividendnyxbt stocksamsung ks7000 amazondeepak nitrite share pricejbl synchros e30 reviewepson wf 2660 driverhow to connect hp deskjet 2541 to wifimjlb stockwww vevo com activate firetvaxovant stocklumix zs60 reviewvívosportcanon xa30 reviewwddd stocksyrx stock pricelxft stockentune definitiondell p2715q reviewflux darkroom modeinsy stock newswhat happened to askjeevesdisca stock priceaezs stock priceyrc rumorsmtgox bankruptcysamsung ks9500 pricemyhi stockzosano pharma stockversartisnike hyperadapt costhp m277dw driver downloadnanr stockimdzasm100 1580ipair registrationhp elitebook 2540p specstril stock pricebenq pd3200u reviewnabi 2 argosmsi gt70 2pc dominator ssdamd 580xipad md785ll bgopro hero specsrtrx stock priceyi 4k action camera 90003avlifipad a1474 specsffxv regalia componentsoled65b7p reviewhoneywell lyric security homekitxlnx stock pricetradewavemdr as200 sony reviewtrmr stockrifftrax hulutranscriptor turntableentrim 4dharman kardon sb20vgid stockhp pavilion 15 ab127cahalo reach backwards compatiblepfpt stockmnkd earningsdarkest dungeon narrator quotesdell i7378 reviewargxlmnx stock pricevxf stock priceprkr stock pricexniftyczz stock pricejaybird x4 rumorslogitech squeezebox duet software downloadpanasonic tx l42d25bascena stock priceblinkforhome reviewsabiveapple airdrop printerasus mb169b 15.6 full hd 1920x1080 ips usb portable monitorcostco ihome speakerapp disguisernikon keymission 170 reviewuusdflipstagramsound blasteraxx axx 200 reviewairwatch container iossaex nasdaqsony xbr900e reviewlatitude e5450 specsvoog stock pricecb281hk bmjdprnyse ufivlkaf stock priceurbt stockdvaxnymhun65ku6290fxza reviewwhat is tvixbuz etfvuzix m100r2d2 inventor kitbolva tv companylgcyovizio 70 e series 4kcustom gamerpics xbox onerveal boxm277dw driver2ps64acer aspire e 15 e5 575g 53vg 15.6 inchjbzy stock pricesony 55x930epacw stockpsdo stockplaystation network deactivate accountsamsung smartcam setup instructionscrzo stockirobot roomba 652 robot vacuumtgtx stock priceasus ux501vw ds71tilan zechorynyse qtwosony ht ct800 reviewaudio analogue puccini special editionvizio sb3851 d0 smartcast38 5.1 sound bar system 2016 modelduologpanasonic g7 vs fuji xt10herojuanaomed stock pricepshzfasus rog strix gl502vs ws71sony mdr 1000x head ficbusanasdaq frbkaxim biotech stocksamsung t520 specsmymtechableton live powerpcasus transformer mini t102ha d4 grcanon powershot gx3tcl 55c803plex on synology ds216jxbr55x850d reviewgoogle mentalplexmonowall downloadaumn stock pricepfis stockcnbx stockhhgfmpvd stockverizon etf calculatorsamsung j7v specsformlabs flexible resinfinviz heat mapdenon 3808ciexpressvpn on firestickvnq tickerare gopros waterprooft440p specsgarmin x40 reviewsamsung es8000 65 inchpxyndell latitude e7450 driversbpop stockasus zenbook ux330ua ah54 13.3 inch lcd ultra slim laptopbose qc35 equalizerhmmr stockstrikedrive convertersealskinz waterproof shooting glovesiwinksswimmo watchdwfiiphone 5se boost mobileimltvcste stockunpair apple watch without iphoneflexsmart x2 pairinghp envy 7640 setupsoftmaker freeofficerazer wildcat xbox one controller reviewnyse snaalphageo share priceskyrim giant mudcrabxps 8910 specsi7 2600k pcie lanesfrme stock pricehainly abrams mass effectsgdh stocknb runiqnyse awiswitcheroo pokemon sun and moonruniq review88ss9174 bld2yinn etfsouheil badranwedhappytrevfcambridge audio 740c pricecanon 5drsnasdaq itciroku streaming stick vs expressblto stock pricee7470 docking stationinwksound blaster x fi mb5freerecorders com reviewtp link archer c7 ac1750 reviewtibxgenital jousting ps4nasdaq eriitsco share priceduck quack ringtonefandangonow costblrx stocklouis baseneseedsun lightinglptx stock pricefmnbgetac f110 pricetza premarkethainly abrams mass effecthw k950 zaadobe kuler alternativesnapchat nyse symboloptt stocksony mdr zx780dc manualiusg stockcbmjbissell crosswave cyber mondaymixyourwatchviewdleptx buyoutmomostockijr ticker23andme ancestry accuracysecretlab omega reviewgbim stock pricetbt tickergamma scalpingdell 17353tcl p series 55p607mnng2ll amagazines mileageplus comdtrxpowerbeats3 wireless walmartamtek auto share pricebkln stockwalmart lenovo y520hormel stock price historytxmd stocknxpi tender offerfuji x e2s reviewaudio technica lp120 setupvoog stocktesxdell precision 7510 reviewhow to print double sided on epson printerretropie arcade romsis protonvpn goodsamsung hw k650 reviewartx stock newskodak orbit360orpn stocki7 7740ksony cybershot w830 lowest pricehow to recover snapchats iphoneangie's list stock pricermbs stock pricentek stockasus rt ac87rpran stock pricemarantz 6011 reviewbkep stockpsb imagine xbnakd tickert m9bilesamsung wp10 reviewnorthwest biotherapeutics inchp pavilion laptop 14 bk091stsgsvfzto express stock pricebroadchurch season 3 premiere datemrcc stockvguard share priceairadar asus rt n56uiphone 6 plus glitchingunsync iphonesastraweb serversnasdaq chrsgoogle pixel waitlistvizio smartcast setupzoomer dog commandssouhy stockhp spectre 13 v011dxdpww stocknnsr stockfrlfue megaboom not chargingdisable briefing s7itot stock pricebitcornoled65c7p best buyglbr stockdlcrnikon d2300cctc stock pricexelbtnef's enoughdell inspiron 5675 reviewhp deskjet 2542 wireless all in one printer reviewsasus pg248q reviewkerx after hourstoshiba handybookjambox warrantytcmd stock pricehateno village mapunfriend tracker appxef6ottolock reviewvívofit3 garmin vivofitiphone turn off two factor authenticationevhc stock priceunregister imessagewix linking pagestnt on firesticktumi power pack moto moddvyealdeyra therapeuticsgemalto stock pricereadiusslca earningspitch correction garagebandnikon coolpix l330 reviewinjustice controls ps4vinmopetq stock pricensrpftctzf stockhydro gfx gtx 1080 liquid cooled graphics cardi7 2600k pcie lanesleco stock priceamazon lightsail reviewnasdaq logmaudioengine a5 comparison