South Sudan Youthrive: Responsive Website

Product Design

Visual Design

Academic Projects

About Me

Responsive Website

South Sudan YouThrive (SSYT) • 2025 • 4 minute read

South Sudan YouThrive (SSYT) • 2025

• 4 minute read

South Sudan YouThrive (SSYT) • 2025 • 4 minute read

A scalable, user-friendly website to improve accessibility, streamline navigation, and enhance community engagement for a local nonprofit.

Freelance

0 to 1 Production

Web Development

Role

Product Designer,

Web Developer

Duration

14 weeks

Tools

Figma, Webflow, Chatgpt, Procreate, Google Office

Anticipated Impact

+30-50% increase in youth engagement through programming

30+ more community members and volunteers trained in mental health first aid

Problem

A local non-profit, faced limitations in outreach due to not having a website.

SSYT relied on manual outreach without a central digital hub, making it hard for supporters to stay updated, engaged, or donate.

Solution

Built an easy-to-navigate site with flexible templates that gives SSYT a central home to engage supporters, share resources, highlight impact, and collect both direct and merch-based donations.

Research & Discovery

Goals: Highlight community values, drive engagement, enable self-sustainability
Research: Conversations with SSYT team, audits of similar youth orgs
Key Insights:
Need for clarity & simplicity
Audience prefers mobile-first access
Importance of representing cultural identity in visuals

SSYT Youth Participant

SSYT Leadership

Interview Insights

home

resources

Programs

about

donate

contact

store

events

Get involved

youth

Mission

Team

Impact

Mental Health

First aid

Community

Information Architecture

home

resources

Programs

about

donate

contact

store

events

Get involved

youth

Mission

Team

Impact

Mental Health

First aid

Community

Information Architecture

Design Process

Design Process #1: Landing Page

I found that a more minimal design aligned better with the existing design system, while still allowing users to view all ingredients whenever they chose.

Preliminary Sketches

Hifi Mockup

Lofi Mockups

Design Process #2: About Page

What began as a single, content-heavy page was refined into multiple focused subpages (Mission, Team, Impact), improving clarity and user flow.

Preliminary Sketches, About Page

Lofi Mockups, About Page

Hifi Tablet Mockups, Mission, Impact & Team

Design Challenge #1

The client was still finalizing content and branding, so I created flexible templates and placeholder components to adapt as assets became available. Hi-fi mockups contained final written content and layout only.

Placeholder Components & Flexible Templates

Hifi Mockups, Tablet

Final Pages, Tablet

Design Challenge #2

The client needed a nontechnical solution with full ownership, so I built most content using Content Management System Collections and designed controls to toggle visibility as items were ready to publish.

Collection Name

Fields Included

Events

Event Title, Event Order, Date, Time & Location, Image, Alt Text,

Category

Products

Product Name, Product Description (Rich Text), Price, Colors, Sizes, Visible (Switch), Photo Gallery (Multi-image), Notes/Extra Notes (Rich Text), Alt Text

Team Members

Full Name, Profile Picture, Job Title, Email, Bio (Rich Text)

Hero Slides

Image, Slide Page Number

Hero Sliders

Merchandise Product Cards

Events Components

Team Member Cards

reflection

I’m proud of how this site reflects SSYT’s voice and allows them to grow.

I loved being able to support a mission I care about while solving real-world constraints.This project reminded me that good design empowers others—and that’s what I want to keep doing.

I’m proud of how this site reflects SSYT’s voice and allows them to grow.

I loved being able to support a mission I care about while solving real-world constraints.This project reminded me that good design empowers others—and that’s what I want to keep doing.

Next Time:

Conduct usability testing earlier with more youth users

Incorporate a Search component for nontechnical, older users

Incorporate micro interactions sooner in iterative process so it was more refined

Potential Search Component

in the Future

Let’s connect. Want to collaborate or just chat design?
Get in Touch | More About Me

Let’s connect. Want to collaborate or just chat design?
Get in Touch |

More About Me

Let’s connect. Want to collaborate or just chat design?
Get in Touch | More About Me

<< Back to

Product Design Projects

<< Product Design Projects

Let’s connect. Want to collaborate or just chat design?
Get in Touch | More About Me

See

Biasly Internship >>