This is my final project in the UX Immersive Program (!!). This one was a little different — it’s focused on website optimization via A/B testing, done solo, and we got to pick our web page. Here’s how it all went down!
The ultimate objective of this project was to optimize an existing website by measuring and then improving its effectiveness and efficiency.
When users can do what they need to do as quickly as possible, you have happy and returning users…meaning more sales and more loyalty.
We measure 1) Effectiveness through “task success rates” — that’s how often users are able to complete a task.
We measure 2) Efficiency through the “time taken on task” — pretty self-explanatory, the amount of time taken to complete a task.
This is the method and process I went through and will be walking you through…
- Choose a web page of choice
- Identify user goals & Diagnose the original website
- Design a solution
- A/B test with 4 tasks
I chose the front page of the Centre for Social Innovation (CSI). They are a community and co-working space in Toronto and New York. While co-working spaces are fairly popular now, they started back in 2004 in Toronto, making it one of the world’s first co-working spaces! What makes them different? They’re not just any co-working space, they’re made up of thousands of organizations, entrepreneurs, and businesses that lead with social and/or environmental mission. Maybe you’ve heard of: HotDocs, Free the Children, TechSoup, Rabble.ca, or StopGap?
I adore CSI and the work that they do…but, their website…
1. IDENTIFYING USER GOALS
The first step I took was to identify user goals of their website. I did so in three ways:
- Looked at other co-working space websites to see what other websites tended to have/not
- I reached out to my own social network to see what people used the CSI website for (members and non-members)
- Contacted CSI directly, and they were able to provide me with most visited pages (user goals), along with CSI’s own organizational goals
2. DIAGNOSING THE ORIGINAL (the “A”)
Next, I looked at their existing front page. Part of the parameters of the project was to convert it to a mid-fi wireframe, and in grey scale (the focus is the UX and not UI, so pictures were also changed so it doesn’t become the focus). I’ve annotated issues below.
Overall, the page is very long — some pages could only be reached from the footer (e.g., contact), making it likely that people would bail before getting down there. Also, it’s quite content-heavy which creates cognitive load where you don’t quite know where to look first.
1. TOP NAV
▹ Categories are not clear, or they seem to overlap — this creates scatter
▹ No “contact” — it’s all the way in the footer
▹ “Sign in” placement is not intuitive in the middle
▹ “Apply” as a CTA could be more appealing
2. HERO AREA
▹ Tagline is not descriptive of what CSI does
▹ CTA is too small, gets lost
▹ Secondary CTA competes with primary; it also links to an 8-min. video no one will watch
3. MEMBERSHIP SECTION
▹ Does not have complete information: 1) pricing; 2) doesn’t include “Community Membership” package
4. SPACES SECTION
▹ Images for each location are too big (it takes up the whole screen in a viewport)
5. CTA — REPEATED
▹ CTA wording is not consistent throughout the page, i.e., “Join CSI Today” vs. “Apply”
▹ No site map
▹ Email opt-in box is not clearly outlined
COMING UP WITH A SOLUTION (the “B”)
….or, like, seven….most of the latter work was in refiguring out the top navigation/information architecture (IA).
Here’s what I eventually came up with. Overall, I’ve cut down the length by taking out some of the sections, and brought forth some of the top tasks by now including them in on the front page (e.g., events, booking space).
1. TOP NAV
▹ Consolidated and simplified categories (from 5 to 4: “Culture”, “Community” and “Impact,” into “About” — because there was a lot of overlap; “Culture” was unclear; ▹ Added Events based on one of the popular tasks
▹ Same CTAs, but kept language consistent throughout the website, and swapped places
▹ Added a search
2. HERO AREA
▹ Changed tagline to more descriptive
▹ CTAs as buttons, which stand out more from background
▹ Added “Book Tour” as a secondary and complementary CTA — which you have to dig through to find on the current site, and it shouldn’t be because it’s something that potential members need to close the deal (prominent CTA on other co-working sites)
3. MEMBERSHIP SECTION
▹ Added pricing info; and community membership package for easy info
4. CTA — REPEATED
▹ Replaced with consistent wording, and moved up to the middle of page
▹ Made smaller
6. NEW SECTIONS
▹ Added in sections for “Book a Space” and “Events”
▹ Added Sitemap and cleaned up opt-in box and CTAs are consistent
TESTING TIME — A vs. B — Ding! Ding! Ding!
Finally, it was time for A/B testing between the original and my design, along with four tasks*(see full tasks at the very end of this article).
Again, the goal was to see if, (1) people can more successfully complete the tasks (≥80%), and (2) and if they can do it quicker.
How did I do in one round?
After two days, I was able to increase the overall effectiveness by 35% (success rate), and overall efficiency (time on task) by 42%!
Let’s break it down:
- All my ‘success rates’ are higher than original for all tasks, and above 80% (“new” column)
- The ‘time on tasks’ are faster for my design for all tasks (“new” column)
Given the parameters of the project, it was a bit limiting as I had a lot more tasks I wanted to test based on my changes. Though, testing too many changes at once also makes it hard to know its individual effects. For future consideration, I would definitely want to test the order of the sections on the page, and further testing of the navigation. The page is still pretty long, so removing more of the text on the front page would help to reduce the cognitive load as a result of a long page.
I’m pretty happy with my results from just one round of testing, and found it insightful to see how much impact a few little, but strategic changes can make to a website. I’ve learned how important the top navigation is and how that was the key to optimization for this specific website. Originally, there were a lot of unclear and ambiguous nav labels which created scattering; the CTA wasn’t consistent nor impactful; there are pages you can only access through the footer (after scrolling a very long page); and the page sections didn’t reflect what users commonly use the website for. Utilizing this method — that is, making impactful tweaks is more realistic and effective way to improve the UX of a website (rather than redesigning from scratch), and I’m excited to add this to my UX tool belt.
This is all to show, that in UX, and in the world — small changes can and do make big impact!
If you want to see the full-sized screens that were tested, you can view them here (use the forward/backward keys to switch between the two versions): https://invis.io/QCB5OMPTX
1. You’re interested in finding out the pricing options for a workspace — where would you click to find this? (pricing)
2. You heard the Centre of Social Innovation is hosting the Toronto Storytelling Festival and you want to check it out, where would you go to find out more details? (events)
3. You’re an existing member of the Centre for Social Innovation. Where would you go to change your home address online? (intranet)
4. Without using the Search function, you’d like to see what organizations have set up offices at the Centre of Social Innovation, where would you go? (members list)