SeoCrawl

UI/UX redesign, product extension, and marketing design for SEO software

People tend to trust search engines. The higher the website in search engine rankings, the more credible it is considered, the more clicks it gets, and the more traffic it generates. SEO (search engine optimization) helps demonstrate to search engines that your page is relevant and worth attention. Therefore, utilizing SEO for your business means that more potential clients can learn about your services without putting a lot of effort.

Services

Marketing design

UX / UI Design

SEO Crawl is a set of tools that take your SEO management to another level

Used by more than 1000 individual users and companies SEO Crawl offers a simple and effective way to give shape and meaning to loads of data from Search Console by turning it into useful and easy-to-perceive information.

But as it often happens with companies that have been on the market for quite some time, the solution’s look and feel have become somewhat outdated. That’s when SEO Crawl turned to Eleken.

Our initial task was to make a complete overhaul of the product’s UI, as well as revise the main screens’ structure

When SEO Crawl came to Eleken in May 2021, they were extremely result-driven. That’s why the redesign process we were asked to perform was fast, well-structured, and consistent. From the very beginning of our cooperation, we found it very easy to talk to the client and deliver designs that would satisfy both our partners and their customers.

Here are more details about how we did it.

Redesigning the visual part in a fast pace

As David Kaufmann, the CEO of SEO Crawl often says “time is money, especially for a small company like us, so we have to concentrate on what matters most and quickly move forward”. Therefore, as you may have guessed, our redesign process was quite dynamic.

We started with the competitor analysis and visual design trends overview to define in which direction to move when creating a new design concept, and to also discover design practices that could help us improve SEO Crawl.

To give us a better understanding of their wishes, Mr. Kaufmann would show us references, and we took them into account when creating new designs for each product’s page.

Apart from that, SEO Crawl asked a third-party agency to create a new logo for them. So, we adjusted the whole design concept to logo’s color scheme and visual style to make the software look aesthetically pleasing and consistent.

Here’s how organically the sign-up page align with the new logo

The whole redesign process was done with users in mind

Each decision we implemented as a part of UI/UX redesign was based not on our partner’s vision alone, but on SEO Crawl users’ reviews as well. SEO Crawl team showed each new screen we created to their customers to ask for feedback to ensure we make relevant improvements.

As the result, it took us less than 4 months to create an updated look for SEO Crawl step-by-step and have it implemented by developers.

Here are the main SEO tools that Eleken redesigned.

SEO Dashboard to analyze and control SEO growth of all users’ projects

Rank Tracker to monitor, tag and classify the keywords

Before
After

Real-time Task Manager for team collaboration

Before
After

Rethinking the user experience

Though SEO Crawl came for UI redesign mainly, all major blocks also required restructuring and feature reprioritization.

Performance metrics screen:

Event wizard lets organizers set up the event in advance. Each event contains lots of information about agenda, sponsors and speakers, timeline, description and so on.

Change the date picker hierarchy. In the previous design version, the date picker was at the same hierarchical level as the filter button, but as it affects all page metrics, we decided to place it at the top of the screen.

Highlight SEO metrics indicators. General indicators of the main SEO metrics were not visually highlighted enough. Therefore, our designer grouped them into blocks, making contrast in the size and font colors.

Revise button prioritization. The original design didn’t consider the button prioritization: some of them had the same visual power, although they served different functions with different priorities. As an outcome, the “Export”, “Heatmap view”, and “Upgrade plan” buttons all looked like primary ones. After the redesign, only the “Upgrade Plan” button remained primary, all the rest became secondary and tertiary.

Before
After

Individual performance page

Initially, there was a separate menu section for each type of metrics, and to track them, you had to make unnecessary transitions between pages which was inconvenient. That’s why we made the following changes:

We decided to combine the main metrics (Clicks, Impressions, Clicks per impressions ratio, AVG position) into the General section and make it possible to switch between metrics within this one section.

We had to represent two levels of hierarchy within the General section: the first one is different metrics types (Clicks, Impressions, AVG position, CPR) that defines all the following indicators on the page, the second one refers to subsections within the selected metric (Keywords, URL, Countries, Devices, Annotations). We decided to visualize the first level in a form of a switcher at the top of the page. For the second level, we created tabs with additional indicators for the selected category and put them below the main indicators and the graph.

Marketing design for SEO Crawl

Aside from helping SEO Crawl with its platform overhaul, we were asked to assist with creating designs for various marketing campaigns aimed to attract audiences.

Eleken believes that by making designs for marketing purposes we should not only create authentic visuals, but convey brand identity, emotion, persuasion, and most importantly - trust.

Landing page design

We created a design for a sign-up landing page that has it all: a contrasting headline, relevant visuals, social proof, and most importantly a clearly visible call-to-action button.

Headers and icons for social media

Designs for social media perfectly align with the overall SEO Crawl style.

Twitter header
“News” icon
“Reviews” icon
“Features” icon
“Articles” icon

Newsletters and email notifications

We designed a number of easy-to-read email notifications and newsletters that clearly convey their purposes.

Free trial activation newsletter
Free trial expired newsletter
New task assignee notification
New comment notification

Banners

We designed banners for the marketing campaign of SEO Crawl and their partner, BrightonSEO, so that it represents both brands' identity and looks harmonious.

Flyers

Finally, we designed flyers for the release of the updated product that were later printed out and served as an additional marketing channel for SEO Crawl.

Product extension

As our redesign process moved on, SEO Crawl’s team understood that to meet their customers’ needs they have to expand their product and add some new features, menu items, and even new blocks. Thus, the redesign of the SEO Crawl smoothly overflew into a product extension.

As of February 2022, we’ve already completed the design of two important blocks: SEO Crawler and SEO Monitor.

SEO crawler

SEO Crawler is a tool for complete and detailed SEO analysis of product web pages.

SEO Monitor

SEO Monitor is a tool that detects and points out product problem areas in SEO by pages. With its help, users can monitor all the details of what changes happen on a specific page of their web product, and when these changes happen.

How we cooperate with our client’s team

Our communication

We are constantly in touch via Slack with SEO Crawl’s team to agree upon further steps, exchange quick feedback, or clarify some minor issues. We also have regular weekly calls with the product manager and separately with the development team to discuss the project’s progress and results. Finally, in case there’s a need to discuss certain questions off schedule, we simply appoint an additional call.

Exchanging feedback

Eleken designers work iteratively, as we believe it’s the only way to make the design that fits both users’ needs and the product owner’s vision. That’s why it's vital for us to constantly receive feedback from SEO Crawl’s team. For this purpose, we use Figma, which allows us to invite any team member to view, edit and comment on our designs in an online mode so that we can quickly react and fix mistakes or misunderstandings that may arise.

Designer-developer collaboration

As we’ve briefly mentioned, every week, our designer is present on the call with the developers where they distribute tasks and discuss upcoming plans. During these meetings, we exchange views on the existing designs, share our vision, and give each other some suggestions. Also, developers inform us whether they will be able to implement some specific feature or ask our designer to make some changes to the mockup. That's how we ensure the whole team stays on the same page and the project keeps progressing smoothly.

How we cooperate with our client’s team

Our communication

We are constantly in touch via Slack with SEO Crawl’s team to agree upon further steps, exchange quick feedback, or clarify some minor issues. We also have regular weekly calls with the product manager and separately with the development team to discuss the project’s progress and results. Finally, in case there’s a need to discuss certain questions off schedule, we simply appoint an additional call.