Case Study 2: PlayLearn Desktop Version
Embedded Files
PlayLearn
PlayLearn
Online Learning Browser Extention & Desktop Version App
Overview
Playlearn It is a tool that supports parents and professionals for the management of children with disabilities and difficulty in apprehension. Playlearn is responsible for looking for the ideal plan according to the needs of its children with the best pleasant visual and auditory material to be a pleasure to learn.
My Role: UX/UI Designer
Design Tool: Adobe XD
Project Duration: 5 weeks
The Problem
The Problem
Parents and professionals do not have the necessary tools to care for children with special needs in their academic development.
The Goal
The Goal
Design a App with alternatives to help children with intellectual disabilities to develop skills.
User Reasearch Summary
I conducted interviews and created empathy maps to understand the users I’m
designing for and their needs. A primary user group identified through research
was parents who do not know the proper techniques to handle their children and waste a lot of time searching the internet.
This group of users confirmed initial assumptions about parents and professionals handling special children, but the research also revealed that time was not the only limiting factor for users. Other user issues included boring kid-friendly material, variety in topics, and lack of action plan structure.
Persona: Monica
Persona: Monica
Problem statement:
Monica is a professional mother who needs to adjust her time to meet her obligations.
Persona: Tom
Persona: Tom
Problem statement:
Tom is a cook who wants to learn tools to help his son. He is sure that through games he can improve his son's cognitive skills.
User Jorney Map
User Jorney Map
Mapping Monica’s user journey revealed how helpful it would be for users to have access to a dedicated PlayLearn app.
Paper Wireframe
Paper Wireframe
I stared the design stage with an initial sketch of the home screen, I drew a screen based on my previus study of the phone app version, prioritizing a quick and easy data entry process to help user save time.
Digital Wireframe
Digital Wireframe
After ideating solutions for each task flow through sketching, I built further through creating digital wireframe on Adobe XD
Low Fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype on Adobe XD.
View the PlayLearn Desktop on Adobe XD:
xd.adobe.com/view/924e3bfb-170e-4d98-9075-142c9e73db65-c71d/?fullscreen
Usability Studies: Finding
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings
1.Participants wanted to register quickly
1
2.Participant managed to do it fast
2
3.Participant had doubts when completing characteristics of the child
Round 2 findings
1.The participants stated that it was easy to record
1
2.Participant was satisfied with the options
2
3.There are many questions
3
High Fidelity Design
High Fidelity Design
Home Screen:
The first screen appearing when the user opens the desktop app. User can log in or create an account through their email address and a password. However, the new user can click on the "Get Stared" button to start the process and evaluation.
Set of Questions for Evaluation:
The user will follow a questionnaire of questions where the appropriate plan for his/her child/student will be evaluated.
Choose a Plan:
Choose a Plan:
After passing the evaluation and the user has an appropriate plan, the user must select the type of plan that best suits them. There will also be a free option.
Task Summary Screen:
Task Summary Screen:
The user will have a section where they can view the pending tasks to be done each week.
Process Tracking Summary Screen
Process Tracking Summary Screen
Finally, the user will have access to a screen where they can check their progress using a metric. You will also be able to see the next activity that corresponds to you, some recommendations, and even a small advertisement alluding to the educational topic.
High Fidelity Prototype
High Fidelity Prototype
View the PlayLearn Desktop on Adobe XD:
xd.adobe.com/view/c523a986-7244-4a93-9bf8-c05d381672c2-9070/
Accesibility Considerations:
1
1
Provides access to users who are vision impaired through adding alt text to images for screen readers.
2
2
Used icons to help make navigation easier.
3
3
Used of variety of specific themes make the child's experience more enjoyable.
Takeaways
Impact
Impact
The app makes users feel that PlayLearn really thinks about how to help children learn and support parents and professionals.
One quote from peer feedback
"The app made me have a proper action plan for my son, that's really amazing. I would definitely use this app to help in my son's education."
What I learned?
What I learned?
While designing the PlayLearn app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
Next Steps...
1
1
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
2
2
Conduct more user research to determine any new areas of need.
Let's connect!
Let's connect!
Thank you for your time reviewing my work on the PlayLearn app! If you’d like to see more or get in touch, my contact information is provided below.
Email: jesuscolmenaresonline@gmail.com
Website: jesuscolmenares.com
Page updated
Google Sites
Report abuse