American Youth

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.

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.

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.  

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.

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.

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.