Harsukh Website Design
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.
February - April 2020
Google Docs, Adobe Illustrator, Adobe XD & Zoom
Web Design, Brand Identity, Content Strategy, Visual Design, Presenter
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. ?
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.
How can people apply? Provide a platform where both international and domestic individuals can apply.
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.
Visual Direction Mood boards, Images, UI Elements
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.
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.
View Rough Copy of Content List (Click to reveal more)
Information Architecture Diagram
The Information Architecture diagram helped to determine the hierarchy, navigation, and user flow of the site.
View Rough copy of Information Architecture Diagram (Click to reveal more)
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.
View to see more sketches (Click to reveal more)
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.
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.
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.
About Us page
Get Involved page
Our Work page
Contact Us page
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:
- Summarize similar ideas and allowed consistency between sections of website
- 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.)
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.
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.
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.
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.
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.
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.
The Home page consisted of 2 important aspects:
- Introduction of Harsukh
- 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.
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:
- Small introduction to who is involved in Harsukh
- Information about the founders
- Information about the Idara members
- Information about Staff & Volunteers
- Information about the Students
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:
- Explanation of Harsukh's programs
- 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:
- Interested in Volunteering? — Introduction to how the Volunteer Program is organized
- 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.
- Testimonials — Users can access and be inspired by previous volunteer testimonies that highlight the authentic experiences at Harsukh.
- Apply to be a Volunteer — A small blurb about applying as a volunteer and where to go if the user has any questions
- Application Requirements — A list that details the information a user needs to have before applying.
- Application Portal — Where a user can apply to be a volunteer at Harsukh
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
Take a look to browse through the mobile prototype.
Web Adobe XD Prototype
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.
It was noted during this presentation that one of the strengths of our design was the content organization and the rewritten content.
- 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
A mobile app that resonates and engages Toronto youth, newcomers, and/or renters with city planning.
A redesign of the Ellucian Go mobile app to better suit the needs of Humber College students.