CFC MOBILE APP

This project for the CFC aimed to engage young recruits in donating to CFC-approved charities, starting with Fort Carson. Research indicated that the target audience desired a simple and convenient donation process. We addressed this need by developing a mobile app, allowing users to quickly donate via QR code and choose specific cause areas for their contributions. This approach makes charitable giving easy and accessible for young recruits.

PROJECT OVERVIEW

Team

Bruce (CFC representative)
Joe (Software Engineer)
Somerset (UX Designer)

Objective

Develop a mobile app to connect users with causes they care about and facilitate quick donations.

Target Audience

18-25 year old audience at the Fort Carson Army base.

Design Process

Wireframes
Ensure intuitive navigation and highlight key information
Create several design iteration
Conduct usability testing with multiple users
Simplify the design for the first iteration to meet user expectations

INITIAL MEETING AND RESEARCH

We began with an initial meeting where Bruce presented his research findings and project idea. He outlined what the target audience disliked about their current experience and what improvements they desired. The key parameters were:

Access via QR code.
UI appeal to 18-25 year olds.
Quick donation process.
We also established a working budget during this meeting.

Screenshots of the flow for the mobile app

Scan QR Code

Select Cause Area

Donation Amount

Payment Method

Payment

Success

Screenshots of the CFC Website

Bright and Bold Colors:
- The bright and bold colors create a sense of visual clutter, making it difficult for users to focus on key information.
Inconsistent Button UI and Placement:
- Buttons lack consistent styling and placement, leading to a poor visual hierarchy.
Logo Competes with Other Header Information:
- The logo's placement and size compete with other elements in the header, making the header feel cluttered.
Excessive Navigation Links:
- The header contains too many navigation links, making it overwhelming for users to find what they need quickly.
Dense Layout and Organization:
- The overall layout feels dense and hard to scan quickly, making it challenging for users to find relevant information.
Redundant Images and Information:
- There is redundancy in the images and information presented, contributing to a cluttered appearance.

COMPETITIVE ANALYSIS

To ensure a cohesive design, I conducted a competitive analysis of other charity websites in comparison to the CFC website. Our focus was to maintain the CFC’s logo, font, and base colors, while creating a user-friendly design system and flow.

DESIGN PROCESS

I created a wireframe and assessed the user experience. Our goals were to ensure intuitive navigation and highlight key information. We created several design iterations and conducted usability testing with multiple users, aiming for a simple and effective design in the first iteration.

In designing the UI, we retained key elements from the CFC website while experimenting with different design elements. For the first iteration, we kept things simple, following the flow Bruce initially suggested:

Users select a cause area.
Review information about the cause.
Input a donation amount.
Select a payment option.
Receive a confirmation page.

EMAIL TRACKING

As I worked through the designs, we were asked to include a way to track users' emails. We integrated optional email input fields at strategic points in the flow, ensuring users could opt out if they preferred.

I adhered to best design practices, focusing on the content and user experience rather than bold, distracting colors. The user flow was designed to be straightforward:

Open the app and recognize support for Fort Carson Army base.
Select a cause area.
Review information about the cause area.
Input a donation amount.
Choose a payment method (debit/credit, Venmo, PayPal).
Receive confirmation and an opportunity to provide an email.

PROTOTYPING & APPROVAL

I developed a mobile app prototype, which we presented to stakeholders for approval. The prototype was well-received, and we received the green light to proceed with app development.

FUTURE ITERATIONS

For future iterations, I have proposed several enhancements:

An additional CTA on the landing page opening a drawer for cause areas.
Iconography for distinct cause areas.
Enhanced CTA for quick donation selection.
A revamped UI with a progress bar throughout the experience.

FINAL THOUGHTS

In conclusion, our project was successfully approved, and we have initiated app development. Moving forward, we have proposed changes for future iterations. Throughout the development of the charity donation mobile app for the Fort Carson Army base, I gained valuable insights into the importance of user research, effective collaboration, and the iterative design process. Bruce's initial research highlighted the need to understand the target audience's preferences, and working with Joe emphasized the value of team dynamics and communication. Conducting a thorough competitive analysis allowed us to identify best practices and refine our design. Balancing consistency with the CFC’s branding and exploring creative solutions taught me to maintain brand integrity while innovating. Focusing on user-centric design principles ensured an intuitive and enjoyable user experience, and developing a functional prototype facilitated stakeholder engagement and buy-in. The project reinforced the need for flexibility and adaptability, as well as the importance of planning for future iterations to ensure the app evolves with user needs. Overall, this project enriched my understanding of UX design and equipped me with skills that I will carry forward into future projects.