Overview
This was s a project that was sponsored by Microsoft design expo and our design brief this year was how we could leverage artificial intelligence to expand the future of learning and education. From the research, we learned that the workplace is changing due to rapid automation and relying more on soft skills. Students are lack of exposure and preparation for these skills when they transitioning from school to industry. Since it’s a five months project, we scoped down our solution to focus on integrating an intelligent mentorship platform that connects students with mentors to bridge the gap between academia and industry and prepare students in different professional contexts. We had 5 people on my team coming from different backgrounds and I am mainly responsible for visual design, creating prototypes and translate user insights into wireframes and UX flows.
Challenge
How might we teach communication skills to students entering the workforce?
From our research, we learned that the workplace is changing due to rapid automation and relying more on soft skills, which are hard to automate and learn, especially for students entering the workforce.
Solution
Designing an intelligent mentorship platform that connects students with mentors to bridge the gap between academia and industry, prepare students in professional contexts, and maintain meaningful connections.
Focus
We focus on students and new Grads in STEM, Business, and Creative fields. Because it is a pervasive problem faced by a large number of students making this transition every year and we learned that students are lack exposure and preparation for professional situations
Design Process
//Key Findings / Design Principles
Product Overview
Taylor, the motivated student from CMU will sign in Seam with her Linkedin account and going thru on-boarding process. Then, she will meet the virtual agent, Seam and select her mentor, Brooklyn. In home screen, Taylor could see an overview of her plans and discussions. There are three main features on this platform: chat, archive and journey. In chat, Taylor could text and video chat with the mentor and AI could provide help if mentor is not available. After video chat, both of them need to do the reflection and Taylor could review meeting notes in archive. In Archive, Taylor could review meeting notes that is recorded by the VA. Lastly, in journey, she could check her progress and see what actions she needs to complete to achieve her goals.
Visual System
When we need to move forward to high fidelity, I look across our wireframes and created design system. I created several versions to do A/B testing and see which UI pattern is more engaged with the users. for instance, we test on dark vs light interface, readability, typography, button size and position with our users. Then, I shared and update UI pattern to our team so that we could align design across the screens
Design & Key Interactions
On-boarding & Matching
Ideal Mentor Matches through Better On-boarding process
Seam gets to know Taylor by asking about her goals, experiences, background and communication preferences.It suggests the ideal mentor based on the Taylor’s background and preferences.
In an effort to make this selection process as transparent as possible, the system provides her with the rationale behind why they were matched
Virtual agent: Seam
Enable and disable virtual agent (Seam) with a tap, so the users have full control of privacy
Quick Chat
SEAM supports the conversation with helpful suggestions, links and scheduling.Quick chat
Based on their conversation, SEAM provides relevant Resources.
SEAM helps Taylor and Brooklyn plan a longer video conversation that works with both of their busy schedules.
As SEAM understands Brooklyn’s availability it can step in to provide immediate answers. SEAM supports the conversation by providing actionable steps that help Taylor work towards her goals and milestones. For instance tapping in to linked services like Linkedin to provide suggestions based on the context of their conversations.
Video Chat
Brooklyn and Taylor can have a video chat while SEAM collects resources and insights from their conversations.
Reflections
After video chat, SEAM nudges both Brooklyn and Taylor to reflect regularly on their progress at key moments. It can flag misalignments in their reflections and encourage them to discuss about it.
Milestones & Progress
The milestones that Taylor has set with Brooklyn appear on the milestones page. These milestones are smaller steps towards Taylor’s long-term goal.
Taylor gets an overview of her completed & in-progress milestones. She can check the actions pending to make progress towards her goal.
Process
01 Exploratory Phase
We followed the HCI design process throughout the project. In the exploratory stage, we conducted interviews with students and subject matter experts to understand student needs in terms of soft skills. And at this stage, we narrowed down our scope to teaching student communication skills.
02 Generative Phase
In the generative phase, we invited students, new grads and manager to our communication workshop to talk about their pinpoints and needs. The workshop included four activities: Journey map, Sticky Scenario, Role Playing and Build your own Communication Tool. After workshop, We did affinity diagraming to synthesized and analysis our workshop and student survey insights so that we outlined the design principle and create personas to develop concepts.
//Workshop Artifacts (more of qualitative data)
//Student Surveys (more of quantitative data)
//Personas
Here is the persona we created and follow when we developed our concepts. Taylor is a motivated student in the transition from school to industry. Brooklyn is a professional who wants to help and learn from other young professionals. Besides, we also consider what our AI agent’s persona should be in different context
03 Evaluative Phase
In the evaluative / design phase, we ideated our concepts by speeding dating with the students and learned that mentorship platform was something that they think is helpful for them to develop communication skills. Then, we created low-mid fidelity prototypes to evaluated our final concept by conducting user testing and usability testing with the students for us to moving forward to final design.
//Narrow Down 16 Concepts…to Three
To achieve our goal of distilling our 16 concepts into 3, we used two methods of evaluation: Speed dating with students and analysis mapping. The results was very effective, especially speed dating with students because we directly get user’s feedback. We walked thru our concept with users from business, design and stem backgrounds and ask them if they would be interested in using what was described in each scenario.
Analysis mapping: We introduced a y axis representing feasibility. Allowing us to see which schemes emerged as both an effective use of AI and feasible. In addition to the effective us of AI metric, we conducted the same mapping exercise with other criteria such as communication skill building, Human interaction and alignment with research.
//Narrow Down to Final concept
Speed dating and analysis mapping exercises were incredibly helpful, so we applied these methods again to narrow down and arrived at our final concept: intelligence mentorship platform, with a concept based around the idea of being matched with both a human and virtual mentor that can help students build their communication skill and ease their transition into the workforce. That said, the other two concepts were also received well, but there were some concerns about privacy and some confusion about the hardware components, but overall there is a great deal from these two concepts that we hope to incorporate info our final scheme.
04 Evaluative Phase: Iteration and Design
//User flow
Taylor, the motivated student from CMU will sign in Seam with her Linkedin account and going thru on-boarding process. Then, she will meet the virtual agent, Seam and select her mentor, Brooklyn. In home screen, Taylor could see an overview of her plans and discussions. There are three main features on this platform: chat, archive and journey.
In chat, Taylor could text and video chat with the mentor and AI could provide help if mentor is not available. After video chat, both of them need to do the reflection and Taylor could review meeting notes in archive.
In Archive, Taylor could review meeting notes that is recorded by the VA. Lastly, in journey, she could check her progress and see what actions she needs to complete to achieve her goals.
//User Testing & Feature Ideations
We conducted user testing with a group of mentor and mentee from CMU mentorship program. Here were three highlights that we learned from the users to iterate key features
01. Be transparent about the decisions that AI makes
We learned that when it comes to AI, most people are concerned about transparency and privacy. so we need to be transparent about the decisions that AI makes and give user the full control of privacy
Example: Matching process
At first, we provided a list of mentors for user to select. As we understanding that users wanted AI to recommend the best match, we then provided one best match and four other more mentors. Then, we learned that users wanted to know the reasons behind the matching process. So at the end, we provided rationales behind the matching process
02. Reflections should be quick and use more of visual interactions
Example: Reflection
Second thing we learned from users that reflections should be quick and use more of visual interactions, user won’t be engaged if it’s only use of text based reflection. so we combine both text and visual reflection, then make them into smaller steps for user to complete easily. We also design slider since users tend to like it more than just tab on the emoji.
03. User is able to save the resources /conversation that is provided by AI/mentors
Example: Bookmarking online resources provided by AI in Chat
We also learned that user wants to bookmark resource in Chat. So, I did different variations of save interaction and found that most of users liked how long press to save the resource is more intuitive than the other two.
//Visual System
Take Away & Next steps
01. Our prototype is a solid first step towards evaluating our idea. Next steps would include simplifying some of the core features into an MVP, and testing it in some real-world scenarios. CMU had great mentorship program and they really need an app to match and connect student and mentor to communication. We might roll out core feature such as matching, in app chatting and reflection.
02. Our design now are mainly focus on students/new grad, we also want to design the app focus on mentor’s side and understand what the day to day of a mentor like when they are using our platform.
03. AI is a huge constraint for this project but I learned to design around transparency and privacy in my solution. I think that I will carry on designing around ethical issues and be more empathy for the end-users.
04.I learned to think holistically for the design process and collaborate with non-designer on design workflow. Learning to lower my ego and willing to provide/receive feedbacks for the overall growth of my team!