Project Plan
Task
To conduct a thorough discovery phase to identify opportunities and gaps and to validate the solution. Based on the findings of the research, we were to design a new learning experience for students to organize and memorize subjects effectively
Team
Business Analyst, Project Manager, UX/UI Designer
Duration
4 months
Scope
Discovery phase and UX/UI Design in a form of 85 web app screens with mobile responsive design
Result
A Miro board with all the discovery phase findings, clickable wireframes, a few UI Concepts, and the final deliverable in Zeplin with a style guide and exportable assets
Overview
Study Flow is an educational app that helps students to organize study materials and learn how to memorize subjects effectively. To deliver an improved learning performance, we enhanced the traditional note-taking approach with interactive study techniques such as Spaced Repetition, Quizzes, Interleaving, and Categorizing (STIC).
Cieden worked jointly with the stakeholder to understand various study methods and their effectiveness, conduct market research, identify the gaps in competitors’ features, facilitate a brainstorming workshop to ideate and validate the solution, conduct quantitative research (survey), define project scope and a feature prioritization map (roadmap), list jobs-to-be-done, define monetization strategy, build information architecture and the actual UX/UI Design.
The main concept is that all topics and study materials are organized hierarchically using a nested list and a mindmap with collapsible nodes. A node can contain study materials such as notes, images, videos, attachments, etc. as well as quizzes/flashcards which can all be ordered into a Study Plan.
Benefits
- The client conducted significant research on the study methods which gave us a deeper understanding of his vision for this product
- Technically savvy client who helped us define the project scope based on the functionality complexity
- A gap in the edTech market that enabled us to think outside the box and ideate
Challenges
- The project is self-funded. Thus, we had to wait long before we could learn about user feedback
- We’ve discovered that it’s technically challenging to adopt the product for real-time collaboration, so this functionality had to be moved to phase 3 in the product roadmap. We conducted a survey based on the initial assumptions at hand to identify the pain points of customers and potential “painkillers”
Step 1
Discovery Phase
Learning for the sake of learning does not bring long-term results, it may lead to burnout, a waste of time and money. Keeping this in mind, it is essential to create an engaging learning experience to make sure the learners understand why they do it, to make every minute count.
Cieden’s team and the client were focused on the creation of innovative learning experiences, targeting potential users who aspire to organize knowledge and study effectively. A detailed analysis of existing learning methods, conducting market research, and the analysis of competitors’ features have led the team with a number of design questions.
To research the issue in-depth and continue the work with the brainstorming workshop, the team developed a series of assumptions and created jobs-to-be-done frameworks.
Step 2
Competitor Research
After reviewing plenty of competitors, the functionality of their products, and reading user feedback on them, we got a helicopter view of what’s currently available on the market. We identified a trend almost right away. None of the apps we’ve reviewed help users conceptualize and really learn. What the competition does instead is focusing strictly on memorization. They present information in small isolated chunks through flashcards, free of any context. In other words, categorization, which is an essential part of learning, is missing. That’s what we decided to zero in on.
Step 3
Brainstorming Workshop
Workshops are intensive sessions used during the design process to solve problems and challenges when cross-functional collaboration is needed. Workshops enable participants to come together for a limited period of time of idea generation and hands-on activities that allow them to achieve an actionable goal.
We started by defining Problem Statement and used 3-6-5 Brainwriting methodology.
After gathering, grouping, and prioritizing all the ideas, we conducted a Sketching Studio workshop to visualize some of the best ideas that later served as a foundation for interaction design.
As a result, we grouped our ideas into epics and voted for the winners.
Step 4
Survey – Quantitative Research
In the attempts to see what methods and tools students use to study and whether there is a desire to improve this process, we reached out to our potential customers to gather quantitive data. Armed with our initial assumptions only, we’ve recruited and surveyed students to better define their pains and their “painkillers”. That way we removed our own bias and based our further decisions on actual data.
Step 5
Value Proposition Canvas
The Value Proposition Canvas is a tool that can help ensure that a product or service is positioned around what the customer values and needs. At this step, we identified our customer’s major Jobs-to-be-done, the pains they face when trying to accomplish them, and the gains they perceive.
After listing gain creators, pain relievers, and products and services, each point identified was ranked from nice to have to essential in terms of value to the customer.
Step 6
Information Architecture
Having completed the discovery phase, we gained an understanding of each function, user actions, user flows, and scenarios. Subsequently, we created the information architecture that merged several modules, which complemented each other and provided a seamless experience for our end users.
Step 7
Product Scope
In the attempts to see what methods and tools students use to study and whether there is a desire to improve this process, we reached out to our potential customers to gather quantitive data. Armed with our initial assumptions only, we’ve recruited and surveyed students to better define their pains and their “painkillers”. That way we removed our own bias and based our further decisions on actual data.
Step 8
Wireframing
Based on identified users’ problems, the team developed a high-fidelity product prototype to test the design concept.
Step 9
UI Concept
As we all know, most students study at night, especially when they prepare for exams. Thus, we allowed them to choose between the light or dark mode in their customizable settings. Later, we added a few different themes to make our product visually appealing to a wider audience.
Step 10
Style Guide
To ensure consistency in the project implementation, we developed a style guide which is the single source of truth that groups all the elements that will allow the teams to design and develop a product. By utilizing a collection of repeatable components, we create an exceptional user experience.
Step 11
Final Result
Flashcards/Quizzes
Active Recall is a memorization technique we utilized in the product design. The technique involves learning something, and then regularly testing your knowledge actively through questions and tests, rather than rereading the material passively. Flashcards and self-testing are yet another group of studying techniques that have proven to be very effective. Spaced Repetition basically tells the user WHAT to study and WHEN based on their previous test scores and on a concept called The Forgetting Curve.
Image Occlusion
Image Occlusion lets you create cards that hide parts of an image to test your knowledge of that hidden information. The cards generated by this add-on would be best described as image-based cloze-deletions. We further boosted learning retention by implementing flashcards and quizzes coupled with mind map categorization. Such a holistic approach to studying maximizes the chance to retain the knowledge in the students’ long-term memory.
The MindMap
For every node in the mindmap, its title is displayed, but the user can also choose to show more things for each note. These things include:
• sections the user highlighted in the note embedded in the node;
• selected images/videos contained within the node;
• selected questions/flashcards contained within the node.
The mindmap isn’t just a different way of visualizing the same contents of the outline, but also a way of (optional) visualizing the other materials contained within each node: note highlights, media, flashcards, and user’s learning progress (determined by the learning algorithm). If we display too much info on the mindmap, it could become cluttered and confusing very quickly. That’s why we enabled the users to toggle among the different modes of visualization.
Lucas Mezalira
Richmond, Virginia, USA
I chose Cieden because of their portfolio which really caught my attention and their affordable pricing.
The team was transparent, describing their steps and timeline on different projects they’ve done. Moreover, they were enthusiastic about the product and excited to give suggestions regarding features and subtleties of the app that I hadn’t considered. Overall, Cieden’s team did very well and provided me with a design that was easy for me to implement as a software developer.
start your project with us.
is easy .
