{"id":2646,"date":"2013-10-12T14:00:00","date_gmt":"2013-10-12T18:00:00","guid":{"rendered":"https:\/\/www.wework.com\/creator\/?p=2646"},"modified":"2020-03-30T23:22:04","modified_gmt":"2020-03-31T03:22:04","slug":"hack-way-better-user-experience","status":"publish","type":"post","link":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience","title":{"rendered":"How to hack your way to a better user experience"},"content":{"rendered":"

After graduating from the Ontario Institute of Audio Recording Technology, I opened a small recording studio. \u00a0In effect, I became a freelance audio producer. \u00a0I started to notice a number of freelance voice talent would contact me and ask if I had any connections to jobs. I asked myself: \u201cWhat if I transformed my brochure-style website into an online marketplace that connected freelance voice talent with the clients who needed to hire them?\u201d Thus, Voices.com<\/a> was born, and today, we serve 250,000 users from around the world.<\/p>\n

As the site continued to scale, me and my team realized we wanted to focus on mobile because that\u2019s where traffic was coming from. Our goal was to cost-effectively deliver consistent user experiences on all devices and platforms, as well as position the company to meet future demands.
\nWe sought to answer the question: how do we hack our way to a better experience? And how could we do that while focusing on our design philosophy, built on three elements: growth, focus and innovation?<\/p>\n

Step 1: Conducting Research<\/strong><\/p>\n

With 85 percent of mobile site visitors skipping through to visit the full site it was evident that we needed to offer more mobile functionality. We\u2019d previously created mobile apps, but eventually circled back to the mobile Web because we wanted to offer full functionality in a website that would meet the needs of our global audience.<\/p>\n

\"voices-homepage\"<\/a><\/p>\n

We knew that a successful redesign needed to keep the best of what Voices.com already had to offer. \u00a0To ensure this, we surveyed our customers and also deployed Crazy Egg, a heat map application that counted clicks on a page-by-page basis. \u00a0This data created a heat map which identified the areas where our users were clicking, likely the areas of the website that interested them most. \u00a0These formed the basis for deciding which features were kept and which were soon to be eliminated from a mobile version of our website.<\/p>\n

As part of the pre-project phase, I did a lot of reading. \u00a0Notably, two books stood out: \u201cMobile First<\/a>\u201d by Luke Wroblewski and \u201cResponsive Web Design<\/a>\u201d by Ethan Marcotte. It\u2019s in these books that I was introduced to the concepts of taking a mobile first approach to design, by eliminating all but the essential features and elements on a page or screen. \u00a0This mindset inspired the team to focus on the critical few features that would enable us to offer an amazing user experience.<\/p>\n

\"voices-heat-map\"<\/a><\/p>\n

Step 2: Getting started<\/strong><\/p>\n

With essential features in hand, we created a Mind Map<\/a> diagram to visually outline information: in this case, the various screens in the application. Each branch in the mind map represented a screen within the application. The map served as checklist of which pages needed to be designed, developed and tested. It\u2019s been our secret for ensuring a consistent user experience across our brand.<\/p>\n

As tech-savvy as I\u2019d like to think I am, I\u2019ve found that it\u2019s often fastest to get ideas down on paper using a technique called paper prototyping. \u00a0Essentially, this means drawing in elements of your experience using a pencil. \u00a0I even resort to using a Sharpie because they are big and thick and force me to mock-up the big elements and not focus too heavily on the details. \u00a0With a few screens drawn on paper, I then present the paper to a colleague and ask \u201cWhere would you touch to login?\u201d or \u201cYou want to do a search, where would you touch?\u201d \u00a0If they get it right, then present them with the next page which represents the next screen in the workflow.<\/p>\n

Paper prototyping is like doing a storyboard for a movie, but it\u2019s a storyboard for your app and it allows you to get very early feedback on the workflow without spending hours designing.<\/p>\n

Step 3: Execution<\/strong><\/p>\n

We chose to work with Adobe Creative Cloud because we could use various task-specific tools to get our project done.<\/p>\n

To start, we used Edge Reflow and were pleased with how it helped us easily understand and apply the principles of responsive design. Probably the most interesting part of the process was gaining an understanding of the best practices for breakpoints. The grid approach, where every screen had 12 vertical columns, enabled us to standardize the look and feel of the site across devices. For example, we were able to be consistent with the sidebar menu widths. We were also able to take into account factors such as screen resolutions and pixel widths for various designs, which were fundamental to figuring out how the site would behave on different devices. From an efficiency perspective, use of Edge Reflow resulted in a faster quality assurance process. It also reduced support and overhead for a leaner, more collaborative design and development team, less outsourcing of separate native development efforts, and a reduction in code and domain maintenance costs over time.<\/p>\n

We also established product specifications and built wireframes of every page using Photoshop. A single template served as the basis for three separate files–phone, desktop, and tablet. Initial layouts were designed in Photoshop, making extensive use of shared assets while creating layers for each of the three files. To help speed page loading, the team also used Photoshop to create CSS sprites for icons. Seeing where images would drop in and out on a page forced us to make tough decisions about which images worked, and which ones should be removed altogether.<\/p>\n

To speed loading times even more, we included Sprites in the CSS file that we created. So instead of having 87 files with all different icons, we had one file with all of the icons and only showed the ones that were necessary for the page. The browser can cache the one file so it doesn\u2019t need to keep loading individual files. The discipline of creating Sprites also encouraged us to standardize the look and feel of the icons and keep them limited to just the ones we were using. After we had our proof of concept, we rebuilt the entire site from scratch using Dreamweaver. Overall, we realized considerable time and resource savings with our responsive web design approach, and were able to eliminate lines and lines of code that we weren\u2019t using.<\/p>\n

Step 4: Testing<\/strong><\/p>\n

With the new skin applied to all the pages on our website, we commenced the testing phase. \u00a0The team created a shared Google Spreadsheet with a list of featured down the side and all the browsers that we’d be supporting across the top. \u00a0Every page was tested in each browser and received a “Pass” or “Fail” \u2013 which we detailed on our blog<\/a>.<\/p>\n

Step 5: Continuing to iterate<\/strong><\/p>\n

Now that we have responsive concept down, we\u2019re working on trimming the site down as much as possible to maximize reach. But I\u2019m proud of what we\u2019ve accomplished: since the launch of our redesigned site, we\u2019ve seen a 17 percent increase in how long our members stay because of the consistent experience delivered regardless of device. Plus, our mobile traffic has increased 43 percent year over year, and membership logins have increased at 86 percent.<\/p>\n

That being said, there\u2019s still continuous designing and building to do \u2013 but by following a clear pathway every time, your users and team will thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"

After graduating from the Ontario Institute of Audio Recording Technology, I opened a small recording studio. \u00a0In effect, I became a freelance audio producer. \u00a0I started to notice a number of freelance voice talent would contact me and ask if I had any connections to jobs. I asked myself: \u201cWhat if I transformed my brochure-style […]<\/p>\n","protected":false},"author":884,"featured_media":2819,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43902],"tags":[],"class_list":["post-2646","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-professional-development"],"acf":[],"yoast_head":"\nHow to hack your way to a better user experience<\/title>\n<meta name=\"description\" content=\"After graduating from the Ontario Institute of Audio Recording Technology, I opened a small recording studio. \u00a0In effect, I became a freelance audio prod\u2026\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to hack your way to a better user experience\" \/>\n<meta property=\"og:description\" content=\"After graduating from the Ontario Institute of Audio Recording Technology, I opened a small recording studio. \u00a0In effect, I became a freelance audio prod\u2026\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience\" \/>\n<meta property=\"og:site_name\" content=\"Ideas\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-12T18:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-03-31T03:22:04+00:00\" \/>\n<meta name=\"author\" content=\"Creator\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Creator\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience\"},\"author\":{\"name\":\"Creator\",\"@id\":\"https:\/\/www.wework.com\/ideas\/#\/schema\/person\/3e2bc5c0752a17243d4c1be710f27f26\"},\"headline\":\"How to hack your way to a better user experience\",\"datePublished\":\"2013-10-12T18:00:00+00:00\",\"dateModified\":\"2020-03-31T03:22:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience\"},\"wordCount\":1223,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.wework.com\/ideas\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"Professional Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience\",\"url\":\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience\",\"name\":\"How to hack your way to a better user experience\",\"isPartOf\":{\"@id\":\"https:\/\/www.wework.com\/ideas\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2013-10-12T18:00:00+00:00\",\"dateModified\":\"2020-03-31T03:22:04+00:00\",\"description\":\"After graduating from the Ontario Institute of Audio Recording Technology, I opened a small recording studio. \u00a0In effect, I became a freelance audio prod\u2026\",\"breadcrumb\":{\"@id\":\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"\/ideas\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Professional Development\",\"item\":\"\/ideas\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to hack your way to a better user experience\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wework.com\/ideas\/#website\",\"url\":\"https:\/\/www.wework.com\/ideas\/\",\"name\":\"Ideas\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.wework.com\/ideas\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wework.com\/ideas\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.wework.com\/ideas\/#organization\",\"name\":\"WeWork\",\"url\":\"https:\/\/www.wework.com\/ideas\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.wework.com\/ideas\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.wework.com\/ideas\/wp-content\/uploads\/sites\/4\/2019\/04\/welogo_black_55x55.jpg?fit=55%2C55\",\"contentUrl\":\"https:\/\/www.wework.com\/ideas\/wp-content\/uploads\/sites\/4\/2019\/04\/welogo_black_55x55.jpg?fit=55%2C55\",\"width\":55,\"height\":55,\"caption\":\"WeWork\"},\"image\":{\"@id\":\"https:\/\/www.wework.com\/ideas\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wework.com\/ideas\/#\/schema\/person\/3e2bc5c0752a17243d4c1be710f27f26\",\"name\":\"Creator\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.wework.com\/ideas\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eb563d5ddf6491c43bbad28f4b2a5dce3c156c680f8fc10cff7e176ac9666823?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eb563d5ddf6491c43bbad28f4b2a5dce3c156c680f8fc10cff7e176ac9666823?s=96&d=mm&r=g\",\"caption\":\"Creator\"},\"url\":\"https:\/\/www.wework.com\/ideas\/author\/creator\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to hack your way to a better user experience","description":"After graduating from the Ontario Institute of Audio Recording Technology, I opened a small recording studio. \u00a0In effect, I became a freelance audio prod\u2026","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience","og_locale":"en_US","og_type":"article","og_title":"How to hack your way to a better user experience","og_description":"After graduating from the Ontario Institute of Audio Recording Technology, I opened a small recording studio. \u00a0In effect, I became a freelance audio prod\u2026","og_url":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience","og_site_name":"Ideas","article_published_time":"2013-10-12T18:00:00+00:00","article_modified_time":"2020-03-31T03:22:04+00:00","author":"Creator","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Creator","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#article","isPartOf":{"@id":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience"},"author":{"name":"Creator","@id":"https:\/\/www.wework.com\/ideas\/#\/schema\/person\/3e2bc5c0752a17243d4c1be710f27f26"},"headline":"How to hack your way to a better user experience","datePublished":"2013-10-12T18:00:00+00:00","dateModified":"2020-03-31T03:22:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience"},"wordCount":1223,"commentCount":0,"publisher":{"@id":"https:\/\/www.wework.com\/ideas\/#organization"},"image":{"@id":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#primaryimage"},"thumbnailUrl":"","articleSection":["Professional Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience","url":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience","name":"How to hack your way to a better user experience","isPartOf":{"@id":"https:\/\/www.wework.com\/ideas\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#primaryimage"},"image":{"@id":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#primaryimage"},"thumbnailUrl":"","datePublished":"2013-10-12T18:00:00+00:00","dateModified":"2020-03-31T03:22:04+00:00","description":"After graduating from the Ontario Institute of Audio Recording Technology, I opened a small recording studio. \u00a0In effect, I became a freelance audio prod\u2026","breadcrumb":{"@id":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/www.wework.com\/ideas\/professional-development\/hack-way-better-user-experience#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"\/ideas"},{"@type":"ListItem","position":2,"name":"Professional Development","item":"\/ideas"},{"@type":"ListItem","position":3,"name":"How to hack your way to a better user experience"}]},{"@type":"WebSite","@id":"https:\/\/www.wework.com\/ideas\/#website","url":"https:\/\/www.wework.com\/ideas\/","name":"Ideas","description":"","publisher":{"@id":"https:\/\/www.wework.com\/ideas\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wework.com\/ideas\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.wework.com\/ideas\/#organization","name":"WeWork","url":"https:\/\/www.wework.com\/ideas\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wework.com\/ideas\/#\/schema\/logo\/image\/","url":"https:\/\/www.wework.com\/ideas\/wp-content\/uploads\/sites\/4\/2019\/04\/welogo_black_55x55.jpg?fit=55%2C55","contentUrl":"https:\/\/www.wework.com\/ideas\/wp-content\/uploads\/sites\/4\/2019\/04\/welogo_black_55x55.jpg?fit=55%2C55","width":55,"height":55,"caption":"WeWork"},"image":{"@id":"https:\/\/www.wework.com\/ideas\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.wework.com\/ideas\/#\/schema\/person\/3e2bc5c0752a17243d4c1be710f27f26","name":"Creator","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wework.com\/ideas\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eb563d5ddf6491c43bbad28f4b2a5dce3c156c680f8fc10cff7e176ac9666823?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eb563d5ddf6491c43bbad28f4b2a5dce3c156c680f8fc10cff7e176ac9666823?s=96&d=mm&r=g","caption":"Creator"},"url":"https:\/\/www.wework.com\/ideas\/author\/creator"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.wework.com\/ideas\/wp-json\/wp\/v2\/posts\/2646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wework.com\/ideas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wework.com\/ideas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wework.com\/ideas\/wp-json\/wp\/v2\/users\/884"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wework.com\/ideas\/wp-json\/wp\/v2\/comments?post=2646"}],"version-history":[{"count":1,"href":"https:\/\/www.wework.com\/ideas\/wp-json\/wp\/v2\/posts\/2646\/revisions"}],"predecessor-version":[{"id":47427,"href":"https:\/\/www.wework.com\/ideas\/wp-json\/wp\/v2\/posts\/2646\/revisions\/47427"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wework.com\/ideas\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.wework.com\/ideas\/wp-json\/wp\/v2\/media?parent=2646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wework.com\/ideas\/wp-json\/wp\/v2\/categories?post=2646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wework.com\/ideas\/wp-json\/wp\/v2\/tags?post=2646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}