Devi Cross Platform - UX/UI Case Study
"Devi" outlines the creation of a cross-platform app using the Atomic Design System. Tailored for pupils aspiring to master web development, this app offers a user-friendly interface and comprehensive learning modules. Through meticulous design and user research, it ensures an intuitive experience across devices while focusing on personalized learning paths and real-time feedback. The case study highlights a cohesive blend of design strategy and educational focus, empowering users to delve into web development seamlessly.
Problem statement
In this UX case study, we aim to address critical challenges faced by young individuals aspiring to learn web development through our app, Devi.
The app currently encounters two primary obstacles: the absence of a structured methodology for learning and the fragmentation of essential lessons across multiple platforms. Our users struggle due to the lack of a clear, step-by-step approach, impeding their grasp of web development fundamentals. Additionally, the scattering of valuable lessons across disparate sources leads to inefficiencies and frustrations.
Our Goal
The goal of this case study is to design and implement UX enhancements within Devi to seamlessly integrate a structured learning methodology and consolidate all essential lessons into one accessible platform. Through these improvements, we aim to streamline the learning experience, offering a cohesive pathway for skill acquisition in web development, empowering our users to learn efficiently and effectively.
Design Thinking Process
01.Empathize
I reached out to some friends and family members with a set of questions about how they study, if they use any digital tools to help them with it, and what are their experience with different learning platform.
Qualitative research
Can you describe what is your process of studying something new?
Which step do you consider to be the most frustrating?
Have you used an online learning platform? If Yes, what did you like or dislike about it?
What are the most challenging aspects of learning new things?
Have you ever had difficulties finding the right resources for your study?
Where and in which part of the day do you like to study?
Insights & Pain points
02.Define
User Persona
Storyboarding
User: Mary Gibson
Scenario: Discovering & using Devi Learning App
Type: Big picture
User: Mary Gibson
Scenario: Choosing a course & opening a video lesson.
Type: Close-up
User journey map
User: Mary Gibson
Scenario: The process of learning web development
03.Ideate
Userflow
Sitemap
We made a Sitemap to have a hierarchical representation of our app, that shows how pages are prioritized and linked.
Usability study - Plan
Project background: We're creating an app to help young people learn web development. We want to learn if the app has a structured methodology so that we can solve the users pain points. We also want to understand if the user flow it is easy for users to complete, and which components they think are useless or would like to be added.
Research goals: Determine if our app has a structured methodology. We want to know which components are useless or what we need to add.
Research questions:
What can we learn from the user flow? Can we simplify the steps?
Do users think the app is easy or difficult to use?
Are there components users think that are useless? Or they would like to add new features?
Are the users satisfied with the app’s structure?
Key performance indicators(KPI):
Conversion rates
Time on task
User error rates
Methodology:
Unmoderated usability study / moderated usability study
Location: Romania, remote (each participant will complete the study in their own home)
Date: October 21
Duration: Each session will last 5 minutes.
Script:
Prompt 1: Tap on “sign in with google” button.
Prompt 2: Tap on the in-progress centered course-card.
Prompt 2 follow-up: Did you have problems to find the card-course? Would you change something about the process of picking in-progress course?
Prompt 3: Tap on the “Introduction to HTML” card
Prompt 3 follow-up: Is there anything you would change?
Prompt 4: Tap on “Intro” lesson
Prompt 4 follow-up: Is there anything you would change?
Participants will score the following statements by selecting one of five responses that range from Strongly Disagree to Strongly Agree
I find the steps from login to watching a lesson unnecessarily complex.
I think the app is easy to use
I think the app has a structured methodology
I find the app easy to use
I imagine that most people would know how to navigate the app
Do you find some elements useless? If yes Which one?
What elements or feature would you like to be added?
Usability study - Findings
Atoms
Molecules
Organisms
Templates (Low-fidelity Wireframe)
Mobile Prototype: Click here
Tablet Prototype: Click here
Desktop Prototype: Click here
Pages (High-fidelity Wireframe)
Mobile Prototype: Click here
Tablet Prototype: Click here
Desktop Prototype: Click here
Thank you for scrolling!
Let's get in touch
arnautulucas@gmail.com