After 12 years at OUP (5 in the UK and 7 in the New York office) I was ready to move on and look for new challenges and experiences. I knew I still wanted to work in education or some area I knew my contributions were improving people's lives, not just making a company money (but still doing that too 🤑).
SparkNotes.com offered an interesting opportunity. Most high school students in the US (and many other students around the world) rely on it to improve their understanding of literature and other subjects. At the same time it was different to my OUP work as it is aimed directly at the students, not sold to schools/teachers/ministries. It is a free to use, ad-supported site, so things like SEO and analytics driven development would be whole new areas for me to explore.
Also it was at a time when the business was looking to explore a number of new avenues for the brand, so as well as maintaining and improving a well established site (going on 15 years old at the time!), there would be many opportunities to work on entirely new concepts.
When I first joined the team SparkNotes.com had just undergone a significant redesign. For a number of years the site had been gravitating more and more to focusing on blog and social content. The main bulk of the site (educational content) was not surfaced at all in the main UI. Despite the blog content getting around 10% of the traffic and the main content the remaining 90% this did make some sense. Most of SparkNotes traffic comes directly from search results and users tend to find what they want and leave.
The change in 2018 was initially to pare back the site and give more of an authoritative feel. To feel more like a reference site and allow users to very quickly find the content without distraction. Around the time I came onboard several other new team members came in and we decided that whilst the cleanup had been a success, we needed to make more effort for users to engage longer with the site. We wanted more people to come specifically to SparkNotes rather than just search for Study Guides on Google. Also the changes hadn’t had the positive effect on page views people had hoped for.
Continuous improvement ♾
We needed to focus on new initiatives and had no desire to make more wholesale changes to a site that had gone through a redesign roughly every two years for a decade. Fortunately the new initiatives would be integrated into the core site, so we were able to work out ways to achieve our core objectives whilst also enhancing the core user flows.
We also switched to focusing on small frequent updates so we could track individual changes success or otherwise through custom analytics. Below are a few of the small scale UX tweaks we made to improve the site through the year.
Heading Hierarchy
Most users land on an interior page from a Google search so have no context for where they are. The headings were dotted around and broken up by a large advertisement that was far more prominent than the site content. We added a splash of color to anchor the page, moved all headings to the left edge, removed duplicate UI elements and moved the ad up and above all UI and headings on the page. This made it much easier for a user to see where they are at a glance and made them more likely to click around to other sections of the Title they are viewing. 🧭
Promote our stars
No Fear Shakespeare is a product line by SparkNotes that is almost as well known as the core brand. It offers modern day line-by-line translations of Shakespeare and other classic titles. For Shakespeare it is as popular as the Study Guide content. However it had been hidden away in subsection of the main study guide. Moving it out to be level with Study Guide in the hierarchy allowed it to stand out more and begin to regain traffic. It also set us up well for the future initiatives as Teacher Guides, Infographics, and Graphic Novels would also benefit from not being part of the main Study Guide material. 🤩
Focus on the content
These Facebook and Twitter icons were sticky - as you scrolled down the page hey stay in view. This meant they took up over 100px width from the entire page - and nobody was using them. We moved them to a less prominent position (and later removed them entirely) allowing us to get a much more comfortable line length for the main content. 🤓
Cleaner design and cleaner code
The right column of the page is used to provide links to elsewhere on the site and also includes some ad slots. The UI design of the internal links had issues with being too fussy, having too many elements, and also having inconsistent click zones and lack of hover states.
The highlighted areas show clickable elements. Basically we switched each item from multiple separate links (often to the same place) to just one link. Widths and spacing were cleaned up and brand colors used more prominently. Also there was a rebalancing of priorities - images were made a little smaller on the blog posts and author links taken away to allow larger text headings. These were the real draw so needed more prominence. These minor tweaks saw engagement with this column increase by around 30%. 💪
Signposting and logical flows
Some articles on the site are multi-page. These used to have small numbers at the bottom. There was also often a link to a related quiz page before this. At the very bottom were links to the previous and following articles in the Study Guide. None of these were particularly prominent or clear what the preferred route was. In particular it was unclear what the small numbers did (supposing you noticed them at all). This meant a lot of people never clicked the second page.
We addressed this by removing the concept of having both a link to the next page in this article and the next article - if you were on a multi-page article and weren’t on the final page the ‘forward’ link would be to continue with this article. This is the more likely user flow and for users who did want to break away mid article and jump to a later one there were other navigation elements for this.
We also moved down the quiz link to below the pagination and added in other links users may be interested in to give users a more complete picture of what resources we had available - increasing the chance there would be something that caught their eye and kept them engaged with the site.
These changes doubled the pageviews of page 2 of multi-page articles and also saw an increase in users clicking through to the next article 😁. We did see a drop off in quiz pageviews 😢, but this was to be expected and was not as significant as the gain from multi-page articles.
And so on, and so on…
Dozens of UI improvements were made throughout the site as we continued the process. On the Title Landing page we brought in a reworked navigation bar at the top, moved the ‘Buy the physical book on BN.com’ pod to the right hand side, made text and link click zones bigger, redrew icons bigger and in SVG format so they stay sharp on all screens.
Code performance = UX, Accessibility = UX 🧑💻
How fast a page loads, how smoothly it scrolls, how quickly it responds to interactions, how little the layout 'jumps' whilst a user is viewing a site all contribute to the overall experience. Whilst making these UX tweaks I also committed to improving the underlying code to be more performant (and also more maintainable, but that's another story). Consolidating styles and using modern CSS layouts such as Grid and Flexbox allowed us to reduce the gzipped css bundle by over 25% in under a year - and this was whilst adding major new sections to the site. Even more substantially we were able to reduce the client-side javascript by almost 50% and removed over 90% of code that ran on page load. Images were also much better optimized (using svgs where possible, running jpegs and pngs through compression tools, serving WebP formats in some cases, and using media queries and/or srcset attributes to supply appropriate resolution files).
Likewise, it doesn't matter how good the experience is for other people if you can't use it. That's why it's critical to think of accessibility as part of user experience To that end we worked on bringing in fully accessible colors, increasing font sizes, adding meaningful alt texts, providing first-class keyboard control to tools and attempting to improve screen-reader support whenever reworking a UI element. These fixes are crucial for a site as without them they can render the site completely unusable to some people. However in most cases they also make the experience better for all users. Sometimes I feel like using my keyboard to navigate a page - I don't have to, but it's annoying if a site doesn't work with it when you want to. I don't have motor control issues so I can click a small button with a mouse easy enough, but sometimes I'm walking and using my phone - i'd like the touch targets to be big and easy to hit.
When running Google Lighthouse tests internally with advertisements turned off we were able to hit scores over 90 for performance, best practices, and accessibility on many pages - up from 60s-70s before we started the cleanup. With continued effort we should be able to hit 100 for all of these. These may be just numbers but they do reflect real performance improvements that should provide a better experience to users. THe caveat is that the biggest performance hit on the site is always 3rd party ads. These drag down the 95 performance score closer to 50 in real-world usage, so is an area that still needs improvement.
Fully responsive for all screen sizes 📱
My view on responsiveness is that the site should feel like it was designed to fit your exact screen regardless of its size or shape. I don’t design for one, two, or even three specific widths - I make sure my page works at all widths.
Also we shouldn’t make assumptions about whether a screen is touch-screen or not based on the browser width - you might have a narrow browser window on a laptop because you’re viewing multiple apps at once. So all size screens should have big, finger-friendly controls, not just small ones. All size screens should have clear focus styles and keyboard control, not just big ones.
Finally breakpoints shouldn’t be only determined and set at a few key widths that match a notional idea of ‘device types’. It’s fine to start from here, but we should look at the content and always be comfortable adding more breakpoints on a page or even specific component to provide the best fit for it. Where possible I design and code components to work at any size even if they usually only appear at a few set widths in the current page design. That way if we want to use them somewhere else in future at a different width we don’t need a new design - or if we adjust the width of something else on a page they already exist on, we don’t always need to tweak them too. There’s limits to this of course (until we get Component Queries anyway) but it’s a general concept I aim for.
The 2018 redesign didn’t really follow any of these principles, so whilst we did bring them in during our gradual UX and UI overhaul, we didn’t reach 100% on these goals yet. But as you can see in the video below (or on the live site if you want to pick a page and try it yourself) we got pretty far with the idea. The components all flex fairly elegantly (and the few that don’t are ones we still have plans to replace).
Processes and plans 🗺
Working agile whilst maintaining a long-term vision
One of the challenges to the approach of making improvements to the core site either in downtime between longer term work or when we can tie it into those bigger projects is maintaining consistency. At a smaller scale this was ok - in some cases this meant we had transitional designs where we updated the layout of a component but not the aesthetic until more of the page it sat in was ready to be updated. In other cases we sacrificed a little visual consistency for a bigger UX win.
The bigger challenge however was how we kept our longer term goals in mind. How could we be constantly evolving different parts of the site whilst aiming for overall consistency at some point? How could we keep the whole team and wider business aware of where we are going? How could we respond quickly and change as business goals, opportunities, or challenges present themselves? I don't think we got to grips with this fully, but what we started to do was build vision docs for key parts of the site. These would show where we were in 2019, where the site is now, and where it would hopefully be by some point in 2021/2022. These designs were not particularly polished, but they would show a rough visual of all the different changes we had planned. Any time a new smaller project came in or larger business goals shifted these could be updated to include new things or remove others. That way smaller individual proposals could be drawn up for specific projects or sprints that didn't need to fully reference their impact on the wider site. The vision docs would always work as an accompaniment in that regard. It allowed us to focus on the detail as we worked whilst still having the big picture in mind. It also made it easy for us to pull out small UX upgrades whenever we had some unexpected downtime in a sprint.
A small example of this can be seen here. In late 2019 we began reworking the Author pages. We had a design proposal for a full redesign (not shown here), but didn't have the business case to do it ahead of many other things we were working on. However there were some SEO issues that needed resolving, some shared code from other pages we wanted to remove, and also we wanted the headers of the page to feel consistent with other interior pages we had been updating. Given that we were able to spend a few points in 2 sprints to update the top section of the page. This resulted in a more cohesive feel, better Lighthouse scores, better responsiveness, and better SEO rank. One crucial element though is the small circular author image. The circle wasn't an arbitrary choice - it was part of the wider vision plan to bring in more author images through the site. This just happened to be the first component we had a business case to rebuild. In early 2020 we rolled out a new design for Subject by Author pages (again mainly to improve SEO, code performance, and responsiveness) that also makes use of this smaller circular image. In 2021 and 2022 you will see it roll out in even more areas. This shows how we are thinking of the UX and UI holistically but picking places to update more on business goals (SEO being a fairly big driver).
Mid-to-large project proposals
SparkNotes is a fairly small team and likes to work informally where possible whilst still having clear plans and accountability. I would work closely with the rest of the project team to work on vision docs for a project. These would usually be put together based on user stories, requirements docs, user flows, and sketches. These vision docs pulled together the core functionality, a loose idea of the UX and UI, and some key technical ideas (how page data should load, whether a state change results in a URL change, etc). These wound up sitting somewhere between an internal pitch document and wireframes. These docs would go under several rounds of revision and would also be accompanied by a more typical business plan document. They worked well to get various stakeholders on board with the plan. They would often be the starting point for more detailed wireframes - these pitch dcs would only show some key UI for flavor or showing key user steps - eg the example below has no mobile designs shown at all.
Functional prototypes
At SparkNotes we weren't too wedded to a specific workflow for UX deliveries - it depended on what the product we were making was and what we wanted to show. Sometimes a project would get a really detailed set of wireframes as the handover to the dev team. Sometimes it would be a high resolution composite. Often I would hand over a snippet of premade HTML and CSS to be reimplemented in our codebase. An example of that is for form elements where we wanted to be able to design exactly what it will look like - it's easier to just work with the CSS directly than to implement in Sketch or Figma and then find there is something that can't quite be achieved the same way with code. Whilst we did have Sketch files showing these, the main handover was this Pen.
Other times we want to produce something more sophisticated and we reach for a functional prototype. One such example is this for a new Teacher product.
There were a few reasons to build this an an interactive product:
It was introducing a lot of new typographic styles we wanted to reuse across the site so working in code avoids us designing something impossible to achieve in code. Line height, margins, etc are much easier to reason with directly in CSS than in Sketch. We can also see how it reads at all different page widths just by adjusting the browser window.
We wanted to give stakeholders a feel for the bulk of content and how it would be navigated to show what we were producing would be a compelling product.
We wanted to quickly prototype some new navigation UI without the complexity of building it in our (at the time) XSLT/JS hybrid codebase.
It gave us something much easier to show to potential users for feedback.
The project was going to take a long time and have a pretty big impact on our core site so getting something as real as possible quickly for the business to evaluate was crucial.
It works as a marketing tool as we can record it in use.
In its early stages the UI in it looked more basic than this - see here. Rather than produce outline wireframes we were able to use this early prototype. Once we had finalized the UI design by working through some high-res static visualizations we were able to go back to the prototype and update to match the final design. This meant we could hand over this prototype to the dev team instead of a detailed style guide or really precise wireframes.
Identity and UI ✳️
The SparkNotes brand had undergone numerous revisions since its inception in the early 2000s, with large scale visual overhauls of the site every 18-36 months. The logo had also changed frequently at first, but since 2013 had settled down to a mostly fixed design (with some minor re-drawings and color changes). The feel by 2019 was that the identity was out of sync with where we wanted the brand to be. The logo had very definite early to mid 2000s vibes and the site headers, whilst being the most prominent aesthetic element on the site, were fairly stark and cold. Also the focus on photographs of authors had meant it was mainly pictures of old white men.
We reworked the logo using a simple, soft, modern sans serif typeface whilst keeping the asterisk from the previous version. Making 'notes' the (slightly darker to be accessible on a white background) blue allows us to use the same concept for spin-off brands but replace the blue with a different color - here's a teacher version.
For the headers we decided to focus mainly on the content and settled on illustrations. This allowed us more range than photography, helped set the gentler aesthetic we wanted, and also works really well with responsive design. It also allowed us to include a diverse, representative group of characters, more closely resembling the ages of our users. This was important for us because we'd rather people be thinking about themselves and what they can learn, or how they feel when reading a book, than thinking about who wrote it (though that is important too sometimes 😄). At the same time as adjusting the content we reworked the layout for much better UX. The search bar was moved down to slightly reduce its prominence and the 'popular titles' links were made much more prominent and given more functionality. The search bar was functionally redone also with improvements to keyboard and screen reader support.
As usual with our phased approach, this didn't all roll out simultaneously - the logo change appeared first, headings on the main hub pages were next (homepage, Shakespeare, Literature), and then the smaller 'other subjects' (math, biology, poetry, etc) came last (along with a redesign other subjects landing page). This happened over the space of a month or two and the user response was positive.
Also in the new designs we made sure the header artwork appeared at all sizes - on the previous design the imagery disappeared below 800px wide. With almost 40% of pageviews on mobile, it's important we project our brand image well at a small size too.
Closing time 🍺
Overall my experience at SparkNotes was a great one - I learned a lot about SEO, developed my coding skills, took responsibility for shippable code, even helped out with a few financial projections here and there. The whole team was a really great bunch, with everyone willing to help out and pick up new things, and it was clear everyone had a passion for what we were making. In the 18 months I was there I think we made big progress in updating the brand, improving the UX of the existing site, greatly improving the performance and maintainability of of the codebase, launched several new components to the site (though the big one we were all looking to build never really got going 😭), and had begun to see in the data that that our changes were having the intended effect. Oh - working to make the business more data driven is something else we worked on. Also far less due to my involvement, but I was really proud of the work we were doing to bring more diversity to the content on the site, and that we were able to show some support for Black Lives Matter and minority injustice in general, even if in a small way.
There were some low points - Covid slowed our momentum as I'm sure it did for most people, some interesting projects struggled to get off the ground, and we went through three dev teams in a 13 month period, so overall progress was slower than I'd hoped. Also I had the 'pleasure' of learning some XSL(🤮) about ten years after most people stopped using it. Overall I'm proud of the work we did, and looking forward to the team moving it on to the next level 💪.