Online Course Responsive Website
Jessica Moro
The product:
Always Learning is a resource for learners, of all ages, looking to learn new skills or brush up on knowledge already learned. This website will be used by those looking to learn more about the courses offered and a gateway to access courses already registered for.
Project overview
Project duration:
August-September 2022
The problem:
Learners want to be able to access their course materials and move through the content in an efficient way. They want the content to be available everywhere they are so they can study when it is convenient.
Project overview
The goal:
Design a responsive website for Always Learning that will allow users (and potential users) to access the content on an device. Allowing them to learn anywhere.
My role:
UX designer designing a responsive design site for Always Learning online courses.
Project overview
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding
the user
User research: summary
I have conducted multiple rounds of user research, to find out user pain points and test out wireframes and prototypes to ensure our designs meet the customers needs.
So far, our research has shown that there should be a streamlined flow leading students between the content and assessment material and the ability to have easy access to all materials.
User research: pain points
Access Anywhere
Would like to be able to access course materials on all devices wherever I am.
Clear Navigation
Streamlined Process
It should be easy to navigate through the learning process; reviewing course materials, studying, and taking assessments.
Register
If I am looking to sign up for a course, I want to easily know which courses will interest me.
1
2
3
4
If I am taking more than one course, I want to be able to easily tell which announcements are for each course. I also want to easily access materials once in the courses.
Persona: Alyson
Problem statement:
Alyson is a student
who needs the content available in a streamlined process
because she does not have a lot of time to study.
Alyson
Age: 25
Education: Bachelor’s Degree
Hometown: NYC, NY
Family: Single
Occupation: Data Analyst
“I feel like I never understood the importance of learning until I graduated and started working. Now, I want to take any opportunity I can to learn different skills that will help me further my career choices.”
Goals
Frustrations
While taking a course to learn a prototyping program on another platform, the learning materials included a mixture of a lot of information I already knew (by simply looking at the help guide) and was also repetitive. I was looking for something that would provide me with examples, a project to work through, or at least opportunities to assess my learning. I quit about halfway through.
User journey map
By working through the journey map to see how students currently study for classes, I was able to see how I could improve upon this with a site that is accessible on all devices.
Starting
the design
Sitemap
Digital wireframes
For creation of wireframes, the I made sure to include different ways to access their assignments and course materials.
Students can access assignments through the assignments link, Topic learning button, and the learning path
Within all parts of a topic, students will know where they are in the learning path.
Digital wireframe: Screen size variation(s)
When creating the main screen for multiple devices, I wanted to make sure that users would be able to easily access their accounts, since many of the people coming to this page will want immediate access to their courses.
Low-fidelity prototype
Usability study: parameters
Study type:
Moderated usability study
Location:
United States, remote
Participants:
5 participants
Length:
20-25 minutes
Usability study: findings
Insert a one to two sentence introduction to the findings shared below.
Would like images and key words available that make it easy to know what the courses will cover.
Course Recognition
Clear Navigation
Streamlined Process
When taking multiple courses, it should be clear which notifications are tied to each.
Students should be told that the content has been saved once the button has been pressed.
1
2
3
Refining
the design
Mockups
After reviewing the user feedback, users would like a way to easily sign up for the site with username and password information they already know.
Before usability study
After usability study
Mockups
When saving an assignment prior to submitting it (either to come back to later or while answering each question) want confirmation that it has been saved.
Before usability study
After usability study
Mockups: Original screen size
Mockups: Screen size variations
High-fidelity�prototype
Screenshot of prototype with connections or prototype GIF
The final high-fidelity prototype offers a streamlined flow for students who want to access their course and submit an assignment.
View Always Learning
Accessibility considerations
Add alt text to images for screen readers.
Add labels and traversal order.
Ensured that color contract meets WCAG AA guidelines.
1
2
3
Going forward
Takeaways
Impact:
The site provides users with a more streamlined and easier to use experience when completing online courses.
What I learned:
While designing the Always Learning site, I learned the importance of creating mock ups in various screen sizes to make sure the information is accessible to all users on all devices.
Next steps
Build out remaining screens for tablet flow.
Conduct another round of user testing with the updates made.
Look into additional P1 and P2 requests.
1
2
3
Let’s connect!
Thank you so much for your time. If you have any additional questions or would like to see more, please contact me at:
Jessica Moro, jln2483@gmail.com