Joshua Taylor › Evernote web app redesign (2014)

I led a small design team on a complete redesign of Evernote's web app, an app used by millions of people around the world every month. Moreselectedprojects Evernotewebappredesign(2014)WebApp Snowball(2015)Android Penultimate6(2014)iPad Lilt(2015)webapp EvernoteHomepage(2013)Responsiveweb EvernoteClearly(2012)BrowserExtension EvernoteProjects(2011-2014)Web Shortlist(2015)webapp,homepage,branding,socialimpact Protected:Airbnb(2015)webapp tl;drIledasmalldesignteamonacompleteredesignofEvernote'swebapp,anappusedbymillionsofpeoplearoundtheworldeverymonth.Wedramaticallysimplifiedtheuserexperience,focusingoncoreinteractions,speed,andsimplifiednavigation.Makingitbeautifulintheprocesswasjusticingonthecake.Oh,andwewerealsorecentlynominatedfora Webby. "Evernoteredesigneditsnote-takingwebapp,andit'sgorgeous"-TheVerge Abitofhistoricalcontext  SingleEdit ColumnEdit SingleEdit ColumnEdit Circa2011WhenIbeganworkingonthewebappin2011,itwasaprettyclosecloneofourWindowsapp,whichmeanttheuserexperiencedidn'tfeelnativetotheweb,somefeatureswerelaggingbehind,andtheUIwasinneedofanupdate.  SingleEdit ColumnEdit Through2014Wemadesomesubstantialimprovementsoverthecourseofafewyears,buttheUXstilllargelyresembledthatofaheavydesktopapp,ratherthanalightweight,modernandnativewebapp. SingleEdit ColumnEdit OurprimarygoalsofaredesignCreateanexperiencethatisconsistentwithourotherawardwinningapps. Beagreatlandingpad.ManyusersaccessEvernoteonthewebonlyafterusingourotherapps.Thisshouldbeafluidexperience.Beagreatnativewebapp.Takeadvantageoftheplatform,whichmeansitisaccessibleeverywhere,andfocusesonlightinteractions.Focusonfindingthingsfastandtakinganotequickly.Speed.Theappshouldloadquicklyandhelppeopleperformavarietyofkeyactionsquickly. "Thenewversionissocleanandunclutteredthatitmakesmewanttotakemorenotes,keeptrackofmyday,postnotestosocialmedia,andattachmorefilestokeepmydayfromspiralingoutofcontrol."-Inc AnewsimplifiedexperienceWrite,Find&ChatWhenusersareinawebbrowser,theyareoftenworkingwithmultipletabsopen,maybeonapubliccomputer,ormayhaveslowinternetaccess.Focusingonquick,lightweightactionswasthebestexperienceforthemaswellasuserscomingfromotherplatforms. AfocusonwritingWewantedaquickwritingexperiencethatallowedyoutofocusonwritingwithoutdistraction.Assoonasthebrowserloads,yourcursorisinanewnote,andallyouhavetodoisstarttyping.Itcouldn'tbeanymoresimplethanthat.Onceyoustartwriting,therestoftheUImeltsaway,helpingyoufocusonyourwords.Editingtoolsonlyshowupwhenyouneedthem,andotherinsertiontoolsaretuckedawayontheright. Findwhatyou'relookingfor-quicklyWhenausergoestosearchforsomething,theyhavecognitivelylefttheircurrentcontext,effectivelysayingtheycan'tfindwhattheyarelookingforonthescreen.Wewantedtousethiscuefromtheusertoofferthemafullscreenexperiencetohelpthemfindwhattheyarelookingforinthatmoment.Thisfullscreensearchexperienceclearsawaytheclutter,butitalsoallowsusoffermoreuniquesearchsuggestionsandresultsinthefuture. BrowseyournotesBrowsingisanimportantpartoffindingwhatyouarelookingfor.Iwantedthenavigationtobesupersimpleandclear.Allofthecorenavigationwasputintoonesidebar.Thesidebariswiderwhentheapplaunches,withlabelssothecoreUIelementsarealwayssubtlyreinforced(labelsalsoappearonhover).Atthetop,youcanseethethreeprimaryactions-addanewnote,searchforsomethingyoualreadyhave,orchatwithsomeone.Panelsopenandclosewithadelightfulanimationtoshowthingslikeauser'slistofnotebooks.Onamorepracticalnote:aftertalkingtoourdevelopers,Irealizedoneofthereasonsourpreviousapp'sslownesswastheloadingofbiglistsofthingslikenotes,notebooksandtags.Bynotshowingtheselistsimmediatelywhenthepageloadsandpullingtheminvialazyload,wewereabletoseehugeimprovementsinperceivedspeed,whichisabsolutelycrucialforamodernwebapp. WorkChatOver70%ofpeoplethatuseEvernotedosoatwork.Whenyouareinthecontextofworkingonaprojectwithsomeoneelse,beingabletotalktothatpersoneasilyiscrucial.WedesignedWorkChattobeaseamlessexperiencerightinsidethecontentyoualreadyhave.Youworkonsomethinginanoteforabit,andthenshareittoafriendorcoworker.Theycancommentandsendyoumessagesrightaway.Byremovingthebarrierbetweenthemessageandthecontentofthemessage,usersareabletohaveamuchmorefluidexperienceandgetmoredonewithmorepeople.  www.evernote.com[unex_ce_buttonid="content_0mzro4had"button_text_color="#e5eaee"button_font="bold"button_font_size="15px"button_width="auto"button_alignment="center"button_text_spacing="1.5px"button_bg_color=""button_padding="15px60px15px60px"button_border_width="2px"button_border_color="#e5eaee"button_border_radius="2px"button_text_hover_color="#3b3b3b"button_text_spacing_hover="1.5"button_bg_hover_color="#e5eaee"button_border_hover_color="#e5eaee"button_link="https://evernote.com/"button_link_type="url"button_link_target="_blank"has_container="1"in_column=""]www.evernote.com[/ce_button] Shareon Moreselectedprojects Evernotewebappredesign(2014)WebApp Snowball(2015)Android Penultimate6(2014)iPad Lilt(2015)webapp EvernoteHomepage(2013)Responsiveweb EvernoteClearly(2012)BrowserExtension EvernoteProjects(2011-2014)Web Shortlist(2015)webapp,homepage,branding,socialimpact Protected:Airbnb(2015)webapp