Mark, Snip, and Succeed
Make training and learning like TikTok
Project Overview
The Guide App is a Learning Management platform designed to redefine employee training through byte-sized stories. With features that increase engagement, reduce onboarding time, and scale training efforts, Guide has become a go-to solution for businesses aiming to enhance their training processes.
Challenge
Guide faces challenges in supporting users who need to efficiently manage and interact with long-form content. Addressing this gap is vital to improving the user experience and boosting productivity.
Opportunity
The core opportunity lies in significantly improving the user experience for both content creators and learners within the Guide App.
Role
UIUX Designer & Developer
Tool
Figma, Adobe Illustrator, Figjam
Team Size
6 People Capstone Project
Goal
Reducing course creation time by 30%
without external tools.
Process
The Design Sprint methodology guided our development of the functionality.
This proven framework enabled us to rapidly address user challenges, generate innovative solutions, and validate them through rigorous user-centric testing.
01Map: Aligning Goals and Problem Discovery
Identifying Problems
Through the following research, we found that a significant factor contributing to long editing times is the lack of integrated video editing tools within the Guide App. Due to the platform's video length restrictions, users often need to utilize external editing software to adjust their videos before uploading, adding an extra step to the content creation process.
Stakeholder Interviews
We conducted interviews with key stakeholders to understand their business goals, and identify platform limitations.
Potential User Interviews
Conducted interviews with content creators, HR trainers, and trainees to gather a comprehensive understanding of user pain points and needs.
Lean UX & BMC
Developed frameworks to align user problems with business objectives, focusing on key activities, resources, and value propositions.
Competitive Analysis
Analyzed competitors and existing solutions to identify best practices, feature gaps, and areas for differentiation.
Lean UX & BMC
We employed the Lean UX and Business Model Canvas methodologies to ensure our research findings and design solutions aligned with the business goals.
These frameworks helped us continuously validate that our proposed solutions not only addressed the identified user needs but also contributed to the overall business objectives. We can also explore potential revenue streams, identify key partnerships, and assess the overall viability of the feature.
Key Insights from User Interviews
Interviewees expressed strong interest in and positive feedback towards micro-learning formats
Interviewees find finding right videos for editing is the most time-consuming part
Interviewees desire to track the training performance more easily and have timely feedback
Competitive Analysis
Competitive analysis revealed key trends in modern Learning Management Systems, a strong emphasis on mobile-first design, the rise of short-form video content, seamless integrations with workplace tools.
Furthermore, advanced video editing capabilities, including AI-powered enhancements, and flexible sharing options, are increasingly crucial for engaging learners and streamlining the content creation process.
02Sketch: Ideation and Exploration
Through collaborative ideation sessions, including 'Crazy 8' and 'How Might We' exercises, I contributed to the generation of a diverse range of design concepts.
Persona & User Journey
By creating user personas and mapping user journeys, we gained valuable insights into how users interact with the product and identified key pain points and opportunities for improvement.
Rapid Sketch
During the ideation phase, we engaged in a dynamic process of sketching and brainstorming to explore a wide range of innovative design concepts and potential solutions.
We actively participated in collaborative sketching sessions where we explored a variety of ideas to generate a diverse pool of potential solutions.
Each team member also conducted independent sketching exercises to further refine their individual ideas and explore unique perspectives.
03Decide: Prioritization and Storyboarding
Votes & Story Board
To ensure we selected the most promising solution, we conducted a rigorous evaluation and refinement process.
- Voting on Ideas: Client and team members voted on sketches and designs that best meet user needs.
- Creating a Storyboard: Developing a step-by-step blueprint for the selected solution, outlining how the user will interact with the app.
- Risk Assessment: Identifying potential technical or usability challenges and creating mitigation strategies.
04Prototype: Building a Realistic Model
As the UI Designer, I led the development of a functional prototype that incorporated the key features of the 'Mark & Snip' tool.
This prototype enabled users to easily mark and tag key sections within long-form content, effortlessly create and save contextually-rich snippets from the marked sections, and interact with the tool through intuitive and user-friendly controls and visual markers, all designed to enhance the overall usability and accessibility.
Challenges
Software Limits
Difficulty in prototyping complex interactions, such as drag and drop, and resizing function
Before and After Editing
Different view of same screen before and after editing stage is hard to be consistent through out the prototype
05Validate: User Testing and Feedback
The final phase involved rigorous user testing to gather insights into usability and functionality. We utilized Useberry platform, I conducted usability tests with a diverse group of participants.
We designed 6 scenarios to evaluate user interactions, carefully timing their performance and conducting follow-up interviews to understand their thoughts and feelings throughout each task. Based on the valuable feedback gathered during these tests, we then iterated on the prototype design, refining the interface and functionality to address any usability issues and ensure the final product effectively met the needs and expectations of our target users.
6 Scenario Ease Score
Feedback
Order of the Side Menu
Users expect the editing features to be placed at the top of the side menu and the settings features at the bottom, as editing is used more frequently.
Confusion on Effect Menu
The fade in animation is expected to be located under the 'Effect' icon but the button is unclickable.
Naming Confusion
It is confusing to relate the “markers” to “chapters” (Editor-facing vs. Viewer-facing)
Iteration
Change the Order of the Side Menu
Keep current navigation design, but change the sequence of the features. We plan to do further testing on users.
Add Tooltips or Coach Marks
Add some explanation or examples about “Mark” to explain what is this feature and how it works. For example, adding Coach Marks when user first logs in, explaining what each feature means.
Add Visual Cues
Add visual cues, such as labels, to indicate that uploaded videos appear in the timeline.
06Reflection
This is an ongoing project, we are still working on improvement and further research and usability test.
This project provided invaluable experience in the full UX design process, from user research to prototyping and testing. The Design Sprint methodology proved to be an effective way to rapidly develop and validate our design solutions. Developing the "Mark & Snip" tool was particularly rewarding, as it directly addressed a significant user pain point. One of the key challenges was balancing the desire for advanced features with the need for a simple and intuitive user interface.
In future steps, I would dedicate more time to user testing, allowing for more iterative improvements based on user feedback. I would also explore more robust prototyping tools to better simulate complex interactions.
This project highlighted the value of collaboration and communication within a design team and also with the client. I learned how to effectively translate user needs into tangible design solutions and how to advocate for the user throughout the development process.