Overview
ReRank is an SEO Optimizer app designed to help Shopify merchants generate organic leads and achieve stable growth through smart SEO strategies. The client approached us with the primary concern that the app lacked an onboarding process, making it confusing for first-time users. Additionally, the app's custom-made UI design prevented them from applying for the Built for Shopify badge. Our goal was to redesign the UI/UX, adhering to Shopify's guidelines, and prepare ReRank for the Built for Shopify submission, utilizing the latest version of Shopify’s Polaris.
Challenges
- Lack of Onboarding Process: First-time users found the app confusing due to the absence of a guided onboarding process.
- Custom UI Design: The existing custom UI design did not comply with Shopify’s standards, preventing the app from earning the Built for Shopify badge.
Objectives
- Introduce a goal-based onboarding process to enhance user experience.
- Redesign the app using Shopify’s Polaris design system to comply with Built for Shopify guidelines.
- Highlight ReRank’s key features and make them easily accessible through the redesigned dashboard.
Approach
- Goal-Based Onboarding: We introduced a goal-based onboarding process tailored to the users' primary objectives
- Improving Page Speed: Users could choose this path to enhance their storefront's loading speed.
- Personalized SEO Strategy: This option provided an initial SEO audit of the merchant's storefront, utilizing AI to analyze meta tags, content quality, and page speed. The audit offered tailored recommendations to improve visibility and performance on search engines.
- Redesign Using Shopify’s Polaris
- To prepare ReRank for the Built for Shopify submission, we adhered to Shopify’s Polaris design system. This ensured a consistent, user-friendly interface that met Shopify’s high standards. The redesign focused on simplicity, ease of navigation, and a professional aesthetic aligned with Shopify’s ecosystem.
- Enhanced Dashboard
We revamped the dashboard to include crucial information and metrics, providing users with a comprehensive overview of their SEO efforts:
Usage Metrics: Displayed the number of optimized pages and fixed issues, keeping merchants informed about their plan’s usage.
Site Health Meter: Showed the Copilot’s efforts to continually improve the SEO score.
Cost Savings: Metrics highlighted the savings merchants achieved by using ReRank compared to hiring SEO professionals for audits, page speed optimization, and organic SEO ranking.
Time Savings: Displayed the time saved in loading time minutes.
Quick Links: Provided easy access to all of ReRank’s features, including Copilot, Speed Optimizer, Meta Tags, Images SEO Optimizer, Duplicate Content, Broken Links, and JSON-LD.
Key Features Highlighted
Copilot: Automates optimization of meta tags (for products, collections, blogs, and blog posts), alt tags, and fixes broken links. The AI-driven feature ensures meta titles, descriptions, and image alt texts are updated monthly as recommended by Google.
Duplicate Content Removal: Identifies and removes duplicate content on the same website or across different websites.
Speed Optimizer: Minifies all JavaScript and preloads links to enhance app performance.
Broken Links Scanner: Detects and allows users to fix broken links.
JSON-LD: Enhances SEO by enabling search engines to better understand website content, improving visibility and searchability.
Results
The redesign aligned ReRank with Shopify's guidelines, making it eligible for the Built for Shopify badge. The new onboarding process significantly improved the user experience for first-time users, guiding them through the app's functionalities seamlessly. The redesigned dashboard provided users with actionable insights and important metrics at a glance, enhancing their ability to optimize their websites effectively.
Conclusion
Our UX/UI redesign for ReRank successfully addressed the initial challenges and aligned the app with Shopify’s standards. The introduction of a goal-based onboarding process and a revamped dashboard equipped with essential metrics and quick links to features enhanced the overall user experience, paving the way for ReRank to achieve its goal of earning the Built for Shopify badge. This project exemplifies our commitment to creating intuitive, user-friendly designs that align with industry standards and client objectives.
Let's build something together
If you like what you saw, let's jump on a quick call and discuss your project
