Harsukh website design

Harsukh Website Design

image
image

Project Brief

As a non-profit organization, Harsukh creates a supportive and encouraging learning environment. With only a Facebook page as the main medium to inform visitors, this alone did not provide a clear picture of what Harsukh was and what they offered. Thus, the project aimed to create a responsive website design as the ideal platform for individuals to easily access information about the organization.

Duration

February - April 2020

Tools

Google Docs, Adobe Illustrator, Adobe XD & Zoom

Roles

Web Design, Brand Identity, Content Strategy, Visual Design, Presenter

Client Objectives

icon

What is Harsukh? A clear representation of what Harsukh is and the values that Harsukh stands for. Who are the people involved - Teachers, Students, Volunteers, Founders, etc. ?

icon

How can people get involved? Visitors of the site being able to easily understand the potential ways they can volunteer with Harsukh. Showcase previous volunteers’ experiences to encourage users to visit or teach at Harsukh.

icon

How can people apply? Provide a platform where both international and domestic individuals can apply.

icon

Clear Contact A way for people to keep in touch about the upcoming programs and opportunities offered at Harsukh.

The Design Process

In collaboration with a partner, 5 main steps were followed to create the 2 XD Prototypes — Mobile and Web to showcase the responsive website design.

Step 2

🎨

Visual Direction Mood boards, Images, UI Elements

Step 3

📝

Content Strategy Organizing text & images, Content Rewriting

Step 5

👥

Client Presentation Zoom Meeting

💡 Step 1 | Structure & Ideations

With my partner, we reviewed the provided materials from the client together to discuss general plans. We then worked independently to create our own detailed rough content lists, information architecture diagrams, hand-drawn wireframes, and paper prototypes. Below are my materials I created before meeting my partner. Usually, I start with a rough copy to articulate my ideas before moving on to more polished versions.

Content List

The content list helped to determine all the information that was required for each page. For my good copy, the numbers correspond to items on my sketch wireframes.

image
View Rough Copy of Content List (Click to reveal more)
image

Information Architecture Diagram

The Information Architecture diagram helped to determine the hierarchy, navigation, and user flow of the site.

image
View Rough copy of Information Architecture Diagram (Click to reveal more)
image

Wireframe Sketches for Mobile & Web

The sketch wireframes helped to visualize content layout and plan for user functionality. I created sketches for both mobile and web layouts since the final site was to be a responsive web design.

Rough copy (1st draft) of Mobile sketch wireframes
Rough copy (1st draft) of Mobile sketch wireframes
View to see more sketches (Click to reveal more)
Good copy (2nd draft) of Mobile sketch wireframes
Good copy (2nd draft) of Mobile sketch wireframes
Rough and Good Copies of Web sketch wireframes
Rough and Good Copies of Web sketch wireframes

Paper Prototypes

The paper prototype was a great low-cost method for testing my sketch wireframes quickly before rendering them digitally. It helped to understand whether if my intended design made sense conceptually and where to fill in potential gaps that hindered a user's experience for both the web and mobile experience.

Snippet of Mobile and Web paper prototypes in action
Snippet of Mobile and Web paper prototypes in action

After we finished our versions, we had a thorough discussion to decide on a compiled design. This allowed us to analyze which design aspects were better to move forward with and how to combine similar concepts we drafted individually together.

🎨 Step 2 | Visual Direction

The client already had an existing logo but they did not have a brand identity. My partner and I created mood boards to direct the visual direction of the website after brainstorming key characteristics together. Afterward, I wrote up an explanation for the mood board based on client material. Our mood boards included possible fonts, the explanation of the mood board, colour schemes, possible UI elements (Ex. buttons) and a collage of images.

My mood board
My mood board
My partner's mood board
My partner's mood board

A mood board discussion took place to compare and decide which elements to proceed with for the final UI look. We decided to pursue the following:

  • Go with my colour scheme
  • Heading Font (Montserrat Semi Bold), Subheading (Montserrat Regular/Playfair Display) & Body Text (Muli)
  • Go with my button, icon & condensed menu bar Style
  • Go with my partner's search bar style
  • Button titles will be "Submit", "Learn More", "Read More" and "Get Involved"

📝 Step 3 | Content Strategy

With a basic framework in mind, the primary role I took on during this project was to rewrite and organize all the copy (text components) to ensure it would flow better in the website design and meet the client’s objectives. During this process, I drafted a simple checklist that listed the necessary components for each website page based on our content list to guide where to divide sections of the copy. On the other hand, my partner finalized the visual content such as choosing imagery and designing UI components.

Checklist

Home page

Header
Hero Image
About Harsukh Description
Learn More Button
3 Object Icons: Humanity, Unique & Grounded
Brief description about Volunteer Program
Get Involved Button
Footer

About Us page

Header
Founder Icons & Description
Members of Idara
Staff & Volunteers
Image of students
Students
Footer

Get Involved page

Header
Icons Farm/School
Description of roles
Image of Colunteering
About Volunteering
Testimonies Button
How to Apply
Application Requirements
Application Portal Button
Footer

Our Work page

Header
Image/s of School
Description of Education/School
Image/s of Farm
Description of Farm
Get Involved Button
Footer

Contact Us page

Header
Contact details
Contact form
Submit Button
Footer

Rewriting the Copy

The reason I took the time to rewrite all the written content was to ensure an ideal match between our design and the client’s preferences.

The new copy helped:

  1. Summarize similar ideas and allowed consistency between sections of website
  2. Establish a hierarchy so that the most important pieces of content were featured first (EX. experience Harsukh aimed to deliver, how to apply for the volunteer program, etc.)

Example 1

Excerpts from Client Material

💡

Main USER of this website: Potential local and internal volunteers

💡

Purpose of Harsukh: To bring all social classes on one common platform and to promote South Asian culture.

💡

Focus of Harsukh: Humanity. To maintain an environment of joy for all participants. To help education and engage children living way below poverty line.

Rewritten Copy

Welcome to Harsukh Harsukh is an encouraging, supportive and collaborative environment in which all social classes are brought to one common platform to learn. Harsukh breaks the constructs of what a typical school or farm is by providing forms of authentic learning that is empowered by the earnest staff, volunteers and students. The achievement of Harsukh is it's consistent engagement of all participants - regardless of their status and abilities to mold them into confident, joyful and successful individuals. As well, Harsukh positively promotes South Asian culture throughout their program.

Example 2

Excerpts from Client Material

💡

The Harsukh School The school started with 5 students towards the end of 2015. It now has 170 students from classes Montessori to class 8. It is affiliated with the Agha Khan University Education Board. The students come mostly from 5 neighboring villages. Residents of these villages do not have access to quality education. It is the endeavour of the Harsukh School to make good this shortcoming by providing quality education with a diverse curriculum and extracurricular activities.

Rewritten Copy

The School (For "Our Works" Page) Near the end of 2015, 5 students attended Harsukh. Now, the school has grown to 170 students from classes Montessori to class 8. Affiliated with the Agha Khan University Education Board, the students mainly come from 5 neighboring villages. Residents of these villages do not have access to quality education. It is the endeavour of the Harsukh School to address this shortcoming by providing quality education with a diverse curriculum and enjoyable extracurricular activities. Harsukh strongly advocates that all of us are one, maximizing respect for one another and equality for all participants.

Example 3

Excerpts from Client Material

💡

About our Students: Harsukh School educates local students as young as 4 years of age, all the way up to the age of 18. Most of them travel in from the nearby village and are from various backgrounds, but all of them share a friendly curiosity and the right to the best education we can give them. We believe that all of us are one, emphasizing respect for one another, and fair and equal treatment for all. I f this resonates with you, then we'd love to meet you. Check the criteria below, and if you wish to proceed, click on the Application Form.

Rewritten Copy

Students (For "About Us" Page) Harsukh School educates local students that range as young as 4 years of age to the age of 18. Most of the students attending are from the nearby villages and come from diverse backgrounds. The similarity that they share is their friendly curiosity to learn and the fact that they are all deserving of the best education.

🖥️ Step 4 | Adobe XD Prototypes

With the final selections for content (both visual and written) decided, my partner and I then worked together on the final mobile and web Adobe XD prototype. My main contributions for the Home and Contact Us pages while my partner focused on the Our Work and About Us pages. We worked collaboratively on the Get Involved page since it was content-heavy with subpages like the Application Portal and Testimonials.

image

Home Page

The Home page consisted of 2 important aspects:

  1. Introduction of Harsukh
  2. Introduction of the Volunteer Program

We designed this page according to this layout to ensure that any visitor of the site could immediately recognize the organization and learn more about the volunteer program.

About Page

A minor challenge was how to differentiate the introduction about Harsukh on the Home page and the About Us page content. To solve this issue, my partner and I decided the About Us page should focus on all the important members that make up Harsukh and is organized as so:

  1. Small introduction to who is involved in Harsukh
  2. Information about the founders
  3. Information about the Idara members
  4. Information about Staff & Volunteers
  5. Information about the Students
image

image

Our Works Page

For this page, it was important to highlight the programs that Harsukh runs as a non-profit organization. Additionally, we added the photo gallery here to present all the activities that take place so that it could further emphasize the supportive, vibrant and engaging atmosphere that Harsukh evokes. Thus, the Our Works page is split into 2 main sections:

  1. Explanation of Harsukh's programs
  2. Gallery of Harsukh's activities

Get Involved Page

This page guides the user in a set path to understand the program first and then successfully apply as a volunteer. The page is organized as so:

  1. Interested in Volunteering? — Introduction to how the Volunteer Program is organized
  2. How can I help? — This section goes into more depth in what ways users can help by understanding the range of topics or subjects they can teach at Harsukh.
  3. Testimonials — Users can access and be inspired by previous volunteer testimonies that highlight the authentic experiences at Harsukh.
  4. Apply to be a Volunteer — A small blurb about applying as a volunteer and where to go if the user has any questions
  5. Application Requirements — A list that details the information a user needs to have before applying.
  6. Application Portal — Where a user can apply to be a volunteer at Harsukh
image

image
image

Contact Opportunities

An opportunity to sign-up for e-mail newsletters was available on every page footer. The Contact Us page was created primarily for users to contact the organization.

Mobile Adobe XD Prototype

image
image

Take a look to browse through the mobile prototype.

Web Adobe XD Prototype

image
image

Take a look to browse through the web prototype.

👥 Step 5 | Client Presentation

After submitting both prototypes, our design was awarded the top 10 designs out of approximately 80 students in the program who participated. As a result, we were invited to a Zoom Call with Harsukh stakeholders to present our work. My partner and I created a brief script to articulate the highlights of our prototypes. For the Zoom Call, I took the role to present to the stakeholders on behalf of my team.

Script for the Zoom Design Presentations
Script for the Zoom Design Presentations

📌

It was noted during this presentation that one of the strengths of our design was the content organization and the rewritten content.

Conclusions

⭐ Learnings

  • How to effectively compile client resources together to ensure the improved flow of all the content on the website design
  • How to establish ideal communication within a team for efficient work progress (Start of the pandemic so had to work with communication constraints)
  • How to create a responsive web design that considers how content should be best viewed on web in comparison to mobile

🛠️ Improvements to be made

  • The 3 top adjectives that define's Harsukh's values (Humanity, Unique, and Grounded) visually within the Home page gives the impression that they are clickable. It would be better to choose a different way to represent these adjectives.
  • Unfortunately, access to volunteer testimonies is limited and should be re-organized for easier access by users.
  • The current design did not give enough space between content so more whitespace and consideration of margins should have been included.

Other case studies

image

A mobile app that resonates and engages Toronto youth, newcomers, and/or renters with city planning.

image

A redesign of the Ellucian Go mobile app to better suit the needs of Humber College students.

Caroline Lee © 2021 — Created with Notion and powered by Super