UX Team: Wenwen Song
Time: April 2016 to present
Learn Together Part Two: Product Design
Design LearnTogether: a mobile-first social learning platform that features on the exclusive networks, conversational mentorship, and modular learning widgets.
Based upon the user research and business propositions, proposed new concepts and features that could deal with effective soft skill learning processes drafted paper wireframes and turned wireframes into a high-fidelity prototype for the 2nd round user study.
My Contribution:
DEFINE
-
Habit Centered Design Methodology
-
User Profile
RESEARCH
-
Social Learning
-
Conversation as a Platform
-
Quora, Q&A in Social Networks, and Community-based Q&A
ITERATIONS
-
App Flow
-
Conversation/Chat
-
Action Card
-
Onboarding Experience
I. DEFINE
Habit Centered Design Methodology
Together with the User-Centered Design Process, the team also applied the methodology of Habit-centered Design into the product development process, the purpose of which was to design a habit-forming product. This new methodology was initiated by Hayagriv Sridharan, our Lead Developer, and further developed by him, Bob, and me.
My contribution to the methodology
1. Helped refine the questionnaires in each link of the cycle (by "link", refer to "External Cue", "Internal Cue", "Use", "Reward" as below).
2. Created one of the 3 user profiles by applying this methodology.
3. Designed all the visual assets for the presentation.
Click through the slideshow below to see what this methodology is about:
User Profile: Apprentice
There were 3 personas defined for the application as below, and I was in charge one of the user profile Maria, defined as an apprentice in a learning relationship. This profile was created based on the results of the user study we did before.
Maria - Apprentice
In a learning/mentoring relationship, Maria:
-
Knows some people
-
Is partly well respected personally
-
Is partly respected professionally
-
Is somewhat confident Is not a recognized leader
Maria - Apprentice
In a learning/mentoring relationship, Maria:
-
Knows some people
-
Is partly well respected personally
-
Is partly respected professionally
-
Is somewhat confident Is not a recognized leader
User Analysis
What problem does your user have? How do they currently solve the problem? How...
External Cues
A stimulus that gets the user to go to the app.
I. Who is the best person to cue the user?
-
Someone who has a close personal relationship with her.
-
Someone who supervises her.
-
Learn Together System/Bot who is informed of her schedule.
II. What is the best venue for the cue?
-
Personal Talks
-
Emails & Messages
-
Posts from Facebook
-
Push notifications
III. How can the cue tie into the user’s internal cues?
-
“Get better” in an effective way.
-
Aim at fear about bad performance and subsequent bad outcomes.
Dream: 3 unconventional triggers
-
In workshop (be encouraged to reach out to the mentor in our social network)
-
Push notifications from the app
-
Endorsements by the mentor on social networks
Internal Cues
An internal emotional or intellectual stimulus that gets the user to go to the app.
Method
1. Use the 5 Whys method to reach a powerful emotion.
2. Use the loophole analysis to come up with three anti triggers that could trigger your user to discard action.
Use Analysis
The user takes an action within your app to satisfy an internal or external cue.
Method
1. Find ways to pair unengaging with engaging behaviors.
2. Find sub-rewards that can get the user over effort humps.
3. Motivator heuristics
4. Ability Heuristics
5. Motivational techniques Use testing
Reward Analysis
What the user gets out of using your app. The reward alleviates negative cues and reinforces positive cues.
Method
1. Try to find rewards from each category.
2. Incorporate little rewards as often as possible.
3. Scale rewards so they increase with increasing usage.
4. Publicize rewards to other users and outsiders who matter to the user.
Investment Analysis
User personal investment = f(Effort, Commitment, Payout)
Method
1. Identify key aspects of your app that the user does not want to lose. This can be money, information or connections.
2. Ikea effect(I built it myself), the endowment effect (I own it myself). Can you provide specific items that your user now “owns”?
3. Identify ways to make your app be associated with good – Halo effect
4. Does every interaction in your append on a high note? – Memory Bias
5. Does your app regularly remind users of all their activities and achievements? – Availability bias
This is the end.
All the analysis was made on the product ideas that the founder came up. My job was to evaluate the ideas with this methodology and bring the ideas to life - design the app.
II. RESEARCH
As stated earlier, "social learning" is the key concept of the product, which involves the sub-concept of practice and performance, problem-solving engine, and learning based on learning. To better understand these subject matters we were building for and get inspiration on how design could visualize these concepts, I did further research to help myself make informed decisions.
Social Learning
Happily, what we found in Social Learning Research exactly justified what we found in the User Study. It also inspired me to come up with new ideas for the product, which were accepted by the founder and integrated into the product later.
Takeaways
Below was one example of the findings and what ideas it inspired.
New Idea & Takeaways
1. Teach Others/Immediate Use of Learning as the most effective ways to learn. We could probably suggest who just learned to mentor others on the same topic or problem/challenge. This could be implemented by our Match algorithm.
2. Practice by Doing: this was exactly what we are designing for the feature of performance?
3. Discussion Group: this was exactly the idea of conversational learning.
I. Learning Pyramid
The illustration above shows the efficiency of different learning methods.
Messaging (Conversation) as a Platform
The conversation is the center of LearnTogether as Bob, the founder, states. Yet at this moment (closing the user research and beginning the product development process), we were not clear how we should approach the concept in a mobile platform: What's the user flow? How should it look and feel like? etc. Therefore, before digging into the process of wireframing and prototyping, I did some research on this topic and got some great insights that directly affected our product design decisions.
Takeaways
Research Report
This is a simplified version.
I. Messaging Apps Have Surpassed Social Networks
Given the good performance (Use base, retention, usage rates, and user demographics) and continuing growth of messaging app, Learn Together’s current effort to integrate chat with learning process is worthwhile and promising.
Chris Messina. 2016 Will Be the Year of Conversational Commerce
II. Chat as a unified UI
Messaging apps are about more than messaging - has been widely discussed and recognized as the new trending. Large efforts are put for its commercial use.
Current Practice in the Industry
1. iOS 10 iMessage
2. WeChat
3. Messenger with Uber Integration
III. Curation is fundamental to Chat UX, given the fluid information flow happening in the conversation.
Opportunity &Challenge
Opportunities:
1. Haven’t seen a successful example of chatting-based (or conversation-based) social learning platform.
2. Appeals to the young generation.
Challenges
1. How does it work for learning purpose?
Opportunity & Challenge
Opportunities:
1. Integrate with other lesson-based learning platforms by offering widgets (e.g., Lynda, Coursera).
2. Chat Bots (e.g. Slackbot): Learn Together Bots that could have conversations with users.
3. Data Detector (e.g. Messenger with Uber Integration): offer appropriate widgets while detecting user messages, e.g., assets or event.
Challenges
1. Build out services and monetize the massive user base.
2. Inverted Pyramid (in Journalism): How do we offer and curate critical information, additional information, and information that’s interesting and nice to have.
Quora, Q&A in Social Networks, and Community-based Q&A
Another research topic I did was Community-Based Q&A. The research studied several current Q&A products in the industry and analyzed their goodness, badness, and challenges in designing a similar product.
Quora was one of the products that I paid most attention to because it is one of the most successful products in the industry and is widely studied by researchers and academics.
Quora
Competitive Analysis
This is a simplified version.
I. How Does Quora Work?
-
Quora is basically a Q&A community.
-
Set up personalized feed and tell Quora what're you interested in by following.
-
Real-name policy: users are required to use their real, full name.
Structures of questions, topics, and users in Quora
Gang Wang, Konark Gill, Manish Mohanlal, Haitao Zheng, and Ben Y. Zhao. Wisdom in the Social Crowd: An Analysis of Quora. Computer Science, UC Santa Barbara
II. Quora’s Differentiation from its Competitors
1. Integrates social networks into Q&A systems, which:
-
Drive rich information flow
-
Help users discover and find useful and relevant content
-
Encourage people to produce high-quality content
2. Values answers from specific domain experts with real identities, which ensures high-quality content and hand-on experiences in response to questions
3. Values high-quality, helpful, and authentic answers.
Thoughts: What can we learn from Quora?
Could possibly added to marketing pitch:
1. Social learning or training, in essence, is a process of knowledge sharing and transferring. If LearnTogether takes a direction of company-oriented application and we want to persuade the company to buy it, we could address that Learn Together helps with effective knowledge sharing/transferring within the company.
2. We help make better use of internal resources that would be otherwise not found by your employees and help find out the most useful ones, or most appropriate ones, by using our algorithms.
3. By algorithms or data analytics, we help identify the most asked questions (i.e., skills that need be taken care of most), which might imply the problems that stop your company from being productive and effective.
My Reflections
After completing this research, I got some good ideas about whether LearnTogether should incorporate Q&A as one part of the social-learning engine and proposed them to the team.
Reflection
on Community-based Q&A
I. LearnTogether as a learning ecosystem with multi-layered approaches to soft skill development.
For example:
1. Some of the problems or frustrations could be solved by just an article recommended by others.
2. Some of the problems could only be solved by practicing and getting hands-on experiences from an effective mentorship.
This also helps to build trustful and supportive relationships progressively.
II. Relatable & Actionable
1. Relatable: This happens when the application is aimed at building the professional work group within the company, which enable people to answer with work-related and might-be-confidential content.
2. Actionable: Not only can one pose a question and answer a question, they can also approach to someone and meet in person for live practices.
III. ITERATIONS
This is an ongoing project that I'm currently working on. The following sections , in an order by time, includes the main design tasks I was assigned in the past 5 months. Each task I've worked on went through an iterative process as required by feedback from the team or the users.
App Flow
The app flow described the overall structure of the application. As the design process proceeded forward, there have been continuous changes and advancement to the flow chart.
Tasks
1. Create App Flow Chart
2. Present the app flow to other team members (Developers & Instructional Designer) so that the whole team could get an idea of the big picture.
Tools
1. Sketch
2. RealtimeBoard
Progress and Deliverables
App Flow Version 1.0
The very 1st information structure of the application come up by the founder. My job in this version was creating mockups.
High-level App Flow
Devised by: Bob Boiko
Refined by: Nina
Visual Mockups
Created by: Wenwen
Tools: Photoshop & Sketch
HTML/CSS Templates
Created by: Wenwen
Tools: Sublime 2 & Chrome
Framework: Bootstrap
App Flow Version 2.0
The 2nd vision for the app after adopting Habit-centered design methodology and being influenced by a series of research & user study.
High-level App Flow
Present to the Team
It was more difficult to present the flow than to design the flow. The paper flow didn't work well in explaining the structure. I ended up walking through the structure with whiteboarding. This turned out to be a better way to engage the audience and explain the flow.
Feedback & Decisions
#1 Simplified the concepts of Conversation, Challenge & Problem into "X". We didn't want to confuse the user with the terminology while these three concepts were identical.
2. Questioned the idea of a "Challenge Board".
Wireframe
Feedback & Decisions
#1 After the discussion, we discarded the idea of "X Feed" which I proposed to be a public forum and turned this tab to "People" where people could explore their network and find the "match." Because:
-
As for the 1st release (MVP), this kind of feature was just a "nice-to-have." Let's keep it simple first.
-
Don't be the second Quora. The center of LearnTogether was "Conversation."
#2 & 3 There had been different iterations for Conversation Screen, which will be independently articulated in the following section.
#4 There were a lot of other wireframes created. Since they'll be shown in digital form, I don't display all of them here.
App Flow Version 3.0
The overall and finalized (for now) structure of the application attached with refined mockups.
Conversation
All the learning, mentoring, and problem-solving happens in the Conversations, which are designed to assist mentorship, practice by doing, and discussions, the 3 most effective ways to learn as studied. We bring these 3 learning methods to LearnTogether by Adding Widgets to Conversations.
Tasks
1. Refine and Create New Conversation Flow
2. Design Conversation UI (Mockups & Prototype)
Tools
1. Sketch
2. RealtimeBoard
3. Justinmind
Progress and Deliverables
Conversation Flow 1.0
Creator: Bob Boiko
Conversation Flow 2.0
Inspired by the idea of Conversation as a Platform, as mentioned before, I proposed a new design that not only met all the requirements asked by Bob( i.e. maintain and optimize all the features in version 1.0) but also offer a more mobile-friendly and holistic conversation experience.
Conversation Flow 3.0
Luckily, the idea of Conversation as a Learning Platform was accepted by the team and soon discussed in the product development process.
Under this circumstance, 4 main learning widgets were devised for the next release and I continued to work on revising the flow and designing the user interface accordingly.
Widget Example
