Introducing deschool

Deschool is an online learning community for skill-based lessons and also it revolutionize STEM learning through innovative in-school STEM workshops and courses.

Screen Shot 2023-07-19 at 8.29.00 PM.png

Screen Shot 2023-07-19 at 10.15.03 PM.png

ROLE:

UX/UI Designer

YEAR:

2023

TOOLS:

Figma, Canva, Miro, Keynote, Marvel, Google Drawings

Duration :

3 Months

Overview

The word 'Deschool' means to move away from the traditional educational methods that may not be effective at meeting the diverse needs and interests of learners, and moving towards a more learner-centered, inclusive, flexible, and community-driven approach to learning.

Deliverable

Create High-Fidelity Mockups and a Visual Style Guide for the deschool.ca website.

‍

Design Process

Understand the project requirements, business goals, and target audience.
Conduct user research, interviews, and surveys to gain insights into user needs, pain points, and behaviors.
Analyze competitors and industry trends to identify opportunities and challenges.
Create user personas and scenarios to represent the target audience and their goals.
Define the project's scope and objectives.
Establish the project's timeline and resources.
Develop low-fidelity wireframes that outline the layout and basic functionality of the product.
Focus on user interactions and the overall user experience without getting into visual design details.
Iterate on the wireframes based on internal reviews and feedback.
Develop the visual design elements, including colors, typography, icons, and imagery.
Create high-fidelity mockups that incorporate the visual design and branding.
Ensure consistency and alignment with the established brand guidelines.
Work closely with developers to ensure the designs are implemented accurately.
Provide detailed design specifications, assets, and documentation for development.
Collaborate with the development team during the implementation process.

‍

Challenges

Understanding the diverse needs and expectations of teachers and staff members can be complex, as their roles and responsibilities may vary significantly.

Since the platform will likely handle sensitive student information and administrative data, ensuring robust data privacy and security measures is crucial.

Designing a user-friendly interface that accommodates both tech-savvy and tech-challenged users while ensuring a smooth user experience is essential.

Goals

Foster a supportive online community where teachers can seek advice, share experiences, and offer encouragement to one another.

Provide tools and features that assist teachers in managing their classrooms, tracking student progress, and communicating with parents.

Design a user-friendly and intuitive interface that allows teachers to easily navigate the website and access the desired information and features.

Ensure that the website is accessible to all teachers, including those with disabilities, by adhering to accessibility standards.

User Research

I came up with a list of points while interviewing with the teachers, school staff members of deschool. This was done to better understand their needs and experiences.

Users want STEM educational programs that offer hands-on and interactive learning experiences.
Users desire STEM programs that showcase the real-world applications of scientific principles and how they contribute to solving practical problems and challenges.
Users prefer a clean and intuitive interface that is easy to navigate, enabling them to find information and perform tasks quickly.
Users are attracted to visually appealing websites with well-designed layouts, graphics, and images.

Target Audience

Adults age group 25-60 years who will be involved in the deschool platform.

USER PERSONA

Screen Shot 2023-07-20 at 11.52.58 PM.png

Screen Shot 2023-07-20 at 11.53.13 PM.png

Screen Shot 2023-07-20 at 11.53.06 PM.png

USER FLOWS

HOME

Screen Shot 2023-07-21 at 12.03.19 AM.png

Low Fidelity Sketches

2A463C55-9008-47A6-93CE-47328265C162 (1).jpeg

Mid Fidelity Screens

Screen Shot 2023-07-24 at 11.07.33 PM.png

Screen Shot 2023-07-24 at 11.15.48 PM.png

Screen Shot 2023-07-24 at 11.07.43 PM.png

Screen Shot 2023-07-24 at 11.15.59 PM.png

Screen Shot 2023-07-24 at 11.08.25 PM.png

Screen Shot 2023-07-24 at 11.16.17 PM.png

Usability Test Methods

I plan to use moderate and remote non-moderate evaluation methods to conduct user tests for my deschool app prototype. The first choice concerns the initial phase of my prototype, where some specific functions have not yet been worked out. Engaging with participants, during user testing, will help me to develop the app's functions more specifically. To avoid certain problems, I will take the following steps: Programming 20-minute test sessions with a 10-minute agenda so that I can ask more questions, while ensuring the meeting does not last too long. I ask each participant some questions to get more feedback, so that I do not lead the participants' answers. Here are two examples questions: ”What additional features would you like to add and why?" "What would you like to add/delete and why?" In the meantime, I will have finalised a more complex prototype. With the remote non-moderated method, users could help me refine the design features with their feedback. Non-monitored methods could also help me collect a lot more data, efficiently and in less time. Both methods, remotely monitored and unmonitored, could help me understand how users interact with my app. I think in-person user tests are really very motivating because I can see people's live reactions and to be able to intervene on the spot with questions or explanations. But I will not prefer it for now, as my users are from different locations.

Usability Test Results

Participants. Age. Profession.

1. Ritu 36 Teacher

2. Alex 25 Graphic Designer

3. Mario 32 Researcher

4. Rebeka 40 Teacher

5. Andy 28 Professor

Positive Feedback :

Participants generally found the website's interface to be user-friendly and easy to navigate. The layout and design received positive feedback for being intuitive and organized.The website performed well on different devices, including desktops, tablets, and smartphones. Participants appreciated the seamless experience across various screen sizes.

Improvements :

Streamline the website's navigation to make it more intuitive and user-friendly. Ensure that users can easily find information and access various sections without confusion.

The feedback from the users will be used to further enhance the website, address user suggestions, and ensure continuous improvement to meet the evolving needs of users.

MOOD BOARD

Blue Green Colorful Geometric Branding Strategies Chart.png

Blue Green Colorful Geometric Branding Strategies Chart (1).png

Blue Green Colorful Geometric Branding Strategies Chart (2).png

STYLE GUIDE
LOGO & ICONS

Blue Green Colorful Geometric Branding Strategies Chart (3).png

Screen Shot 2023-07-23 at 11.19.33 PM.png

Screen Shot 2023-07-23 at 11.17.25 PM.png

TYPOGRAPHY

Typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader.

Heading 1, Bold, 40

Heading 2, Semi Bold, 32

Heading 3, Medium, 28

Heading 4, Bold, 24

Logo

Perfect Properties, 96, Bold

Body Text

Monsterrat, 20

Text Emphasis

Bold

COLOR PALETTE

HEX: EF8C77

HEX: FFFFFF

HEX: 610CEB

HEX: 000000

HEX: FCC3B7

HEX:221F20

IMAGERY

Imagery is essential in UX/UI design as it plays a crucial role in shaping the overall user experience and user interface design. It enhances the visual appeal of a website or application, making it more attractive and inviting to users to connect with users on a deeper level. They can convey messages, stories, and feelings that resonate with the target audience, creating a memorable user experience.