top of page

As of 2015, Pakistan's literacy rate stood at 58%. Sehr Garage School Foundation actively combats this statistic by providing free elementary school education to low socio-economic children in Karachi, Pakistan. The first website I ever built was to aid Sehr Garage as they searched for financial sponsors.

Sehr Garage

2015

Role

Front-end developer

Skills

Front-End Development,

User Experience Research, Content Creation

Coding Languages

HTML5, CSS, JavaScript, jQuery

Team

Margaret Flemings

The Prompt

I took my first coding course in my first year of college, where I learned how to code HTML5, CSS, JavaScript, and jQuery. Over the course of the semester, we were instructed to partner with an individual or business and create a website for them. My partner, Margaret, and I chose to partner with Sehr Garage, an elementary school (run out of a woman's garage) for low socio-economic children in Karachi, Pakistan. She had been running the school for decades and had recently formed a new initiative for the school's brightest children. The Sehr Garage Foundation was created to find financial sponsors for the school's smartest children to continue their education. However, 90% of her financial sponsors lived in America and they strongly desired a user-friendly digital platform personally catered to them and their decision to fund.

Our Task

The website needed to provide a personal-feeling means for current and prospective sponsors to:

  1. Learn about the organization's mission, history, and team

  2. Form a personalized understanding of the students and how to contact them

  3. Be persuaded on how and why they should fund a child

My Approach

In order for sponsors to form a personal relationship with the organization and feel motivated to donate, I generated:

  1. Written content about the organization's history, mission, team, students' bios; video content about the founder; and photographs of the school and students

  2. An interactive and clear page overviewing the sponsoring process and financial commitment

  3. An easily understandable way for sponsors to understand which children were already sponsored and whom they could still fund

  4. A means for sponsors to directly contact the Sehr Garage team

 

Documents (Username: guest, Password: sesam9e): 

DEFINING THE GOALS

The following content is taken from my original mockups, documents, prototypes, etc. from 2015.

The Client's Goals

The client's main goal is to provide a means for current and prospective sponsors to learn about the organization and the students. More specifically, sponsors want to interact directly with the children (ie. messaging system, etc.) and observe the child's academic progress. In order to emphasize the fact that Sehr Garage is a small and transparent program, the client wants to create an intimate tone. Additionally, the client wants the website to have biographies on the students. This website will show current students and also prospective students who are yet to be sponsored so that interested sponsors can find students to fund. The last main purpose of this website is to discuss funding and what materials, goals, and fees are necessary.

The Intended Audience

A typical user has the following traits:

  • Is a current or prospective sponsor

  • Age range: 30s-40s

  • Marital status: married and settled down, adults with families and children

  • Socioeconomic status: middle-upper class

  • Ethnic: generally either immigrants from Pakistan or have some emotional tie to the country

  • Location: Silicon Valley/Bay Area, California

  • Educated: literate, well educated, college graduates

  • Background: most are in tech industry of Bay Area, in name brand companies with nice job positions

  • Challenges: the sponsors will want easy to use and clean interfaces that are of a certain calibar

Original Planned Content

1. Pictures and Videos 

We plan to place interesting pictures of the children and videos on the homepage to keep the user engaged and provide an inside view of their lives (ex. pictures of them at Sehr Garage, studying, etc.). Students will have pictures of their accomplishments (for example, a lot of these children are artists and have received awards for their art). In addition, there are video interviews with the children, which I personally conducted. The client wants a focus on a few particularly interesting and excelling students.

 

2. General information

 

There will be information about the basic idea of the organization, its values, and its goals--this will build a foundation for how the user will interact with the rest of the website:

  • Information on Sehar Garage, the school, itself and its history (how and why the school started, what it does, what kind of students attend it). It'll give some background on the academic rigor of the school and its classes, etc. to give sponsors an idea of the school and the students it produces

  • Background on the program itself (how it started, what it does, why education is important, the organization's values and mission, and why it's a program worth investing into)

  • An overview of the foundress of Sehr Garage and a few other key people in the organization (the main teacher and the US team)

  • Access to "Testimonials", which will provide testimonials from current sponsors, as well as further detailed comments from the students themselves

 

3. Funding 
One of the most important pieces of content will be the funding. An overview of fees will be provided, what it goes towards, and financial goals (what has been achieved, what has yet to be, and positive consequences of goals being met). This should be as clear and direct as possible so that users don't feel overwhelmed, easily understand the process, and trust the organization.

 

4.  Students

The sponsors will be provided with further details about the students so they can learn about the child they have already donated for or the child they are planning on investing in. Emotional connections should be encouraged through the website. There will be:

  • Biographies of current students who are already sponsored for the upcoming year. Their bios will tell about their personal and academic lives, as well as a testimonial of how their lives have changed through this program and what they've been doing with their education. This will be oriented towards current sponsors who want to know about their child and feel that their financial investments are making a difference. It is also for prospective sponsors who want to know what the end results of their potential investment could be like.

  • Biographies of students in the latest graduating class who have yet to be sponsored for their upcoming school year. The biography will tell the user about their personal life (their background, hobbies, etc.) and their academic life (accomplishments, future goals, why they want to continue their education). This information will be oriented towards prospective sponsors and will need to be in-depth for people who may not know too much about the organization. It can also be for current sponsors who may be interested in funding another child.

 

6. Contact with the Organization 
There will be a direct contact page where sponsors can email Natasha or other main figures in the organization with their questions or decisions to sponsor a child. Links to the organization's social media will also be present.

 

7. Account 
We may include a login element for sponsors. It would be a secured account place for current/interested sponsors and students to sign in so they can have direct contact with each other. This is also the place where sponsors can sign in and check in on their student's academic progress (report cards, etc.).

 

 

Navigation Structure

The navigation structure for Sehar Garage's website can be described as "clique", as seen in Figure 1. We will have a splash page, but that will go into a main homepage with a navbar where you can access all the main pages. From each page you will still have access to the navbar and can easily access the homepage or other main pages. In the navbar, we will have a couple pages that will have a drop-down option so that all our pages can be on the navbar but will not crowd the horizontal bar. This will keep the slightly less important pages organized under a parent page, where they can be just as easily found (they will only be visible by hovering over the parent page tab on the navbar).

 

We chose this type of navigation structure because we want the users to easily understand interface. With this structure, users can access every page from where they currently are on the website. They will also be able to immediately see what their various page options are rather than find page options through exploration. This easy accessibility places the emphasis on the content and so sponsors can concentrate on the main ideas (ie. "funding", "about", etc.) and get to know information more easily. 

The Navigation Structure

navStructure.png

Page Layout and Appearance

The universal design of this website will be simple and elegant. Many new users may not be familiar with the organization, so the website will be very clear to navigate. The universal design should fulfill the ideas of compassion that is ingrained in this company.

​

  • "Font:"AR Julian" for the titles (40pt) and headers (20pt), and "Baskerville Old Face" for the body (12pt)"

  • Color scheme:

    • Text: Black, except in dark areas, then white

    • Background: White or "aliceblue"

    • Shadows: Black shadows when pictures hovered over

  • Links: All will be clickable, and onClick they turn blue

  • Banner: Over the top of the webpage, a small logo will appear in the left corner. Navbar runs across the top. A button connects the website to the Facebook page.

  • Navbar: When the mouse hovers over the tabs on the nav bar, drop down options will appear.

  • Logo: Will be included later, but is currently represented by a circle.

General Appearance Mockup

universal.png

Content Mockups

We will code a total of 11 pages:

​

1. Splash Page-splash.html

This will be the first page the user sees when entering the site. This page will not contain any major content, just a handpicked inspiring image of the students with the organization's vision statement written across it. At the bottom center of the screen, there will be a button/link with the words "Enter". The visitor will be able to click on this to continue on to the site's homepage.

Splash Page Mockup

Splashpage.png

2.  Main Homepage

This is the main page of the website. This page needs to catch the viewer's eye, be clean, and easy to understand. We are conveying this through easy rollover options that shows information in a way that is dynamic and aesthetically pleasing. It will have a welcome video (gives an overview of the website and organization), pictures in the photo section (a way to show the students from the get go), and a javascript application under the "funding" section that interactively shows how much money has been raised and how much is needed.

 

Homepage Mockup

Untitled2.png

Homepage Mockup - JavaScript

fundinghomepage.png

3. About Page-about.html

This page will provide sponsors with a basic idea of the program, its values, and goals. This will build the foundation of how the viewer understands the rest of the website, so it has to be easy to understand and have interesting pictures.

 

About Page Mockup

About.png

3. Sehr Garage History-aboutSehr.html

This page will build off of the main about page. It will be listed under the rollover options for about and will discuss the history of the school itself. Its design will be similar to the about page's design.

 

4. Key People-aboutKeyPeople.html

This page will also build off of the main about page. It will be listed under the rollover options for about as well and will discuss the key people in the organization. It will be an about page for the foundress, main teacher, US coordinators, etc. Its design will be similar to the about page's design.

 

5. Funding-funding.html

This page is the most important page as it will provide an overview of feeds, what it goes towards, and financial goals. It also provides the step by step instructions on how to become a sponsor. Therefore, we plan to use JS to make a 1,2,3 step interactive piece where sponsors can navigate through the dynamic thing to get easy to understand step by step instructions that provide that financial background as well.

 

Funding Page Mockup

sponsorshipSteps.png

7. Funding Testimonials-fundingTestimonials.html

This page will provide testimonials from current sponsors, students, and teachers. We are currently unsure if they would like their pictures on the site so the current plan is to make the page look like a page of general quotes.

 

Testimonials Page Mockup

testimonials.png

8. Prospective Students-studentsProspective.html

This page will provide bios of the all the students who would like to be sponsored next year but do not currently have sponsors. This is directed towards interested sponsors who want to get to know the students and choose a student they would potentially want to sponsor in the upcoming year. The layout will be similar to the about page.

 

9. Current Students-studentsCurrent.html

This page will provide bios of the all the students who have already been sponsored for the past year(s) and what their experiences have been like. This is directed to their sponsors who want to learn more about them or to interested sponsors to see the difference funding can make. The layout will be similar to the about page.

 

10. Media Gallery-media.html

This page will be for sponsors to get to know the students. It will be full of pictures of the kids, the school, and interviews of them. This will be similar to the photo gallery shown in the homepage. There will be JS involved to make the pictures and videos pop out when they are hovered over.

 

11. Contact US-contact.html

This is a page for users to have direct contact with the people of Sehar Garage. They can send comments or questions, as well as commit to becoming sponsors!

Contact Page Mockup

contact.png

JavaScript and jQuery

  1. The first page the user will arrive on will be a splash page where the users will have to click "enter" to arrive on the homepage. We have to use the visual effects of JavaScript because once the user presses enter, the splash page will fade out and transition into the homepage.

  2. Our navigation bar will only feature the most necessary pages that are important "main concepts". Therefore, there are going to be some pages in the navbar that will need a drop down option to hover/roll over, where users can find and have easy access to the other important, but less central, pages. This counts as a visual effect that can be created by JavaScript.

  3. We plan to have a "media" section where images and videos of the children will be featured. The pictures will be able to "pop out" to display a larger version of the picture they hovered over. We will be using JavaScript to make this happen through arrays and the Javascript needed to create the effects of hovering over the images. 

  4. For our contact page, we plan to have a form embedded within the page so users can directly email Sehr Garage through the website. We will need to use JavaScript to make the form happen and for the information to get stored. We will also have an alert button at the end that would thank them with their name or provide more information, which we will need JavaScript for. 

  5. In our funding page, we will have a small quiz on the side that asks the users to choose a type of shopping (eg. grocery shopping, clothes shopping, electronics shopping, etc.) which will then show them the equivalent of different items to the price of funding a child to put the funding in perspective. It should be interactive and will use JavaScript when adding this dynamic touch to the form processes.

RESULTS

User Testing

We wanted our testers to be from our actual target market for the site. Therefore, 100% of the testers who responded are actually current sponsors of the organization who would be using the website and are people whom the website was created for. We got a total number of six responses.

 

The written test consisted of:

  • Questions about their platforms and browsers

  • A scenario where the user was searching for information on the organization and the kids who are looking for sponsoring. They were then asked (at each step) how easy or hard it was for them to find the information, the steps they took to get there, and how they think that process could be improved.

  • Questions about their opinions on the site layout and the usability of the site.

​

Study results:

  • 83% of the testers were able to complete this scenario task. When asked to rate how confusing or simple the task was on a scale of 1 to 5 (1 as very confusing and 5 as very simple), 33% put 5, 33% put 4, and 33% put 3.

​

Documents (Username: guest, Password: sesam9e):

​

User Study Responses

sitelayout.png

Final Feedback

Margaret and I received an overall 95% on all of this work. Our professor commented, "It's an excellent website; you have a lot to be proud of! Shanzay's JS is good, and a little beyond what we expect." Users said "the website was well organized", "simple and easy to understand", and that "the media tab was a nice addition".

WHAT WOULD I DO DIFFERENTLY?

This website was the first website I had ever built. Therefore, as you can imagine, there are some things I would have done differently if I were to have created this website today.

  • Aesthetics: I would make the website more cohesive in terms of fonts, colors, and tone. I would also choose a more sophisticated but modern theme (e.g. make the logo simpler, remove the borders around the menu, use a sans serif font, give the media page more columns and Aesthetics: less images, etc.)

  • Functionality: adding a confirmation email to the user that their form was received (on the "contact us" page), making the entire hexagon clickable instead of just the number under "Steps of Sponsorship", make the videos more accessible

Check out my work by visiting the website and reading my code (Username: guest, Password: sesam9e).

  • Emailicon
  • LinkedIn - Black Circle
  • Twitter - Black Circle
bottom of page