UX and product design for

American Youth

Re-designing the user experience and visual design for a leading secondary education fundraising iOS and Android app.

The challenge

The fundraising company, American Youth is transforming the traditional fundraising efforts for high school teams and organizations in Arizona by providing digital solutions for completing sales, reporting, and fundraiser management for students and organizers. We were tasked with re-designing the user experience, UI and visual design as the existing product is updated to a new framework for iOS and Android. The goal being to increase adoption, engagement, and streamline fundraising sales and management.

Our solution

Native app with on-boarding, simplified user journey, scaleable design system and feature enhancements.


We created a simple and reusable on-boarding carousel that is accessible to new users and users creating a new fundraising campaign to point out the primary app features and value.

Intuitive Journey

Students often make sales quickly so we streamlined the sales flow by making new sales quick and easy. In addition, navigating the sitemap was simplified for increased engagement with meaningful motion design for interactions between elements and screens.

Social sales
The primary goal is fundraising so we created a prevalent call to action for students to share their efforts on popular social networks with customers completing purchases through a secure payment gateway.
Engaging design and scalable UI

A functional design system, vibrant imagery, clean layout and modern typography and iconography creates a modern feel. A scaleable UI adhering to iOS and material guidelines with reusable, modular components was created for rapid design and development of new features.

Product screens

Below are a few examples of the product screens, on-boarding process, and finalized design.

Sports themed on-boarding flow after downloading the app. The goal is to excite high school kids with sports themed images (most fundraisers are for sports teams) while educating them on important features and functionality.
The visuals are similar to those of popular youth brands like Nike, Adidas, and UnderArmour and utilize student athletes as the primary focus for relatability.
Clean layouts with vibrant imagery for a modern look and feel. Oblique typography for headlines suggests a sense of movement with a goal of inspiring sales.
Each student gets a personalized dashboard with their current fundraising campaign details.
Friendly competition is encouraged with leaderboard rankings for teams and students.
Students and coaches are able to track sales and payment methods through visual graphs and lists.
Students can redeem sales for customized prizes like clothing, accessories, and cash.
Simple customization and redeeming of prizes.
Making sales is easy with a persistent "New Sale" button and simple point of sale flow for gathering customer and payment details.
Customer details screen within the payment POS flow with process stepper.
Collect payment securely for reporting and tracking.
A payment review screen is the final step before placing the order.
A payment confirmation screen with share call to action for achieving more sales through social media.
Students and coaches can create a profile, upload an image and details.
Empty state screen when no fundraising campaigns have been added.
Overflow navigation is stored within a bottom sheet.

The process

Our strategy

The main feedback from users is that the existing app was difficult to navigate, administer, and complete sales. Secondarily, the design was uninspiring and needed to generate more excitement and engagement. Our strategy was to create a new flattened sitemap that would be easier to navigate from anywhere within the app, streamline the POS sale process with a consistent call to action button accessible anytime within a fundraising campaign, re-think the admin process, create a scalable functional design system of modular components for future roadmap features and update the UI and navigation to be more ergonomic and scalable.  Oh and all of this in 4 weeks.

Sitemap and Information Architecture

We completely revamped the sitemap to improve ease of navigation for increased engagement with sections that were previously missed by users in the legacy app. Specifically, we simplified the navigation hierarchy so a user doesn’t need to deep-dive down a rabbit hole of views to find what they are looking for. We then created a simple click-able wireframe prototype to validate the flow and then layered in the content sections based on their importance and relevance to achieving user objectives.

Content audit and feature priorities

As we were completing the IA for each section of the app, we audited the existing content and categorized each element as primary, secondary, or tertiary, placing each in the proper hierarchal location based on importance. For example, list views might include the most important data associated with an item for the user to easily glance without having to deep-dive into an items details. We then place secondary and tertiary content within the item details view. We also roadmapped a features list and incorporated the most important and technically feasible features (like social sales) into the requirements.  

Updating the design

The original design for the app was lacking depth of imagery, iconography and color. We updated the look and feel by incorporating vibrant, youth focused imagery, bold and italic headlines for a sense of movement, simple and modern iconography, subtle gradients and a clean layout with contrast between light surfaces and colorful images and graphs.

Streamlining Sales

Students sell a majority of products to parents and other students in person so they need to make a sale quickly and error-free.  We created a floating and persistent “new sale” button adhering to Google’s Frequent Action Button guidelines from Material Design to make sales accessible anywhere within a fundraising campaign. For completing sales, we divided a sale into a stepped process with relevant views for form elements like capturing customer details, payment, review, and confirmation. Validation was added for fields within a current step and a student can easily move back and forth throughout the process to make changes if needed.

Scalable design system

Collaborating with the developer, we designed around the UI component library React Native Elements within the React Native framework. Our approach was to create modular and scalable components that could be easily added or removed from the user flow based on relevance and permissions without the need for custom design modifications. We adhered to Google Material and iOS Human Interface Guidelines for surfaces like cards, headers, navigation bars, CTA’s and movement between sections of the app.


We are currently building the app and will begin beta testing with students in the next few months but initial prototype feedback has been encouraging with a general consensus that the app is easier to understand, navigate and complete POS transactions. We will continue to add feature enhancements based on beta testing feedback over the next few months.

Development framework
  • Native iOS and Android
  • React Native
  • React Native Elements
  • Amazon AWS
  • Social Media API’s
  • Twillio SMS
UX deliverables
  • Sitemap and IA
  • Design system
  • Wirerames
  • Clickthrough Prototype
  • Visual Design
  • Motion Design Interactions
Design & prototyping tools
  • Sketch
  • Invision
  • Invision Studio
  • Photoshop
  • Gorlilla Testing

Question? Have a project in mind?

Get In Touch
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Consent to display content from Youtube
Consent to display content from Vimeo
Google Maps
Consent to display content from Google