UX/UI Design, Web Application
Rumo – Designing the Recommendation Preview feature
Platforms
Web App, SAAS
2.5 weeks
Timeline
Tools
Role
UX/UI Design
Product Manager: Nemesis Srour
UX Researcher: Farah Kraled
Figma & Miro
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
When the MVP was created, RUMO did not have an in-house UI designer. This resulted in the product screens looking raw, inconsistent and not user-friendly. As they are in the product demonstration phase, they needed a revamp on UI/UX to give them confidence when capturing leads, showcasing the product (in demos and prospect calls) and ultimately, closing deals.
Who are the users?
The recommendation preview function plays an integral role in helping the user understand how recommendations would be displayed to their customers. A redesign is required to give a strong first impression to the potential client. The current design looks raw and is far away from being user friendly.
The Task
RUMO’s users are usually the founders, project managers or analysts of media companies (i.e. Video, Music, Publications). They have little to no technical background and are looking for an easy solution to provide recommendations to their customers.
Defining Goals
Project Goal
Redesign the Recommendation Preview page to improve overall experience, by providing a simple, intuitive, enjoyable and visually consistent user interface that creates trust and engagement.
Utilizing the redesigned product to capture new leads, increase customer satisfaction and improve conversion rate.
Being able to understand how recommendations are generated, and how links between items are being compared, with minimal effort and low technical knowledge.
Business Goal
User Goal
Uncovering current experiences
To clearly understand the needs and pain points of RUMO’s users, I synthesized the existing research findings conducted by RUMO’s internal team, by breaking down the main points into two categories.
User Needs/Goals
See the list of similar content related to a selected content (Content to Content Similar Recommendation)
Understand why they are similar (common keywords & display of categories tags)
Configure the recommendation output by playing with the variables
Pain Points
UI looks raw and not user friendly
Users have to scroll to be able to see the whole screen
Lack of explanation on how the page works
Unclear score notion: what it is, how it is computed and why a lower score equates to a higher similarity
Inconsistent UI
Unclear instruction on how to integrate on user’s site
General feeling: deception, disappointment, frustration, loneliness = not convinced
How Might We?
Taking these problems, i tried to reframe them into a “How Might We” question as it frames the challenges into opportunities for design. It helps to set myself in the right mindset for creative and innovative thinking.
The chosen problem statement:
“how might we translate a complex concept and configurations into a simple and easy-to-use interface.”
Next up, I did a UX audit on their current design to pick up on current issues and what can be improved. I took a screenshot of the current screen and used Miro (a whiteboarding tool) to comment on the areas that needs improvement.
UX Audit of current solution
The Redesign Process
Given the brief and functional specs (provided by RUMO’s internal team) I had clear direction on how to move forward. As we started working on a tight deadline, I did a quick sketch on the layout placement and immidiately started digitizing on Figma.
Initial Iteration
The stylization of the propotype is adapted from Rumo’s existing style guide and brand colours.
Explanation text. One of the biggest pain points was that users felt lost and unsure of how the recommendation page worked. By inputting explanation texts, it guided the user on what actions could be done, and why certain functionalities were present.
Adding in numbers & medal icons to increase visual impact. Having it designed in a leaderboard-style would help users understand that the order of the content matters. I also incorporated larger spaces so that the design looks cleaner and allows more space to fit in long titles.
Splitting the page to two levels of hierarchy, decreases cognitive load.
First level being the “essentials”(which are the list of recommendations), “implement” button as well as the list of tags that were present on the main and recommended items.
The second level is contained within a collapsible block that has the “configurations” button, score visualization, as well as the list of shared tags.
Made the visualization of the shared “tags” to follow the industry standard in consideration of our users’ mental model.
Gauge meter to help with the visualization of recommendation score instead of just numbers (in decimals).
A new “configurations” pop up that provides a clear explanation text on what the numbers indicate, how long the change will be in effect and how to change them.
Usability test results for initial iteration
With the feedback gathered from stakeholders as well as the user test (conducted by RUMO’s UX Researcher) here are the topics that we arrived for areas for improvement.
1. Improving cognitive load.
Too much information present within the page, resulting in prioritizing information that is most useful to the users and removing any unnecessary ones. This also includes reorganizing the hierarchy of the blocks.
2. Changing recommendation score visualization.
The recommendation score indicates how similar a content is to another content. 0 = similar is counterintuitive and creates confusion. The gauge visualization needs to be modified as it indicates a recommendation relevancy is full when score is close to 1. We agreed that using a linear distance notion is preferred, as 0 means closer and 1 means it’s further away.
3. Improving weight configurations pop up.
The weight configurations tool give Rumo’s users controllability over the recommendation engine. Previously, the JSON format of this tool looked rather intimidating for our users. We decided to improve their interactions with the UI by providing simpler elements that are recognized by our users, such as a slider to set the weight of a category.
How it was VS how it is now
What has changed?
1. Global change to Typography
Rumo’s existing typography “Cabin”, may not look the most sleek & polished, making the product look & feel raw. Replacing it with “Inter” is the perfect solution as it is a typeface that evokes modernity and trustworthiness. After implementation, it completely facelifts the product into looking more experienced and delightful to use.
2. Using a distance notion to indicate recommendation score
A linear visualization to indicate distance (or should we say similarity) between each content. Labels help users understand what content is being compared.
3. Revamped Sidebar
Improved the look of the side-navigation bar. The existing side-nav bar consists of mainly the brand’s primary colour (Indigo), I suggested that it looked too strong which throws off the balance of the page. The focus of the user should go on the right side of the page where all the functionalities are placed. As a result, i proposed a redesign of the current nav bar and incorporated the 60% 30% 10% rule to create a well-balanced interface.
60% consist of White to give the interface some breathing space.
30% consist of the complementary colours, in this case Light Indigo.
10% accent colour, in this case Indigo. It should be applied to only elements that needs extra attention such as a functional button or a CTA.
4. Collapsible Block
Hierarchy and placement of elements plays a huge role in creating a systemic flow within a page. The collapsible blocks helps users focus on a task one step at a time, reducing page length and cognitive load.
5. Improved Weight Configurations Function
Using simple UI elements, such as a slider to change the weight of an element, can be easily understood by our users. By providing a limitation on how far the numbers could go, could also decrease the margin of error.
Outcome
RUMO is in a phase of having to showcase the product more; the redesign made them confident in capturing leads when showcasing the product for public demos and prospect calls. The new UI style received much positive feedback from stakeholders, and also made a great impression among their customers. My approach in solving their UI needs in a user-centric way, and efficiency in delivering high quality prototypes within tight deadlines was well recognized. This resulted on a lasting relationship with RUMO’s team. The redesign of the feature has also received 100% positive feedback score from internal and external stakeholders.
Key Takeaway
Metadata and recommendation API is a complex topic that not everyone is familiar with. Initially, I was very intimidated by the complexity of the product, however, I utilized this challenge as an opportunity to empathize deeper with their users, ultimately motivating me to want to solve their problem.
I made sure to obtain a good fundamental understanding of the product and how each functionality worked by reading through the entire technical documentation. What had helped me as well is that I tried to have a curious mindset and open communication with RUMO’s team to avoid misunderstandings. I wanted to take this opportunity to thank Nemesis & Farah for being very clear on documentation as well as being very helpful with clarifications.
Take a look at my other projects!
