The updated hero area has a carousel design that prioritizes certain services and products to users, has a clear information hierarchy, concise CTAs, bolder headlines, has SEO-optimized keywords, and social proof.
The previous hero area had repetitive copy misaligned with the company's voice, no CTAs or a clear conversion pathway.
— PROJECT NAME
Stacey & Lloyd UX Redesign
— PRODUCT GOALS
Conversion, new payment method, responsive website, CTR improvements
— MY ROLE
Content style guide, Content audit, UX writing, Usability testing, Information architecture, User flows, wire-framing, team collaboration.
— TOOLS
Figma, Optimal Workshop, Whimsical, Airtable, Google Suite, Jira
— DATE
Jan to July 2020
Stacey and Lloyd (my previous employer) is an Edtech consulting firm that offers professional training and human capital development to individuals and corporate clients across multiple industries.
Challenge: Through our service survey, many users requested forms of online payment which was missing on the website. The web content was also outdated and its language was robotic. Since the pages were not SEO-optimized, Stacey and Lloyd's content rarely showed up in the top 3 Google page results.
Solution
As the content design lead, I collaborated with a team of 5+ UX designers, writers and researcher to introduce an online payment method, conduct research and usability testing, rewrite copy to optimize for SEO, create a style guide and design wireframes.
Gathering data through secondary research
Constrained by limited budget for primary research, I contacted the analytics team to provide us with statistical data on the website users. The goal was to understand who interacts with the company online and to provide demographic criteria for selecting participants in our planned usability testing.
The website had a high bounce rate and low session duration which means users are leaving almost as soon as they get to the landing page (Stacey & Lloyd's Google Analytics audience report, Feb 2020).
The 18% interested in moving was relevant because majority of our customers who had bought our courses were newcomer professionals in Canada seeking to transition into tech.
User Persona
While Google Analytics provided helpful surface data, it was incomplete in providing a holistic picture of our users. I reached out to the sales team to content analyze previous testimonials, customer follow-up calls and feedback. This was helpful to understand why users visited the website, what made them leave and what influenced buying decisions.
Findings from the user research proved valuable to creating our user persona.
Usability testing
To understand what was working for the users, my team and I conducted usability tests using the tree jack test in Optimal Workshop. The objectives were to learn what users would like to see, navigation issues, end-to-end conversion journey and opportunities for improvement.
32 users participated in the test remotely and 23 (72%) of those completed all 8 tasks. I drafted the test script and reviewed the results (below) from a content perspective.
Reframing Assumptions
The test results was slightly different from what we were expecting. We had earlier assumed that the major change the website needed was to introduce a new payment method but the test results showed that users were also confused as to where to find our courses.
Initial SEO Data Research
Advocate for SEO optimization
I collaborated with our SEO specialist to identify the top-performing keywords (image on the left) people use to search for industry-specific content on Google.
Understanding keywords data
With our list of top-performing SEO keywords now, our SEO specialist and I recommended which ones should be included in each page when we rewrite the copy.
Content Style Guide
Backed by user research, I created a content style guide (below) to ensure the copy, messaging, and voice were consistent.
Content Audit
Following our style guide, my teammate and I audited of Stacey & Lloyd.com's content with a focus on the user's experience. The goal was to assess whether terms are used consistently and determine what content to remove. We organized our review by URLs and recorded our findings in a spreadsheet.
Information Architecture
Based on the usability testing results, I archived the services, blog and gallery menus. I then moved the academy, advisory and consulting menu from the sub-menu services section to the main menu. This shows users at first glance what value we offer to them and speed up the conversion process for interested users. The UX designers followed my recommendation in the content audit by making the logo stand out in the menu bar section.
Information architecture results
User Flows
My teammate and I mapped the user flows (below) where I visualized a user’s journey after they visit the website. Their next steps can include exploring what consulting and advisory services we offer, learning about the company and purchasing one or more professional courses with the new payment method.
User flow designed on Whimsical
Taskflows
When the interaction designer on the project left the company, I stepped up to assist the principal designer in creating task flows. I mapped out the series of steps the user has to complete to purchase a professional course.
The task flow was important to the product goal to visualize the pathway for the new payment method.
Wireframes
After defining the core functionalities, my team and I created quick, low-fidelity, wireframes. I optimized the headlines by adding more copy that highlights the value we offer to our clients: individual professionals and professionals. I used an active verb CTA to encourage users to learn more about us and our services. These headlines summarize what the page is about and communicate the company's objective to the user.
I designed two CTA buttons in the hero area for A/B testing: 'learn more' and 'view more'. Most users clicked on the 2nd button and engaged better than with 1st button.
Redesigning the Content
Redefining the company
The previous 'About us' page had information that repeats content in the landing page and services section. Also, based on our competitor analysis, most business 'about us' page showcases the company's values which is missing from Stacey & Lloyd. I added the core values with expanded texts (below).
Providing social proof
Research has shown that adding social proof makes new users trust the credibility of the product or service and feel more at ease.
I removed the general statement and replaced it with statistical evidence of the company's achievement over the years implying an excellent reputation.
Microcopy and CTAs
The previous copy listed the course with no descriptions and no clear purchase path. I wrote brief descriptions about each courses, their outlines, and delivery method to provide as much information the user needs to make a decision on the spot (image below). I applied white space, bullet points, paragraphing to make the copy easy on the eyes.
Billing Form Fields
I wrote clear and concise copy for the new billing page and provided hint text in fields where the user might need help. I explained what happens next when they place an order and how payments would be transferred from their bank account to ours. As part of ethical design principles, I informed the user how the data collected would be used.
Billing and checkout page
Contact Forms
The previous copy had a robotic language. I revised it to relatable language, adding, adding helpful hint texts (image below).
Creating sub-headers
In collaboration with marketing, I created sub-header texts to nudge the users to purchase the academy courses. I used action verbs to drive the user toward the ‘register now’ button on the page. These have also been used as advertising assets to get results for click-thru rates.
Results
- The updated website generated 46% online conversion within 2 months as against zero in the month before its redesign.
- The website contributed to improved operational efficiency by automating the payment process and saving support time.
-The CTA ‘register now’ led to a 54% increase in clicks to the billing form as against 23% for the previous “learn more” CTA.
-Usability testing before the redesign process proved invaluable in helping us understand what the user would like to see.
-Team spirit: Some of my recommendations were not implemented. While I advocated for my suggestions, I happily supported the team’s final decisions.
-Cross-functional collaboration: I regularly collaborated with marketing which helped me understand their goals better and align our strategy.
HEADLINE
Two weeks after launching, the updated landing page ranked on the 3rd Google Search Results (page 1) from result 34 (page 4), after including SEO keywords in the copy.
