Overview

Jackson Creek Middle School (JCMS) Science Website is a one-stop portal for the 7th and 8th grade Science class students to find their homework, labs, class agendas and test dates, e-book chapters, view syllabus and class policies, as well as access any class-related or other external resources and activities provided by the teacher. The website was made using 'Google Sites' and is curated and maintained by the teacher.

Quick peek links:

    Current website    Re-designed concept    Concept's video    Concept in action

Problem space and definition

What is the problem

Website contains wealth of valuable content but lacks a clear organization, is not simple to navigate, and has no easy way to discover the material. Consequently, the website is rarely used by students and parents . While it was created to help the students, it soon lost much of its value. The teacher is aware of the problem due to on-going feedback; however, she is not technically-savvy enough to remedy this situation alone and needs external help.

Why improvement is needed

  • Re-design the site to make it into an intuitive, functional and aesthetically pleasing product.
  • Make things easily discoverable and accessible.
  • Provide for an easy maintenance and curation of the content by the teacher.
  • The change should bring back and re-engage the students to add more value to their study of the subject.

How the problem was discovered and identified

At the very beginning of 2017 school year, I was helping my 7th-grader son find the necessary class homework on the website and found it has lots of valuable information but lacks organization and has a a confusing navigation. The teacher's intent seemed great but suffered in execution.

I saw this as a design challenge and as an opportunity to improve the existing product and felt empathetic to both the users' and teacher's needs and felt compelled to help to make a positive impact.

Once I approached the teacher, my proposal was met with an enthusiastic approval .

Users and Audience

I was not permitted to interview the students directly. Therefore, I found out about their needs, behavior and motivations “indirectly”, - based on the insights from the interviews with the teacher. I also had a direct reference to a live “persona” - my 7th grader son and his friends. Being a parent myself and having interacted with other parents in the course of my son's school life, I understand the needs and wants of a typical parent.

Teacher

Student

Parent


Figure 3. Personas   (Click on the images to enlarge)

Roles and Responsibilities


This side project was initiated and entirely done by myself, including but not limited to:

Idea generation, research / interviews, design, prototyping and any necessary Java Script programming to support the prototype testing.

The goal for this and other side projects was to seek out design opportunities and do it all by myself to gain the necessary overall experience from having an idea all the way to the implementation and refinement.

Scope and Constraints


Constraints / Challenges

  • Direct access to participants for primary research
  • Due to Monroe County Schools regulations, I was not permitted to interview parents or students directly. I was only allowed to conduct anonymous electronic student survey which I did using "Google Forms". Workaround: Using the next best source, I asked the teacher to share the student’s view-points based on her observing them and from their on-going feedback regarding the current website.

  • Teacher's busy schedule
  • She was able to meet once per month for an hour. That delay increased the length of the project. Workaround:  I communicated by sending the Power Point slides and interactive .PDF files generated from Balsamiq wireframes. When necessary, I created short walk-through videos. She would respond with a feedback. Those methods proved to be highly successful.

  • Direct access to participants for user testing
  • Due to the same regulations, I was not permitted to interact with students for any usability testing. Workaround:  the teacher enthusiastically volunteered to administer a quick usability test by herself and video-record the students while using the prototype.

Process

Website Audit

At first, the site audit was conducted to fully understand how it affects a novice user. Beyond my own’s original assessment, I used five other people for the initial usability sessions.

View the website here

Homepage example illustrating just a few of the problems


Figure 1. Site audit illlustrating problems

Navigation and organization of content for homework materials

Figure 2. Site audit illlustrating problems

A journey a student takes to check all the places for the homework materials

Figure 3. A typical user journey to see all homework pieces

Current website's sitemap totalling 15 pages!

Figure 4. Site map

Results of the audit

Good

  • “Student needs-based” approach is behind the content's organization
  • Focusing on giving the user the choices up-front
  • Lots of valuable content

Needs improvement

  • Clashing and meaningless colors scheme, improper contrast and poor readability, poorly chosen font sizes
  • The home page is overwhelming and is very crowded.
  • Much initial reading is required of the user just to navigate
  • Difficult to discern the hierarchy of information
  • Redundant page organization
  • Unrelated content is bundled together

Primary Research / Interviews

After I shared the audit results, the teacher was very appreciative of my audit assessment and was relieved to know there is a design plan to address those issues. She has been aware of the problems through an ongoing student’s feedback but hasn’t been able to remedy the situation due to the technical limits of “Google Sites” as well as her lack of experience in site-building.

After the initial interview, we would meet 5 more times the course of next 5 months.

The client's words guided me to both understand, empathize and then work on the concept

The client's sketches

During our interviews, I encouraged the teacher to sketch her thoughts out on a paper. The sketches she produced during our discussions greatly helped me by seeing and understanding her "mental model" of the content’s organization.

Her thoughts on the organization

Her model of a class unit's structure

Students' Survey

Figure 5. Student survey

The survey results were really telling. They confirmed my initial evaluations and conclusions and validated the insights that came from the interviews.

Figure 6. Student survey results
Figure 7. Student survey results

Once she saw the results, it helped her to further validate her original assumptions. It also provided more concrete evidence supporting the credibility of my initial assessment.

Research Insights

The research yielded important insights. However, it is very important to let our personas' "voices" be heard and understood to meet their needs.

Student

  • Don’t make me think hard to find the information that I need
  • I don’t like reading much to get to places I want. I need to be given easy choices
  • I am good with excuses! If I don’t quickly find the info I need on that site, I conclude it does not exist
  • If there is any urgent announcement, I want to see it right away

Parent

  • I have a busy schedule. I don’t want to spend much time muddling through the website while helping my child
  • I may or may not be technically-savvy to figure things out if it is not very clearly available
  • I need to quickly be aware of and verify things like test dates, homework due dates and other urgent announcements

Teacher

  • I want to retain one primary go-to place for the class-related material regardless of which content provider our school adopts next
  • Students of different ability levels must be equally comfortable using the site
  • I want fewer but clear choices that should then lead to deeper and related information
  • Encourage to discover content, make students feel empowered while using the site
Creative Commons. https://flic.kr/p/dkzEMD,   https://flic.kr/p/mRBZwx,  https://flic.kr/p/dPJhcf

Big questions...

As insights started to paint a "big picture", important question remained - how do I find a right balance in the concept?


  • Different students have different needs and goals. How does one person find vocabulary section as easy as another one finds homework labs?
  • Overall standardization and simplification is good. Yet, how do we integrate the established specific "teaching model" of how this teacher assigns and manages homework and materials?

Thus, trade-offs had to be made… But which ones?


My design's challenges

Finding a sweet spot to arrive at the optimal experience for all

Click the image to enlarge

Product Goals

Insights' analysis led to establishing the following objectives to create an improved product:

  • Simplify the site’s navigation and organization by using similar elements
  • Make the site responsive to different resolutions
  • Greatly minimize the cognitive load of the home page
  • Give the user the right number of right choices at the right time
  • Make user feel in control
  • The content should be easily discoverable

Brainstorming and Sketching

These are a few examples outlining my initial thinking and the vision

Home / Grade pages

Examining relationships

"Big picture" thoughts

Low-fidelilty Wireframes

I used Balsamiq to create deliverables for the meetings and also for electronic communications with the client. See excerpts from the final wireframe journey and came as a result of continuous iterations based on the client's feedback.

Each grade has its own page containing appropriate sections

Left: General and grade-specific announcements.  Right: Each topic (unit) now hosts relevant materials.

High-fidelilty Prototypes

Get to places quickly. Find what you need.


No more jumping pages. All is in one place.

Client's praise of the output

That was when I knew I am making a difference and not just redesigning a website.

Concept in action

Video

See a quick video presentation of how the concept works


Figure 3. Concept's video

Interactive Prototype

Click on the picture to to go Sketch Cloud to interact with a prototype:

User Testing

As of end of May 2018, the usability testing of the prototype is currently in progress. Results will be published shortly!.

Outcomes and Lessons

Navigation, Organization, Simplification, Usability

  • Organization of the content was greatly improved. Hierarchy of the content has been established
  • Discovery of new content by a novice user became easier
  • The concept retained the main character and specific "teaching model" present in the original site: goal-oriented and need-oriented narrative.
  • Implementation is planned to be a responsive website
  • Navigational footprint was reduced dramatically. Out of 15 pages we have 7!

Reducing complexity and redundancy. Two clicks to get to all of the homework materials!

Current Site-Map

New Site-Map

Proposed implementation schedule

Upon a successful usability test of the prototype, the next steps are:

Strategy and vision

Granted a successful implementation and a positive feedback, the concept is envisioned to expand and emerge as a viable and sustainable system which could be adopted for each of the teacher.

What I have learned

  • The quality of survey’s answers is only as good as the quality of the questions posed.

  • Learn users' professional vocabulary. Don’t just listen to what and how they say but also decipher what they mean.

  • It is crucial to capture a clear picture during the initial interviews. Missing important details upfront prolongs the process and affects the final result

  • Users may not always see the existing product's faults since they have used it for a time. The job of the designer is to point out the faults and help them see the benefits of the change.

  • In survey results, statistical majority doesn’t always give you the best answers. Use your judgement to seek out the patterns to establish design priorities.