Guidebook Homepage Redesign

Rethinking Guidebook's home on the web

Company Guidebook
Year 2019
Additional design Emily Suh, Guillermo Mont
My role
  • Design direction
  • Design implementation
  • Front-end development

Summary

After a few years of the same home page for Guidebook, we decided it was time to give the page a facelift and update the messaging. This project involved working closely with marketing, and had contributions from each designer on the team.

Goals

  1. Refine the messaging of the home page to better describe and position Guidebook as a product
  2. Clearly represent Guidebook's competitive differentiators and value propositions
  3. Visually overhaul the page to better reflect Guidebook's branding, including the updated illustration style
  4. Optimize the page for SEO

Success Measures

  1. An increase in page rank for high priority search terms ("event app")
  2. An increase in sign ups
  3. A decrease in bounce rate

http://guidebook.com

The updated Guidebook homepage (click to view entire page).

Process

  1. Ideation with marketing

    The project began when we brought on a new VP of marketing who set an early goal of updating Guidebook's homepage. This goal was determined for two primary reasons:

    • Guidebook's SEO rank had been slipping and we wanted to improve it, and
    • The homepage no longer fully reflected what Guidebook offers as a product and service

    I sat down with marketing and the design team and began ideating on the new page. We determined early on that we wanted to focus the page around 4-5 features and concepts that Guidebook offers which set us apart from the competition. These should also serve as value propositions - they should double as things the customer can use to improve their business or event. This list was narrowed to:

    • Ease of building and set-up
    • Security and scalability
    • Comprehensive branding
    • Award-winning support
    • Industry leading engagement features

    Additionally, we wanted to include some "social proof" for Guidebook, so customers would be confident they could trust our service. To do this we settled on both a client use-case section, as well as a logo list.

    Finally, we decided we wanted to refine the hero section to include a simplified version of our mission statement, as well as some representation of the app's UI to better communicate what exactly Guidebook is.

  2. Early concepts

    I worked with an illustrator on our team (Guillermo Mont) as well as a marketing designer (Emily Suh) to design the initial concepts for the home page. These were initially sketched out on whiteboards to play around with the structure and flow, and eventually made higher fidelity in Sketch. We had come up with the motif of a "wave" which we had been using in marketing materials and wanted to bring over to the new homepage. Additionally, we knew we wanted to lean heavily on illustration. Our marketing designer put together a few concepts, including many variants on the wave position and flow. These were narrowed to a single structure and flow that we were happy with.

    We sat down and whiteboarded various illustration ideas at this point too. We wanted the illustrations to be friendly and approachable, yet feel distinct from the various other illustration styles which were now popular. We also wanted the illustrations to heavily lean into our brand colors so that the page felt cohesive and refined. After many illustration compositions, we landed on a set that we were happy with.

  3. Refining the design

    Once the general design and illustration concepts were settled on, I worked closely with the marketing designer on the team to produce higher fidelity versions of the page. At this point, we were using placeholders for illustrations and device frames, so it was mainly refining the spacing, structure, and layout of the page. It was important at this point to adapt the designs for small screen sizes as well, as much of our homepage traffic comes from mobile.

    At this point, our illustrator was working on the final versions of the illustrations, made in Sketch.

    Some illustration exploration for the homepage. Illustrations by Guillermo Mont.
  4. Marketing sign-off

    Once we had the final page flow and layout, we presented to the marketing team to gather their feedback and approval. We presented both the page with placeholders, and a version with photos of the rough illustrations as placeholders. There was minor feedback, but nothing stopping us from moving forward to development.

  5. Development & implementation

    This phase is where my involvement became much more hands-on rather than direction. Having built most of our marketing website, I knew the code-base well and could implement a new version of the homepage quickly. There were a few main components I wanted to get right:

    • I wanted the page to be very lightweight with as few external calls as possible. Page speed is important for SEO purposes and this was important to our goals for the project.
    • I wanted to have a dynamic section at the top of the page showing off the UI of the application. Our design has always been a selling point of the product, and I wanted to highlight it prominently.

    To accomplish point one, I spent a lot of time optimizing both our code and assets used on the page. We set up our images to always use injected SVGs where possible to prevent additional network requests, and highly optimized bitmap images where not. We leaned in to using modern web standards where possible, like .webp images, srcset, and picture elements. Additionally, much of the app UI was recreated using pure HTML and CSS, to cut down on requests.

    To create the floating device in the hero, I wanted to create something unique and not use a pre-built device from an existing library. To do this, I downloaded a 3d model of an iPhone X and opened it up in SketchUp (3D modeling software). I spent some time adjusting the device textures and lighting to get it to a point where it would match the general aesthetic of the page.

    Next, I opened up the model in browser using three.js. This allowed me to play around with the model and rotate it to get it to a position that felt natural within the hero section. I considered using three.js to render the model in the production version of the page (and draw UI on the device as a texture) but decided against the idea in the interest of speed. I ended up exporting angles of the model as highly optimized bitmaps, and using CSS/HTML to insert the UI screenshots and distort them to appear as if they were part of the model. This technique proved both quite fast to iterate on, and the results were something I was happy with.

    localhost:4000

    The raw 3d asset opened using three.js. I would position this device to an angle I was happy with and then export the canvas contents. The red screen was easy to delete to create a hollow device frame.

    In addition to the device and app UI, I wanted to include some "floating" UI above the phone frame to highlight important parts of the UI for the customer. Given that we were showcasing our newsfeed feature in the app screenshot, I decided to float some newsfeed style cards above the device, showing the customer some examples of the event-based content they could expect to see on Guidebook (a popular sessions card, for example). This UI was re-created entirely in CSS/HTML, which helped with page speed as well as easy translations.

    localhost:4000

    A video of the floating UI during development. The cards are built entirely using HTML/CSS, making translations especially simple.
  6. Testing & launch

    Once development was complete, we sent an internal version of the page around to the company for testing. We had team members walk through the sign up flow to verify that everything worked as intended. Once we were confident, we pulled the trigger and sent the new page live. For a period of time, we A/B tested how the new page performed against the old home page. This test was live for about 2 weeks to gather enough data to confirm that the new page was indeed performing better than the old one. After the A/B test was complete and the results were verified, we deprecated the old home page.

  7. Validating goals

    After the new home page was formally in place, we continued to monitor our site usage and traffic to validate our initial success measures. Our sign up rate and conversion rate did indeed increase, giving credence to both our value propositions and re-arrangement of the hero content. Importantly, our SEO ranking for key terms did increase. We returned to the front page of Google search results for "event app" (and as of writing this case study rank #6). Our lighthouse score was something we tested during development; it still remains very good.

    Guidebook's homepage lighthouse score

Conclusion

While I wish we had slightly more time for development to allow more experimentation with things like using an actual 3d phone model in browser, I believe that under the given constraints and team size we produced a page which improved in meaningful ways over the previous iteration. The new design is clean, focused, and has set the bar for future additions and updates to the Guidebook marketing website.

Additional materials

View Guidebook's homepage