Crown Prince Foundation - A web app for leadership fellows
“
Midline scores, SMART goals and actions for every fellow, in English and Arabic.
Crown Prince Foundation
Web app UX and UI, 2023
About the project
The Crown Prince Foundation runs the Al Hussein Fellowship Program (HFP), a one-year leadership program launched in 2020 for young people across Jordan. In 2023 we designed a bilingual web app for the program’s evaluation. Fellows see their mindsets, characteristics and midline scores and turn the weak ones into goals and actions, while admins set up the program and follow each fellow’s progress.
Project
HFP Development Toolkit
Industry
Youth Leadership
Location
Amman, Jordan
Date
2023
“
Client Request
The program needed a personal development toolkit where each fellow sees their midline scores and plans how to improve the characteristics that need work.
CPF
Program files, 2023
Design Pillars
Core UX Principles
The overview lists every mindset and characteristic with its midline score and marks the ones to work on.
Each goal splits into sub-goals and actions, with a short guide to writing SMART goals.
Fellows can switch languages at any time, and admins enter every name and description in both.
Discovery
Two User Stories
The Fellow
A fellow signs in, checks her scores and turns one characteristic into a goal with a list of actions.
The Admin
An admin defines the mindsets and characteristics, enters each fellow with their scores and sets up other admins.
The Evaluation
The program team wanted to see who signed in, who completed the forms and who was most active.
The Challenge
Problem Statement
The Main Goal: Turn Scores Into a Plan
Each fellow had midline scores for a set of mindsets and characteristics. The app had to show fellows where to improve and help them write goals they could act on, and it had to let the program team follow every fellow’s progress, in English and Arabic.
“
Serve to lead.
HFP concept line
CPF website
Our Approach
Solution
One App for Fellows and Admins
User stories, wireframes and the final interface for a fellow area and an admin area, styled in the program’s brown and olive colors. It is an example of our Web App Design work.
01 - User Stories
One story for a fellow and one for an admin, each told step by step from the moment they sign in.
02 - Wireframes
Wireframes for both areas: sign-in, overview, goals and actions, mindsets, fellows, analytics and reports.
03 - Interface
The final screens in the HFP brand, with empty, edit, delete and success states.
Design
Key Features
Goals, Sub-goals and Actions
Fellows add a goal to a characteristic, split it into sub-goals, list the actions and tick each one off when it is done.
Analytics and Reports
Admins see sign-ins, completed forms and the most active fellows, then search and filter to open one fellow’s goals and actions.
Design System
Visual Identity
Typography
One clean sans serif, with large numbers for scores and totals and small labels for tables.
Color Palette
Dark brown #62422F for buttons and the active menu, with the brown and olive greys of the HFP logo on white.
States for Every Action
Empty screens, hover menus, edit and delete dialogs and success messages for mindsets, fellows, goals and actions.
Impact
A Clear Plan for Each Fellow
Results for the Crown Prince Foundation
In 2023 we designed both areas of the app, from user stories and wireframes to the final interface, for a program that takes up to 50 fellows a year.
Crown Prince Foundation
Result
By the Numbers
2 Languages
English and Arabic, with a switch available at any time.
2 User Areas
A fellow area for goals and actions and an admin area for setup and reports.
3 Planning Levels
Goals, sub-goals and actions, with every action ticked off when it is done.
Discovery
From the Program to the Screens
Program Documents First
In January 2023 we received the program flyer, its first assessment report and the definitions of each characteristic with examples of behavior. We used them to write a user story for a fellow and one for an admin, then drew wireframes for both areas before the final design.
