UI/UX Revamp for MarTech

UI/UX Redesign for Web and Mobile

Duration

8 weeks

Role

UX Designer

Team

Lead UX Designer and UI Designer

Tools

Figma

Project Overview

The product is a platform of free web and mobile based applications for small businesses and freelancers to grow their customer base. The client wanted us to redesign the web and mobile app with an emphasis on usability (from a UX perspective) and visibility of their tools (from a business perspective).
‍
We broke up the redesign process into 2 phases-
• What are the current problems with the existing app? (Research and discovery)
• What are the recommendations for better UX? (Wireframing and Visual Design)

Research

The Product

The current product has categorized their tools based on SEO, Social Media, PPC and E-Commerce with plans to add more tools (and therefore categories).
On the homepage, first time users can use the “”tool advisor” - enter the desired website to be analyzed and the recommendation engine will suggest which tools the user can take advantage of based on the website analysis. Each tool has a unique page with an overview, an explanation of how the tool works, FAQs, and rating and reviews. Users can also interact with Einstein, a chat bot to solve any queries they may have.

Competitor Analysis

Given my background in research, I led the discovery phase for this project.
‍
Goals of the competitor analysis -
1) Understand the digital marketing domain better
2) Understand which features are common across existing, successful digital marketing platforms
3) Understand how the home page and tool pages are structured

Heuristic Analysis

To further delve into the existing issues with the product, we carried out a heuristic analysis.

Goals of the Heuristic Analysis -
1) Test whether the existing product is user friendly
2) Test the site's usability
3) Identify and rate problems on a severity scale
4) Make necessary recommendations for the new design

The analysis has been done section wise. Most of the important issues have been included in the screenshots. All the issues have been assigned a “severity score” which are distinguished as colored items.

Heuristic Parameters

I had read Norman's Design of Everyday Things and reviewed the 10 usability heuristics by the Nielsen and Norman group before carrying out the analysis.

From an excellent Medium article by Michael Langmajer

A Snapshot of Analysis Findings

Wireframing

Layout for Home

We wanted the homepage to focus on the CTA and garner loyalty through reviews and testimonials.

Layout for Category

The client did not have any category page. When the user clicks on the nav above, the page scrolls to the tool cards on the home page rather than re-directing to a separate page. We strongly believed a category page was necessary for the client to have as we didn't want to display the tools upfront on the home page. We also included a side nav which was similar to the clients other products to show how the user would interact with the category page.

We searched for inspiration on how other websites/products displayed multiple cards.

Layout for Tool Page

The tools page was arguable the most complex to design. There were 3 states we had to focus on -
•State 1: Tool overview with how it works, ratings and review
• State 2: "Analyzing" state when user has entered URL to be analyzed
•State 3: "Analysis" state when free report/analysis is displayed
‍

The chrome webstore was a good example for looking at the ways in which multiple sections (reviews, overview, related tools) were laid out in a single page

Based on this, we took a "tabs" approach and divided the tool page into-
‍
1. Overview
2. Club How it Works and FAQ together (since the user may have questions once they know how it works)
3.Reviews
4. Related tools

We also decided to make the related tools section "sticky" to the bottom to meet the clients business goal of more visibility for the other tools.

Tool card explorations

The client had specified the key features they required on their tool cards -
• title
• text description
• number of views/users
• "hot” tool/featured tool
• rating
• app store availability

An image or icon was optional. This task proved to be a good exercise in visual hierarchy. There was A LOT of information that had to be packed into a small space. Furthermore, the cards had to match the overall brand, fit with the rest of the pages, and look good without certain elements (some tools weren't hot or unavailable on the app store.

I went wild exploring all the various options...

Visual Design

Styleguide

The client had already informed us about their brand colors and primary and secondary fonts. We chose an icon pack that we believed best fit the brand and style and also created some custom icons.

Illustration Style

Although the client had indicated they wanted to go with images, they finally settled on an illustration approach. I proposed 3 different illustration styles, taken from freepik's storyset and made tweaks and adjustments to match the clients brand guidelines.

Conclusion

Reflections

The most enriching part of this project was our weekly client calls where I would present the designs I had worked on. I would justify my design decisions based on research and data and the client would give feedback, after which I would iterate, implement their feedback and present the new designs the next week.

Fitting in a lot of information in a simple and intuitive way proved to more challenging than I had expected - I had to try out various combinations of category pages and tool cards to see what fit best and what was most intuitive to the user.

Overall, I enjoyed delving deep into the product and understanding user pain points to ultimately deliver a more usable product.

Impact

Our client sent us a glowing review and let us know that their MAU increased by 16% after the re-design! Their app store ratings also improved and, 2 months later, they came back with another project for us.