MY CLASS
My Class is a one-stop shop for high-school teachers in low-income school districts to gather all the resources they need to achieve a well-rounded learning experience for their students. They are able to gain access to downloadable lesson plans, free classroom supplies, sponsored online classes with our partners, an online forum to connect with other teachers and much more. Through the process of researching, designing a responsive website & branding, my team & I created a responsive website that would meet the goals of teachers & gaining access to a variety of different resources that they may not have access to due to limited budgets.
Project Overview
CHALLENGE
The limited access to resources in low-income districts poses a challenge to high-school teachers, affecting the quality of education provided to students. How might we create a user-friendly platform to empower teachers & enhance students overall educational experience?
GOAL
Develop a collaborative platform for high-school teachers can serve as an additional resource, enabling them to connect and better understand their students while equipping them with the necessary tools for the school year ahead.
SOLUTION
01.
Design a responsive website that meets the main goals of the user
02.
Create user-focused screens based on user's needs & behaviors
03.
Create a strong brand identity and visual language
CLIENT
Academic Project
TIME
6 weeks
ROLE
UI Designer, UX Researcher, Project Manager
TEAM
Jacqueline Quiroz - UX Researcher
Madison Marie - UX Researcher
TOOLS
Illustrator, Photoshop, Figma, Procreate
Design Process
Research
To create a better experience for users, we started by conducting primary & secondary research to better understand the needs & pain points of our target audience. This involved asking potential users about their needs and preferences through surveys and interviews, as well as analyzing data about the current education market. Our goal was to identify any issues users were experiencing, and to find ways to solve those challenges by making the platform easier to use and more enjoyable.
Personas
Using the insights we gained through secondary research, we created three personas to identity potential users for the platform. These personas helps establish the criteria for our interview participants & would be validated through user interviews.
Empathy Map
We created an empathy map & synthesized all of our information from user interviews to identify the main target user group for My Class. We sorted our research findings into categories including "Doing, Thinking, Feeling, & Saying" - this process allowed us to identify common patterns & key insights that helped understand the main needs of our users.
Adele's Journey Map
The UX journey map we developed for Adele, while navigating a competitor's website (FuelEd), provides a detailed and visual representation of her experience at every touchpoint. This map enables me to identify pain points and areas of improvement, allowing us to enhance Adele's experience and ultimately gain a competitive advantage.
Information Architecture
Site Map
To emphasize the prioritized solutions, we created a site map for My Class's website that establishes a clear & user-friendly structure for the content, enabling effortless navigation for our users.
Task Flow
To understand how users would interact with the My Class website, we began by pinpointing the primary tasks that Adele would undertake on the website based on her objectives. We then outlined two happy paths & the key pages and specific requirements in a UI requirements document to assist her in completing those tasks. Subsequently, we leveraged the tasks identified through Adele's goals to devise task flows that depict how she would interact with the website to accomplish those tasks.
User Flow
To deepen our understanding of Adele's perspective, we constructed user flows that enable us to visualize her complete journey while interacting with the website. This approach allowed us to delve into Adele's thought processes and evaluate the various decisions she would make when attempting to complete tasks in diverse scenarios.
Affinity Map
To gain a more comprehensive understanding of the observations from testing, we utilized an affinity map to consolidate our findings. This approach provided a more comprehensive view of the diverse user experiences and enabled us to establish correlations and uncover vital insights. These insights helped us to pinpoint the necessary improvements to our design and ensure that we assist our users in achieving their goals seamlessly.
Lo-Fi Wireframe Sketches
Incorporating the insights gained from our prior research, I started making decisions regarding how the arrangement of content would be displayed on My Class's website based on our overall project goals.
Mid-Fidelity Wireframes
To ensure that our design decisions in the lo-fi wireframes align with our project goals, we needed to test it with actual users. Using Figma, I transformed the lo-fi sketches into mid-fidelity wireframes with necessary details for usability testing. We created 2 user flows including the downloadable lesson plans flow & classroom materials flow with 'Log-In & Sign Up' screens. This enabled us to focus on improving functionality based on user feedback.
Classroom Materials User Flow
Lesson Plans User Flow
UI Style Guide
We then worked on compiling all of our findings together and defining the specific direction we wanted to take for My Class's branding. Each decision we made for the branding elements were based off of effectively communicating their strongest brand attributes.
UI Kit
We then worked on compiling all of our findings together and defining the specific direction we wanted to take for My Class's branding. Each decision we made for the branding elements were based off of effectively communicating their strongest brand attributes.
High Fidelity Wireframes
After incorporating visual elements that are in line with My Class branding, I worked on the UI design of the website & created high fidelity wireframes for each user flow.
Next Steps
In an effort to enhance the website's design & functionality, I started off by testing our mid-fidelity designs to prioritize the structure & hierarchy of the content before finalizing the visual elements. This approach allowed for a deeper focus on the foundational aspects of the design, setting the stage for a more robust and user-friendly end product. This method yielded successful results & we were able to quickly identify any initial obstacles that impeded users from achieving their goals, while also ensuring the effectiveness and functionality of the overall content layout. My next steps to push this project even further would be:
01. RE-TEST
After revising and incorporating visual elements into my design, I plan to conduct thorough testing and validation to assess the effectiveness of the changes and identify any additional areas that require prioritized improvements.
02. DESIGN HANDOFF
Once the design is fully finalized, I will then present the completed version to stakeholders and hand it off to developers to build the website.
03. PRODUCT LAUNCH
Upon completion of the product, we would be able to unveil the new branding and successfully launch the website.
04. FUTURE IMPLEMENTATIONS
Due to project timeline constraints, my focus was limited to prioritized features to meet project goals. However, I believe there is potential to further enhance the user experience by incorporating additional features from the product roadmap to add value and delight.