Platform
Designing Real Vision’s net-new platform experience
The Real Vision platform is a significant evolution designed to unify and engage diverse financial communities while enhancing user collaboration and learning experiences. It involved collaboration with key stakeholders and redefined Real Vision's brand identity and platform concept, progressing from wireframes to the Minimum Viable Product (MVP) and beyond.
CompanyReal Vision
ProjectNet-new Platform Experience
CategoriesUser Experience, User Interface, Graphic Design, Research, Prototyping, Design System, Documentation
The Challenge
How might we transform the Real Vision experience from a siloed media consumption model to a platform that integrates diverse financial communities, encourages discovery, improves engagement, and enhances the learning experience on Real Vision?
After
Before
Our Members
Leveraging our database of RV members' issues, demands, and grievances, we gained insight into the pressing minor enhancements required at the moment.
- During the development of the foundation for the new experience, our Insights team engaged in extensive discussions with current members to explore their daily activities and understand how the current version of Real Vision aligns with their lifestyles.
- We identified the fundamental driving forces, hopes, and objectives through this study.
- Based on these insights, we adjusted our focus to enhance our existing offerings and develop new functionalities for the upcoming platform.
The Problem
Throughout my time at Real Vision, as highlighted in the interviews, three main concerns were repeatedly emphasized.
The three primary concerns that emerged were: information overload, discovery, time constraints, and the need for trust.
Our Goals
When looking at Maslow’s hierarchy of needs we outlined 3 of most significance to our users.
Identifying the need safety, belonging, self fulfillment helped up clarify the core problem space for Real Vision 2.0.
My Role
The RV 2.0 platform was the most significant project our small but mighty design team had ever undertaken. We divided into squads with members from design, engineering, and product management to tackle the core areas of the platform: Learn, Connect, Analyze, and the Second Brain [AI].
As a senior designer, I played a pivotal role in the experience design team, contributing to the entire project lifecycle from initial wireframes to the launch of Version 1. Initially tasked with the Second Brain system, my role expanded to encompass the analyze and connect dashboards, control center, and creative direction across other critical areas during biweekly collaboration sessions.
Wireframe explorations for the notetaking experience.
Wireframing
During the initial discovery phase, we expanded the block frames provided by our CXO into more detailed wireframes, exploring options for platform information architecture and interaction patterns. I led the design for the Second Brain ecosystem, focusing on note-making for the MVP. My low-fi exploration involved collecting references, understanding Tiago Forte’s system for building a second brain, and envisioning the ideal note-making feature for our platform. After many iterations and jam sessions with the team, we finalized the quick note feature and a library for notes and bookmarks.
The internal design and engineering teams focused on delivering a POC while high-fidelity designs and the brand re-design were finalized.
Brand Discovery
Parallel to platform design Real Vision was also under a major rebrand. Starting off internally our team developed style scapes and researched comparable brands to redefine Real Vision's brand, iterating based on feedback from stakeholders before presenting to our CEO and external branding agency, MetaLab for final explorations.
Individual boards brought top team jam session
Combined team board - presented to CEO, Raoul Pal & branding agency, MetaLab
MetaLab Handoff
Following 8 weeks of design sprints conducted in collaboration with our internal design team led by Director of Product Design, Marco, and with feedback provided by Christine and myself, the ML team produced two key deliverables:
- UI Kit with Principles and Guidelines: A comprehensive set of principles and guidelines were established to ensure consistency and coherence in design across the platform. This kit served as a foundational reference for all design work moving forward.
- Screens for Platform Parts: The team developed and finalized a file containing screens for various sections of the platform. These screens were iterated upon internally to align with a fixed screen height pattern, optimizing them for front-end development.
The Control Center
A key area redesigned was our homepage experience. We received critical feedback from our key stakeholder and CEO about the need to save users time. The purpose of this iteration was to catch users up on what they missed, show them the global network, and provide quick access to their notes, notifications, and watchlist. As you go through the iterations, you can see how the screen has become a dense jumping-off point, inspired by Bloomberg, albeit more minimal.
CoverFlow Animation
AI Assistant Integration
Developed two distinct AI Bot experiences: one for general queries (leveraging ChatGPT) and another for parsing video content transcripts.
Conclusion
Real Vision 2.0 represents a holistic redesign effort aimed at elevating user experience, integrating advanced features, and fostering community engagement within the financial sector. By leveraging collaborative efforts and iterative design principles, the platform aims to serve as a cornerstone for financial education and exploration.
Previous project