top of page

Sight & Life

UX revamp for Sight & Life - A non-governmental organization

Rectangle 13.png

Project Role: Associate UX Designer(Hands-on)

Client: Sight & Life

Engagement Type: Fixed term

About

Sight and Life is a non-profit organization dedicated to improving and enriching the lives of people globally by focusing on nutrition and health. The organization operates with the core belief that proper nutrition is a fundamental right that can significantly impact individual well-being, particularly in vulnerable and underserved communities.

Brief

Our Scope Of Work was to revamp Sight and life’s website by optimizing it in terms of accessibility and content discoverability thereby increasing engagement.


In order to improve the user experience on their website, we set out to redesign it with the following goals in mind:

  • Streamline and modernize the website design to make it more dynamic and engaging.

  • Accurately reflect Sight and Life's offerings and the scope of their work.

  • Improve navigation across the website to make it more user-friendly.

  • Keep the website design simple and delightful.

  • Introduce new features such as the ability to donate and apply for jobs, and highlight their importance.


Through our redesign efforts, we aimed to create a website that accurately represents Sight and Life's mission and work, while also providing a seamless and enjoyable experience for users.

Process

The project was set for a timeline of 4 months. A mobile-first approach was taken followed by a scale-up into desktop.

The whole design process was broken down into 3 phases:

Group 1171278262.png

Phase 1: Discover

To gather valuable insights from end-users, our team facilitated a remote workshop with stakeholders. The focus of these workshops was on understanding how to effectively convey the purpose of Sight and Life to users in a short amount of time while minimizing cognitive load.

Since an MVP of the website was already in the market, we began by collecting feedback from users who belonged to three different groups:

  • Partners who could collaborate with Sight and Life for shared causes.

  • Donors who were interested in contributing their resources and knowledge to the fight against malnutrition.

  • Academics who were looking to start their careers in the field of malnutrition.

Usually, the workshop goes for 2 - 3 days divided into 3 sections:

Section 1: Understanding business goals by interacting with the client, sending out stakeholder questionnaires, using tools like SWOT analysis, Business Model Canvas, Competitor Analysis etc.

The main goal is to Understand the problem and opportunities of the current website/product.

Group 48096700.png

Section 2: Persona Mapping is done next to understand user goals and align them with business goals. We interacted with the clients to identify the user groups of Sight and Life and their goals and needs.

Group 1171278288.png

Section 3: Customer journey mapping was done to identify users’ actions, touchpoints, thoughts, emotions/feelings, painpoints, and opportunities during different phases of their journey, ie, Awareness/research, decision making and service/support.

Screenshot 2023-08-23 104911.png

Phase 2: Define

We worked closely with the Sight & Life team to define their platform. Based on our research, we wanted to understand their vision, mission, strategy, and key messages.


To engage users, we focused on creating seamless navigation and easy access to Sight and Life's key content, while also communicating trust and credibility. As a marketing website, content plays a crucial role, so we prioritized its placement to improve the user experience.

 

We defined the problem, identified pain points, set goals and opportunities, and outlined user expectations. This informed our enhancements to the user flow, content discoverability, and credibility. 


 

We also advised to incorporated engaging content to improve user satisfaction, task efficiency, and cognitive load. As a result, we significantly reduced drop-off rates.

Information Architecture

We studied the current website and identified discrepancies in the existing information architecture (IA).

To improve the user experience, we created a refined IA that organizes information in a clear and easily accessible way. This allows users to focus on their task without getting lost or confused.

IA - Revised.png

Phase 3: Design

After finalizing the IA through iterations, we moved on to creating wireframes. We followed a mobile-first approach and scaled up the wireframes for responsive desktop screens.

The high-fidelity wireframes were then used as the basis for the visual design. Throughout the design process, we kept in mind the pain points and opportunities of each user and worked to address them.
 

  • To prevent drop-offs, we designed the landing page to convey key information within the first 15-30 seconds.

  • We also focused on creating seamless navigation and easy content discoverability, while communicating trust and credibility.

  • This ensured that users could easily find the information they needed and trust in the organization's work.

Wireframes for Mobile and Web

Group 1171278287.png
bottom of page