Canvas Interface Redesign
2018
Jingwen Li
Canvas Interface Redesign
2018
Jingwen Li
Canvas Interface Redesign is an interface design group project that helps to improve the user experience of Canvas. The current layout of Canvas’s Homepage has much information that is not useful to students and is not conducive to assignment completion. Base on the experience of the recent Canvas homepage, our team listed out some major issues and we design our interview questions. Since almost every student uses the canvas, we decided to interview both lower level and upper-level students from different schools and college. After we did the observation interviews and researchers, we decided to redesign the Canvas into a customized homepage that would fulfill different needs for different students.
Canvas Interface Redesign is an interface design group project that helps to improve the user experience of Canvas. The current layout of Canvas’s Homepage has much information that is not useful to students and is not conducive to assignment completion. Base on the experience of the recent Canvas homepage, our team listed out some major issues and we design our interview questions. Since almost every student uses the canvas, we decided to interview both lower level and upper-level students from different schools and college. After we did the observation interviews and researchers, we decided to redesign the Canvas into a customized homepage that would fulfill different needs for different students.
Financial Advisor Finder Tool
A digital experience (Advisor Finder Quiz) that assists Wealth Management prospects in finding the right advisors to meet their unique needs and delivers high-quality leads to Morgan Stanley’s financial advisors
Project Type:
Client Project
Company: Code and Theory
Timeline:
3 Months ｜ 2023
My Role:
Product Strategy, Market Research, User flow, Wireframes
Tools:
Figma
Illustrator
Project Overview - The Ask
Morgan Stanley wants to improve their current financial advising matching experience...
Because prospects currently encounter challenges when trying to find a suitable advisor on the current search page. To address this, we have designed a matching quiz experience for prospects to find advisors that match their unique needs and also path those that aren’t the best fit to services that better meet their needs.
Challenges
The current "search for result" format makes it difficult for prospects to identify the right advisor from a lengthy search result list.
😩 Lengthy & hard to understand filter
😵💫 Overwhelming results
🤔 Raw and robust service information makes it difficult for prospects to learn more about the individual
At the same time, financial advisors are not receiving high-quality leads as they would prefer because...
🤔
❔
❔
1.
Prospects reaching out without a clear understanding of their financial goals, needs, investable assets, costs, etc.
❔
2.
Many prospects may not be the best fit for these services, but they still make inquiries.
3.
Outdated advisor information available for prospects to review leads to low-quality leads.
📰
🔍
🕸
So, We want to change it from a negative feedback loop into a positive flywheel
01 Research - Stakeholder Interviews
We spoke with MS stakeholders, prospects, and financial advisors to understand what makes a good match
More than ever, prospects are looking for advisors who can manage their wealth holistically. Helping them achieve multiple, often competing goals requires someone who understands their life and priorities. A successful match must go beyond certifications and location.
The matching experience is a two-sided ecosystem:
Therefore, the matching tools used to pair up these two parties are the most crucial steps. As prospects are the main users interacting with the tool, our design focus will be on the matching experience from the prospect's perspective.
The Ideal Prospect Persona:
After engaging with stakeholders, I have identified the following key insights to inform the direction of an ideal matching experience:
Insight 1 :
Educational content moments are essential.
Many prospects have little knowledge regarding financial advisors and the different services they could offer, meaning that demystifying complex financial topics and bridging knowledge gaps can foster more accurate pairing results and instill confidence in prospects.
Insight 2 :
Balancing transparency with accurate self-assessment helps to ease uncertainty.
Particularly regarding prospects’ financial status, investment readiness, collaboration preferences, and genuine willingness to pay. Crafting clear, carefully worded questions is crucial.
Insight 3 :
Emphasize life events over dry & hard-to-understand advisor specialties or certifications.
Many prospects are motivated to find an advisor due to a life event, usually tied to a clear goal, making it easier to match with an advisor who specializes in a specific area.
01 Research - Project Approach & Limitation
As this idea has been around for some time, there is a lot of existing work to learn from and build upon. However, it also means that the project is facing constraints in many ways...
Our plan is to leverage the existing advisor data from Yext, a current software partner with MS, and utilize the existing MS design system to design and launch an MVP for the market, which we can build on in the future.
Project Scope:
Advisor Finder CTA
Search Results
❗️❗️The advisor finder will bridge the gap between the pre and post advising phase, completing the entire journey seamlessly
01 Research- Competitive Analysis
Identified industry trends, analyzed, and categorized various types of quiz questions and structures from 18+ competitors' site audit
I conducted thoughtful research on these competitors to assess their web experience, user interface, features, functionalities, question types, etc.
The competitive analysis I conducted assisted me in identifying 4 key experience pillars that will inform the design of Morgan Stanley's advisor matching experience.
1
Adopt client-centric language and mindset
2
Be transparent to demystify the process
3
Respect the user’s time and attention
4
Guide the user while simultaneously qualifying
02 Ideation - Quiz Structure Ideations
Ideated quiz questions, question order, conditional logic, and off-ramp opportunities through 10+ rounds of iterations in collaboration with copywriter and strategists
😵💫 Current Filter Terms:
A robust filter makes it easy to glance over all the options; however, it’s difficult for prospects to prioritize their needs and choose the one that’s most relevant and helpful to them.
🥰 We've transformed each filter selection into easily understandable terms and recategorized selections by setting up different questions to guide the user
For Example:
#1: We categorized all investment needs under different life events to help prospects match with their most relevant life stage, getting them started to think about what they need.
#2: We helped them prioritize their needs by asking, “What is important to you?”
#3: We also asked them if they have any unique or personal preferences when choosing an advisor. Acquiring more preference information helps increase the matching success rate.
Quiz Structure Iterations
I ideated the first version of the quiz structure based on my research findings, current advisor data from Yext, and prospect qualification requirements. I then shared it with the team and collaborated with product strategists and a copywriter to further iterate on the quiz questions, logic, length, tone of voice, and selection options.
Sample Questions & Logic：
Conditional Selection
Follow Up Question
Off-Ramp Selection
Follow Up Question
Throughout the iteration process, our team hosted multiple stakeholder workshops to collaborate with the MS team to map out quiz structures and review copy.
What we learned from client workshop :
👍 The Client Workshop helped us prioritize question types, question order, and length, ensuring that MS collects the most helpful data early on. This way, even if prospects skip a couple of questions toward the end, MS can still generate helpful results.
03 Design - Design Challenges
Challenge #1: How can we qualify leads and provide off-ramp to other wealth management services for users throughout the quiz?
While the primary goal of the experience is to match the prospect with an advisor, it is equally crucial to ensure the prospect qualifies as a high-quality lead. Offering off-ramps to other services that better align with their needs is essential to prevent MS from losing potential business.
The challenge lies in presenting off-ramp options at the right moment and in the right place. To address this, I experimented with various interaction modes, including hover overlay and pop-ups, to determine the most effective approach.
Hover Overlay:
❌ Hover overlay works seamlessly on desktop but isn't viable for mobile users, leading me to abandon the idea after discussions and testing.
Pop-Up:
✅ Pop-ups function seamlessly on both desktop and mobile. The overlay grabs more attention and provides a larger space to share helpful information.
Hifi Design:
👍 Provide direct service access
👍 Easy to exit & continue the quiz
Challenge #2: How can we drive user engagement through diverse interaction modes?
While most of the crafted questions can utilize the same default selection design, such as checkboxes and radio buttons, it is still important to introduce various new selection components that engage users and reduce abandonment rates. Based on the types of questions, I introduced 5 new components designs to create more diverse ways of interaction.
Default Option:
New Selection Components：
Selection Boxes with Icon
Number Scale
Text Field
Slider Scale
Pill Selector
Selection Options (Multi / Single)
These include selection boxes w/wo icons and a stylized pill selector. Both were designed to provide visual cues to make the selection process easier
Sliders
The interactive slider allows users to explore and choose options simultaneously. The fluid number scale facilitates easy selection of precise numbers.
Text Field
The dropdown text field gives the user the flexibility to switch conditions easily.
Challenge #3: Clients looked at the first version of the design and said, “We want to make it sexier; it's a little boring and seems like all the other quizzes on the market.
While it's a little surprising to encounter the term "sexier" in design review feedback, our team has started to think and debrief on what it means for our clients.
Then we started to think about what makes us different and tried out different looks and feels. While the team was reviewing Morgan Stanley’s brand guidelines, we found that MS has a set of components made up of square & boxy layouts. We incorporated these elements into the quiz for a cohesive look with the MS website.
Current MS Website Components:
The Evolution Journey:
04 Final Design - Quiz User Flow
Our foundational building blocks enable us to support a range of question types and user interactions, providing flexibility for the future.
We can summarize our quiz system into five building blocks. The matching quiz will go live under the Advisor Finder CTA, strategically placed on multiple MS webpages, serving as a convenient entry point
Financial Advisor Matching Quiz Flow:
Advisor Finder CTA
Quiz Introduction
Questions
Quiz Completion
Search Results
Product Demo:
01 Your Motivation
The first section of the quiz includes questions designed to help MS understand prospects' motivations and needs.
02 Your Priorities &
Finances
The second section of the quiz is designed to gather the prospect's financial information.
Off-Ramps Pop Up
When specific selections trigger preset logic, such as investment assets or net worth not meeting expectations, an off-ramp pops up to guide prospects to services that better suit their needs.
A direct link is also provided in the pop-up, ensuring a seamless transition.
**In this case, the prospect was guided to the virtual advisor service and is able to schedule an online consultation right away.