SEO Pro · SAAS · Product Design
Building the best-in-class SEO tool with a user-centered approach. All On-Page SEO Info in 1 Second
Seamless web experience loved and used by 90,000+ users every day, helping thousands of SEO experts and companies save time and money.
Client: MarketingSyrup (2021–2023)
Work: Strategy, Branding, Website Design & Development, Product Design, Motion Design, Design System
Industry: Digital Marketing
MarketingSyrup Digital Inc. wanted to build the best-in-class product to help SEO professionals do their job much easier and faster getting all the needed on-page SEO information in one click.
My job was to define business goals, choose the right strategy for the product, conduct user research, design it, build a design system and collaborate with developers to bring the product to life.
The goal was to build the tool that will allow SEO Professionals, Developers, Digital Marketers, Copywriters and Designers get all on-page SEO information they need in an easy-to-read format, seamlessly, with a focus on user experience and performance.
Outcome
100,000+
Daily active users
4.8/5
★ Rating
High standard
User experience and design evaluated by Google Chrome team
Challenge
Build the best-in-class SEO tool with a user-centered approach
The product should be fast and easy to use, so the main focus should be on UX, information architecture, visual hierarchy and performance.
Process
Strategy → Research → IA → UI Design → Prototyping → User testing → Design System → Improvements
Discovery and Research. During this stage, I realized that the product will have lots of data we need to present in an easy-to-digest format.
Product name. The tool didn't have the name yet. Targeting SEO Professionals, I came up with a simple yet powerfull name — SEO Pro. Fortunately, it was available.
Product type. My initial idea was to create a Web App. Sketching and testing different ideas, I found out that a browser extension will provide much better user experience.
Global Information Architecture. Together with an SEO Expert, we defined what information should be shown to the users. I used IA Structure information organization model that works perfectly for SAAS products, dashboards and the type of products I chose. To reduce the cognitive load (Hick's law), all information was organized into 8 "Folders" (tabs), providing data to the users in small chunks and in the order of priority.
UX writing and Limitations. The research has shown that a browser extension has a maximum width of 640px. Meaning, each tab name should be consize but reflect the data inside of it. Based on the GIA, we set the following names: Overview (main/first tab), Headings (showing all the H1–H6 on the page), Status (shows the status code), Links (all External and Internal links), Images (shows images URLs and Alt tags), Schema (scheme markup and rich snippets), Social (to get the Open Graph info and how the page will be displayed when shared on social media), Resources (useful resources for SEOs, covering business goals).
Macro Information Architecture. Each tab has to provide a specific set of information. The first tab that a user will see, when calls the extension, should give the most important data, plus the summary of the details from the other tabs (similar to a Homepage of a website). We organized the information on each tab from the most important to less important.
Micro Information Architecture. Each section on each tab should be easy to scan (law of proximity and similarity), provide clarity on what a user is looking at, what they can interact with, how the sections are related to each other. The main goal of the Micro IA was to help a viewer get everything they need in a blink of an eye.
UI Design. Focus on Usability, Accessibility and Readability. I tested 2 variations of the Tabs positioning: on the Left like a sidebar and at the Top. Tabs on the Left provided good readability, but reduced the real estate for the main content which caused longer scroll not showing everything "in a blink of an eye". Moreover, the "sidebar" Tabs were too far from the area where a user calls the extension (Fitts's law). So I made the decision to put the Tabs at the top. It was also easier for users to scan the information following the F-pattern.
Visual Design. The company already had brand colors. I adapted them for better accessibility and legibility, and added some new colors for sections background, other elements (such as different Core Web Vitals states) and to highlight the error states.
Prototyping. At this stage I collaborated with a Front-End Developer to hand-off the designs and explain the expected behavior. After a few iterations and design QA sessions, we built an MVP version of the product. Before launching it, I contacted multiple SEO professionals to get their feedback. We received only positive feedback with a few suggestions on "what would be good to add" and none recommendations for improvements of the current version.
User Testing. Soft launch. So we decided to make a soft launch, test the product in different scenarios and collect qualitative information for the new iterations. On December 8th 2020, we added the SEO Pro extension to the Chrome Web Store, and announced it in some Digital Marketing communities.
Soft launch feedback we received:
User Testing. Part 2. Issues. While the feedback was incredible, it didn't mean that the job was done.
We realized that SEO Pro extension required some UI tweaks: 1. the spacing between some elements was too small, making the data harder to scan; 2. some UI elements were difficult to recognize and png-icons were blurry; 3. there were some formatting issues in the Micro IA; 4. also, we found some performance bugs and UX problems in the user flow. Everything was added to the Roadmap for the future updates.
User Testing. Part 3. Updates. Within the next 2 months I made all the required UI improvements, and together with a Developer, we fixed the bugs, performance issues and overall user experience.
Design System. While I was working on UI tweaks and UX improvements, I faced the issue with inefficiency. Every time I changed, for instance, footer or navigation on one Tab, I had to go through each Tab and make changes there as well. Same with Colors and Typography.
For consistency across the tabs and higher efficiency during the updates/improvements, I created an easy-to-use Design System that allows to make any changes within seconds.
Improvements. MVP version of the product provided almost all the information the target audience was needed. However, Kristina, the CEO of MarketingSyrup Digital Inc., had a clear vision on how to make SEO Pro even better adding new features to the roadmap.
Also, we constantly analyzed users' feedback and requests and found a couple of opportunities for product upgrades.
In addition to that, I found a few ways on how to improve User Experience using color coding, adjusting spacings for better scannability, and enhancing readability with typography tweaks.
As a result, all the business goals have been reached, plus this product helps thousands of SEO professionals, Marketers, Copywriters, Content Creators and Designers every single day.
Result
SEO Pro Final Product Design
What users say about SEO Pro and its design
Featured by Google Chrome team
"The Featured badge is assigned to extensions that follow Google Chrome technical best practices and meet a high standard of user experience and design. Chrome team members manually evaluate each extension before it receives the badge."
Related Works
Goodlife Fitness · Web PortalProject type
Borrowell · FinTech experienceFinance · Desktop & Mobile Web
Radio.com · TV appsProject type
Source for Sports · eCommerce ExperienceProject type
TransportPayProject type
Contact me at:
Alexander Hess Gasiul
Toronto, Canada 🇨🇦