Aga Khan Foundation

Lead Visual Design, UI/UX Designer

Overview

Client
Aga Khan Foundation
Timeline
Aug 2018 - In Progress
My Role
Visual Design Lead, UI/UX Designer
Team
UX: Alysha Jivani, Asma Alibhai, Ali Thanawalla, Karishma Merchant
UI/UX: Noureen Dharani, Inaara C (me)
Background
The Aga Khan Development Network (AKDN) is a non-profit, non-denominational organization that supports over 1.3 million people around the world. The founder and chairman of the AKDN, the Aga Khan, is the 49th hereditary Imam (Spiritual Leader) of 25 million Shia Ismaili Muslims around the world. The Aga Khan Foundation (AKF) is a branch of AKDN that brings together human, financial, and technical resources to address some of the challenges faced by the poorest and most marginalized communities in the world. AKF desires to develop an app that will integrate virtual walkathon challenges with social media in an effort to raise funds and awareness for AKF and the causes it supports.
The Challenge
Our team was prompted to design a ‘walk for charity’ app that would allow users to join a team, track their miles, and invite supports to pledge money in an effort to increase physical activity due to the play aspect of the app helping raise funds for AKF, and educate users about AKF’s work around the world.
My Role
I worked as the Visual Design Lead and UI/UX Designer. Some of my responsibilities included:
‍
1. Developing a visual design system for the app with given constraints
2. Collaborating on, critiquing, and improving each screen
3. Working directly with developers to discern feasibility of designs
Goals & Envisioned Impact
This app is set to be developed and launched by late Spring 2019, with a target of 250K users.
‍
1. Encourage more physical activity and improve health wellness of users
2. Raise funds for AKF to support marginalized communities
3. Provide a secure and delightful experience for users
The Process
Research
Ideation
Prototyping
(In Progress)
Refinements
(In Progress)

Research

Due to the short timeline and demands from the client, the project manager pushed for a shorter initial research timeline, in order to make time for usability testing later in the process. As such, we chose to consolidate feedback from a similar app AKF previously launched and also analyzed related products currently in the market.
“Walk to Dubai” App Feedback
‍The AKF team had previously released a beta version for a similar app concept called “Walk to Dubai,” which was an individual-based activity tracker. Feedback from users of the previous “Walk to Dubai” app were reviewed and key insights were synthesized.
Key Insights:
1. Having to manually enter miles into the app deterred users from continuing to use the app
2. Users felt unmotivated to meet their goals due to the individualization of the game, lack of rewards/incentives, and manual mile entry
3. Lack of trust in the app due to manual mile entry and unappealing UI
Existing Product Analysis
‍We also explored a number of existing solutions that we found interesting, and discussed our findings. These sources of inspiration included fitness apps, charity for fitness apps, and wellness apps.

Ideation

To make sure things were moving efficiently, the design team was split into UX Designers and UI/UX Designers. The UX Designers focused exclusively on the overall structure for the app, discerning features in each tab, and developing lo-fidelity wireframe/wireframe details. The UI/UX Designers - which was my role - were to provide feedback during weekly meetings, develop the visual design guide, and convert the lo-fidelity wireframes/feature details provided into hi-fidelity screens.
User Flows
Given user research and client considerations, each designer developed their own idea of the user flow for the app. We discussed and consolidated these, and began to create user flows for each tab in the app. The flows were iterated on as we provided critiques and user tested.
Visual Design
‍We used AKF’s existing brand guideline as a launching pad for our app’s visual style, and introduced new colors/styles where appropriate. Given team preference for my vision regarding the visual design, I was selected to take lead of the app’s Visual Design.

Prototyping

While the UX Design team worked to complete various lo-fidelity wireframes, the UI/UX Design team converted completed screens to hi-fidelity. Each team was responsible for ‘hallway’ user testing to gather quick feedback while iterating on their designs. As a UI/UX Designer, I provided ideas for potential concepts/features, feedback and input while the lo-fidelity wireframes/features were being developed, as well as made changes to the final screens given my findings with user testing and my understanding of the desired experience when converting the screens to hi-fidelity. Once a tab’s hi-fidelity version was completed, they were handed off to the developers in order to discern feasibility, get feedback, and begin developing.
Lo-Fidelity Screens (in progress)
The app consists of four main tabs (Dashboard, Challenge, Leaderboard, and Notifications). The lo-fidelity screens + tab feature breakdown provided by the UX Design team to the UI/UX Design team are roughly presented here:
Hi-fidelity Screens (in progress)
The lo-fidelity wireframes were then converted into hi-fidelity screens. As a UI/UX Designer, I made appropriate changes to the hi-fidelity screens based on my knowledge of the experience, own ‘hallway’ user testing results, and collaborating with developers.
Visual Design
The colors chosen were inspired by the current AKF brand guideline. For the three graph display colors, we chose to go slightly brighter in order to provide a clearer indication to the user. We also chose to stick with the app’s native font for both iOS and Android devices.

Next Steps

Given that I was the only undergrad on the team, it has been incredibly valuable learning from UX designers that are in the working field and have experience designing at companies like DirectTV, Home Depot, AT&T, and Google. And by leading the visual/hi-fidelity designs, I worked directly with the developers and gained a valuable amount of insight into the different considerations when designing an app.
‍
There were also a number of challenges, particularly given the virtual aspect of the team. Though a national team was valuable for providing insight into different approaches to design processes, it was difficult to manage schedules with individuals that were working full-time in different parts of the world. Additionally, the short time-line and expectations from the stakeholders meant that we had to pick and choose what we could focus on (e.g. prioritizing usability testing over initial user research).
‍
This project is currently in progress, and I am excited to continue working on it! It is set to be completed in late Spring 2019.
Inaara Charolia