UI Design, Website Redesign
Rumo – Redesigning a Recommendation system Saas Website
Platforms
Live Website
2 weeks
Timeline
Tools
Role
UI Design
Product Manager: Nemesis Srour
UX Researcher: Farah Kraled
Figma, Competitive Research
Company Overview
Rumo is a Saas recommender system that makes it effortless for creative industries to fine-tune personalized recommendations for their customers. Rumo is a subdivision of Spideo, an established recommender system based in Paris, specializing in television and video media. With Rumo, the intention was to expand and target all company sizes in all creative industries, not limited to video.
The Problem
Rumo had a clear vision and mission – to provide businesses with a completely ethical and transparent recommendation algorithm that they can easily modify. However, with the current website, some users faced difficulty in understanding what Rumo does and how it could bring them value - resulting in unconvinced users and a low adoption rate.
Who are the users?
Redesign Rumo’s website so that it is educational and convincing by communicating a clear value proposition, providing a fresh look that reflects their new visual identity and and strategically reorganizing information to improve overall user experience.
The Task
The target users are business owners who are interested in technological and practical solutions that enable them to bridge the gap between media consumption and user preferences. They crave for a simple and effective tool that allows them to manage media recommendations seamlessly.
Defining Goals
Project Goal
Redesign the website to improve overall experience and optimize conversion by providing a cohesive value proposition and a clear call to action (CTA).
Encourage the visitor to sign up for the free trial and engage with the team for a demo of the product.
Understand how Rumo can can bring value to their users and easily test the product with minimal effort.
Business Goal
User Goal
Current challenges and user pain points
Their current website can be considered empty as it lacks substantial information about Rumo’s product. There was not much product visualization, technology and feature descriptions. the users thought the website was too abstract, inconsistent, lacked concrete information and hence not convincing. Call to action buttons were unclear and the hierarchy of information was confusing.
Our problem statement, defined.
Competitive Analysis
Before moving ahead with the high-fidelity design, I did a brief competitor research to help me understand the market, get inspirations from and familiarize myself with Saas website best practices that convert.
Recombee
Direct competitor
Clear and concise CTA above the fold, guides the user to take action
Information within the landing page is accompanied with visual explanation, helps the user to easily grasp the topic being discussed
On the landing page, they dedicate a section on ease of implementation (API Integration) by showcasing the codes. This grabs the visitors' attention and could be a great push factor by showing them how simple it is to integrate
Display awards to gain trust and credibility
Klevu
Indirect competitor
Incorporates case study of their client success to showcase credibility
Uses third party review modules (Capterra reviews)
Created individual pages to showcase each feature
Statistics to show results
Amidst time and budget limitations, Rumo provided me with a (usability) tested wireframe of the desired sections and page layout.
Feedback on the Wireframe's usability test included:
Excessive text
Unclear value proposition
Not visually appealing
The Redesign Process
My task is to provide recommendations on ways to improve the wireframes (as seen on the post its) and develop them into a high-fidelity design.
Refined Visual Identity
Rumo aspires to be a friendly tool that empowers their user with the tools to act upon the algorithm. Their objective is to provide transparency and show how the algorithm works. With this in mind, we wanted to make the whole website experience to be more modern and fun by incorporating warmer colours, geometrical typography and the addition of fluid shapes and patterns.
1. Homepage
Upon receiving the wireframe, I felt that the homepage needed the biggest improvement as it still felt vague. It only told the user how the product could benefit them but did not show how it could solve their problem. As the home page is the first thing users land on, it should be the most engaging and convincing. This is where visuals, animation and effective copy would play a huge part.
Applying the AIDA model
To improve the flow of the home page into something that is convincing and that converts, i incorporated the AIDA model. The AIDA model is a widely-used purchasing funnel that traces the different stages of a customer’s buying process (Awareness, Interest, Desire and Action). As one of the main KPI of this project was to increase adoption rate, utilizing this model helped me restructure the page into one that supports the user's usage and purchase decision.
Homepage – Key Improvements
Clear and concise summary of the product’s value proposition & main features.
- Written in a way that it solves the user’s pain points so that users don’t need to browse through the whole site.Usage of animations to showcase the industries served by Rumo instead of listing them out.
- Captivates user attention and improves the overall look & feel to match with the new branding.Incorporating links to Features or How it Works within different sections of a page
- This would improve flow between the existing site while promoting a deeper understanding of the product.Placed the main CTA (Book a demo call) at multiple places within the page
- In order to get more conversions. I placed them at the sticky nav bar for easy access, statistics section and one final CTA before the footer
2. How it Works page
On their current website, not much information was provided on 'how Rumo works'. As Rumo values transparency, this new page was added as an opportunity to showcase the technology behind Rumo’s algorithm and the ease of integration with Rumo. Previously, the demo video lied within the contact page was sub-optimal, as it is not a user’s first choice to go to 'contact us' to find a demo video. With the addition of the demo video and FAQ in How it Works page, it aided the user in understanding complex topics like algorithm and recommendation engine, in hopes of increasing adoption of the product.
3. Features page
Initially, this page was named as 'Why Rumo'. I felt that 'Why Rumo' did not really suit the existing content in the page (description of features), and ultimately suggested to change to 'Features'. It is more straightforward and direct title and allows the user to easily access that page if they are interested in knowing what features Rumo is offering.
Learning from our user’s pain points, the biggest challenge is that users are having a hard time understanding what the product does. This page showcases all the different features Rumo offers. To help the users understand the product further, we have paired each features with graphical elements that were adopted from the product. Each section showcases a different industry and how the recommendation might look like when applied to their user’s business.
4. Who we are page
As this page did not undergo any structural changes, I focused on beautifying the existing wireframes into a layout that is simple yet memorable. As this page is more text heavy, I wanted to delight our users by breaking down these long texts into bite size pieces and incorporating more graphics.
Checkout the live website @ rumo.co
Outcome
As we just launched the website mid September 2022, we are still collecting data to measure the impact. Metrics that we will be paying attention to are the adoption rate (# of demo bookings & sign ups) as well as the usability score.
Key Takeaway
Seeing such a positive feedback from initial users and stakeholders made me realize how important it is to make great first impression. It is much easier to convert people to take action if we dress our website nicely and present them in an easy-to-follow manner.
Working with a huge time & budget constraint, we reused components from our recently created Rumo Design System, enabling my design process to be sped up significantly. In addition, using existing components & text styles boosted the overall consistency and flow of the web pages. We know that there are inconsistencies that will be needed to be address such as optimization for responsiveness, improvements with animations, interactions as well as accessibility. Once we establish more clients, we will be featuring some success stories in the website to increase social proof. Of course, UX improvements will never stop. We will be gathering more feedback and testing as we progress down the roadmap.
Take a look at my other projects!
