Web-App
Bankrate Courses
Bankrate Courses, a new tool designed to be a cornerstone learning resource within the Bankrate platform. This innovative tool will provide a collection of video courses, organized into easily digestible chapters for an enhanced learning experience.
Problem
The current market lacks an educational product specifically centered on financial topics, with existing courses being either overly complex or challenging to follow. Users are generally unaware of the accessible learning options tailored to their needs.
The existing learning hub and articles were housed within a third-party app with restricted functionality and lacked customization to meet our requirements. The user experience was limited and suboptimal.
Objective
Develop a straightforward and user-friendly financial course learning experience. Explore diverse strategies for presenting learning products and consider various post-course recommendations. Motivate users to engage in additional courses for continuous learning.
Aim to develop a custom learning hub to eliminate dependence on third-party applications. This platform will have the capability to integrate video courses covering various topics and lessons. Should be able to categorize courses, access articles, and quizzes. Furthermore, the system will provide personalized recommendations to guide users toward additional actions or learning opportunities. Essentially, this custom learning hub will offer a comprehensive and user-friendly experience, tailored to specific needs.
Role
UI Design, Visual Design & Interaction Design
Design Process
The initiation involved gathering information and performing a competitive analysis, including the creation of the existing user flow for the learning hub that will host the courses. Additionally, data from the current Learning Hub, as well as performance funnel metrics, were collected.
Co-Creation
Following our initial phase, we collaborated on design meetings with key stakeholders from various departments, including operations, management, user experience, engineering, and creative teams. This inclusive approach allowed us to use different ideas and insights, opening up new ideas that we later developed. We went through several sketching cycles to revise and refine these ideas until we found the best solution. We then created a detailed story map to identify key user journeys and story elements, which shaped our final storyboard. This iterative process ensured we gathered the best ideas and insights from our team practitioners in the different fields came together, resulting in a unified and well-defined vision for our business.
Content Creation
Throughout the project, each team participated actively and collaborated seamlessly. Content production and video production happened in parallel, with the video production team, brand team and content team collaborating closely and working in harmony. The video was produced in-house under the guidance of our creative team, resulting in a simple and polished final product.
Wireframe & Prototype
After developing wireframes to map out the layout and functionality, I advanced a operating prototype. This prototype was shared with the group for remarks and validation. Adjustments were made primarily based on their input to ensure alignment with assignment objectives and consumer expectancies. This collaborative manner helped become aware of problems early on and facilitated smoother development.
Visual, UI and Animation
Upon completing the wireframe stage, I shifted my focus to the UI design process. Here, my objective was to enhance the visual appeal and refine user interaction elements.. This began with the visual design phase, during which I generated new visuals while adhering to the existing design system. In instances where a darker theme was required, I developed new colors and brand elements accordingly.
Subsequently, I concentrated on optimizing the layout of the interface to improve user flow and accessibility. This involved ensuring that elements were strategically positioned and organized for intuitive navigation. Additionally, I crafted a functional animated prototype and implemented responsive design principles to ensure compatibility across various devices and screen sizes.
Conclusion
The project has proven to be a resounding success for Bankrate, emerging as one of the organization’s most valuable products. Its launch saw an immediate surge in both organic and paid traffic, indicative of its immediate impact and relevance in the market. The overwhelmingly positive feedback received from both new and seasoned Bankrate customers further validates its significance. Moreover, the user interviews conducted several months post-launch revealed a strong desire for more products of similar caliber in the future. This project stands as a testament to the team’s dedication and innovation, setting a high standard for Bankrate’s future endeavors in product development.