Reimagining a Startup’s Content Strategy and UX Design
SpotSyt is a digital marketing company that helps business owners cocreate microsites and promotional content. I worked with a small UX team to audit their current website, conduct research, and propose a site-wide redesign.
Role: UX Writer and Designer
Deliverables: Voice and Tone Style Guide, Content Audit, User Personas, Design Audit, Competitor Analysis, Wireframes
Introduction
SpotSyt (previously named SmartSyt) is a digital marketing startup that aims to act as a middle-ground solution between DIY marketing tools and full-service digital marketing agencies. As SpotSyt was entering a period of rebranding and revising their product, I was brought on with a small UX team for a four-week design project.
Although our original project goal was to audit the site and create an onboarding questionnaire for new clients, after observing the current website we proposed prioritizing a reorganization of the site’s information architecture and content strategy. This way, we would be able to set the foundation for the site’s upcoming redesign.
Project Goals:
Create new information architecture for the site
Create wireframes for the new site’s onboarding questionnaire
Create a prospective, low-fidelity mockup for the site’s new homepage with recommendations for future redesign
Research
Our research phase had two main focuses to help us reformat the current site.
Get to know the brand
Get to know the competitive field
Get to know the brand
To learn more about the vision of the startup, which was named SmartSyt at the beginning of our project, we first set up stakeholder meetings with its founder and lead web developer. We wanted to know the space the company was looking to fill in the market, who they considered their biggest competitors to be, and what kind of experience they were aiming to build.
As the UX writer for this project, I also used these stakeholder interviews to get a feel for SmartSyt’s brand voice. Working with its founder, we began to define the personality and voice of the brand as being innovative, fresh, unexpected, collaborative, and adaptive. I would later use these principles to help develop a content style guide for future designers and writers.
Business Goals
From our stake holder interviews we identified the main business goals for SmartSyt’s future website:
Create a clear user story that educates users about SmartSyt and entices them to sign up for the service
Automate an onboarding system to give interested users a free consulting session and pricing quote
Target Users
During our stakeholder interviews we also learned that SmartSyt is geared toward small to mid-level business owners in various industries who lack the technical knowledge or time to produce their own marketing content and microsites. Their key user archetypes included speakers, authors, and entrepreneurs who want to use SmartSyt’s services to promote upcoming events.
Using SmartSyt’s marketing research we created two user personas to show the variation in the startup’s user base. Our “Eric” persona represents users who have some technical skill but lack the creative expertise to produce and edit their own media. Our “Michelle” represents the users who lack both technical web-building proficiency and media production.
Get to know the competitive field
To begin this phase we took SmartSyt’s list of competitors according to its stakeholders and began conducting our own research. We first wanted to familiarize ourselves with the kinds of services provided in the digital marketing field and get a feel for how these websites are typically set up. Since SmartSyt was interested in designing a sign up questionnaire, we also paid attention to how other services onboarded new users.
During our research we notably discovered two other brands with very similar names to SmartSyt called Smart Site Services and Smart Sites. These companies also offered digital marketing and consulting services, so we made note of this to bring up at our next stakeholder meeting.
After narrowing our research down to five main competitors representing the spectrum between DIY marketing tools and agencies, we proceeded to conduct in-depth competitive analyses.
Our main goals were to learn:
How other brands explain their service to new users
How other brands structure their site architecture
How other brands guide new users to sign up
SmartSyt Becomes “SpotSyt”
After presenting our analysis to our client, our discovery of two other competitors with nearly identical names led to the company changing its name from SmartSyt to SpotSyt and updating their logo appropriately.
Other Insights:
Besides the name change, our analysis also revealed several key insights.
Other services focus on simplicity and the progressive overload of important information.
Successful designs explain their process and pricing structures with step-by-step visual breakdowns and charts.
Successful designs make use of social proof, graphics, and client work on their homepages.
Successful website designs use clear, distinct call-to-actions to guide users to sign up.
Website Audit
With a better idea of how competitors effectively told their stories, as well as the pain points in their UX, we needed to get to know SpotSyt’s current website in detail.
At the time, SpotSyt’s website design was loaded with text-heavy content featuring many product demos, introduction videos, diagrams, and ordered lists explaining the benefits of their service. The site had eight navigational tabs, with several more in the footer and no clear user journey.
With so many pages to parse through, we first wanted to document and evaluate all of the site’s content. We decided to conduct two different audits:
A design audit to evaluate the site’s current layout, information architecture, visual aesthetic, and usability
A content audit to document each page and organize its content
Design Audit
Because SpotSyt is a newer startup without an extensive online presence, we were unable to use site analytics to look for things like drop off points or time spent on each page. Instead we divided our audit into three sections, documenting the strengths and pain points of each.
1. Customer Journey
Evaluating the site’s current user flow compared to its stated business goals.
2. Design
Evaludating the effectiveness of UI elements, colors, layouts, and visual hierarchy.
3. Usability
Evaluating the site according to current standards for usability, including the industry standards set by the Nielson Norman Group.
Insights:
This audit revealed a few strengths and several issues with the site’s design.
Because of the many tabs and competing call-to-actions in various sizes, there was no clear user journey to navigate the site or sign up as a new user.
The landing page doesn’t give a brief explanation of what SpotSyt is, it just explains the benefits of the service without getting into specifics.
The site has a consistent visual design, but the color palette itself creates a few usability issues with difficult to read text in many places.
The content of the pages is very text-heavy with little whitespace, making content difficult to scan and navigate.
The site’s buttons and UI elements are often inconsistent- with the same button having a different shape, color, and label in different locations on the site.
Content Audit
Next we documented and categorized every page on the site with a content audit to help us reorganize them into a more intuitive architecture.
Redesign
After researching the competitive field, learning about the brand, and auditing the current site, we were ready to begin redesigning the site’s layout. To create a new sitemap that was intuitive to our target users, our team decided to run a card sorting exercise.
Card Sort
Our card sorting session was remotely conducted with five test users over Zoom using Figma as a digital testing ground. We chose an open card sort format to get more insight about the categories that users naturally found in our website’s features. We created 40 digital post-it notes with different features taken from SpotSyt’s current website, including the new features that our client wanted to add.
Insights:
While there were naturally a few differences in card sorts from user to user, overall the patterns of site organization were consistent.
Instead of the site’s current navigation with many tabs, users preferred five to six tabs, which were all some version of: a homepage, an explanation of services page, client work, an about us page, a support page with FAQs, and the returning users section.
On the homepage, most test users wanted to see things like service overviews, pricing comparison charts, intro videos, testimonials, and infographics, since they said these would be the most persuasive elements to get them to sign up for SpotSyt.
Users preferred to group items like FAQs and Contact Us together in a Support section, instead of on separate pages.
Site Map
Incorporating the results from our card sort, we created our new site map using Figma.
When presenting our new site architecture to our client, we emphasized the value of minimalism with navigation tabs and how this map showed a more intuitive flow to real users.
Voice & Content Style Guide
After designing our site map, I began to incorporate the brand personality information we developed from our stakeholder interviews into a content style guide, formatted as a shareable Google doc. Developing this guide would help us write SpotSyt’s questionnaire and set the content strategy groundwork for the site’s upcoming redesign.
I divided the style guide into different sections for SpotSyt’s brand voice, grammar and mechanics, writing for UI elements, and best practices for inclusive writing. The guide gives detailed examples for error messages, informational dialogs, and more.
Homepage Mockup
After finishing our site map, we were ready to begin working on our low-fidelity mockup for SpotSyt’s new homepage and its onboarding questionnaire. Because our client was still developing SpotSyt’s pricing structures and features at this time, we wanted to provide her a structural mock-up to show an overview of the user journey of the homepage without filling in too many details. In the next round of iterations designers would be able to fill this mockup with detailed copy once the product itself had been finalized.
Using our site map, we created a low-fidelity wireframe that focused on enticing new users to try SpotSyt by giving them an overview of its services, benefits, work examples, and pricing. Per our client’s notes, we focused our design on large images and interactive elements to give the site a modern, immersive feeling.
Because our mockup was more of a design recommendation than a typical wireframe, we also added a new color palette to the design, with softer and cooler greens than the site’s previous dark lime. The new palette reflected the fresh and evergreen aspects of SpotSyt’s brand personality. We changed SpotSyt’s font to a more modern, readable sans-serif with different font weights to help show visual hierarchy, in contrast to the previous brand font for SpotSyt which didn’t come with any bolds or italics.
When delivering our mockup we added annotations to the side explaining our reasoning behind each section and its order to help our client and the next round of designers build on this layout.
Questionnaire Wireframes
With the flow of the homepage established we next moved to the onboarding questionnaire, accessible from the primary call-to-action on the homepage.
Business Goals:
Direct interested users to take the first step and schedule a call with SpotSyt
Automate the onboarding process for new clients and get basic background information around their business before their first call
User Goals:
Get started with SpotSyt and get a free consulting session
Discover which pricing plan SpotSyt recommends for their business needs
Although our client at first wanted a longer questionnaire with many personalized questions, we were able to use research to convince them that a shorter questionnaire would more likely increase sign up conversions and keep the user experience as efficient as possible.
Using SpotSyt’s content style guide, we worked to phrase questions with clarity, personality, and consistency. Knowing that users are typically reluctant to give up their personal information before being convinced of the utility of a product, we ordered our questionnaire by first asking about the user’s business goals before asking for more confidential details like contact information. This would communicate that SpotSyt is primarily interested in helping their users rather than collecting their email addresses.
We also kept the questionnaire as short as possible by designing a progress bar and using quick, selectable questions and dropdowns and keeping questions with form fields short or optional.
User Testing
After delivering our designs, we realized we still had a few days left in our project timeline and decided to incorporate a quick round of user testing. We converted our mockups into a simple Figma prototype, then recruited five test users for usability tests.
Our testing goals were to:
Discover any usability errors in our questionnaire
Get feedback on the homepage’s layout and aesthetic
Get feedback on the flow of the questionnaire
After our remotely moderated 20-minute tests, we weren’t able to discover any significant user experience issues. However we were able to gather helpful feedback for the brand’s future site redesign.
Insights:
Users responded positively to the site’s new color palette and aesthetic, calling it calming and trustworthy.
Users wanted to make sure they saw images of client work on the landing page to convince them to sign up.
Users wanted to see more charts and visual comparisons on the homepage showing the differences between SpotSyt and other services.
Users responded positively to the flow of the homepage and the site’s navigation, calling these elements logical and intuitive.
Wrapping Up
Working for SpotSyt was a great opportunity for me as a designer and writer to get in on the ground-level of a startup as it was still defining its brand voice and style. Although our project originally seemed like a simple design audit and recommendation, we were grateful to get the chance to contribute to SpotSyt’s content strategy for future design iterations.
Because of the short project timeline for these designs and the limited access to user data and interviews, there were a few aspects of the typical design process that we were unable to complete, such as a detailed audit of site analytics. However, once we shifted the scope of our project to focus on research and content strategy, we were able to make efficient use of our time and even add a few extra deliverables for our client.
If I Had More Time…
If we were able to continue this project, our next steps would be to begin developing wireframes for the rest of SpotSyt’s website. We would use our style guide to fill out the content on these pages, and incorporate a round of low-fidelity user testing before moving to high-fidelity designs to validate our decisions.
Given more time we would also work with our client to develop a detailed visual style guide to help us keep the pages consistent as we built them out. In this guide we would define specific rules for font sizes and weights, primary and accent colors, and UI elements. With both a content and design style guide, the process of creating and updating the site’s pages would be much more efficient moving forward.