How can I Create Solutions?
Consultation
After meeting with Coach Ron, I learned the main initiatives were to audit their current website, make suggestions on ways they can improve and gain more program enrollment along with donations through their online platform.
Meeting Current UI Standards
Heuristic Evaluation's Key Takeaways
-
Establish a color palette for brand image
-
Create a consistent layout on each page utilizing visual hierarchy and information architecture.
-
Add a FAQ Page, contact form
-
Keep page and program offerings up to date
-
Change the “Sign in” button to “Account” or “Profile” after you've signed in for clarity.
Inspiration Sought
Competitive and Comparative Analysis
​I reviewed similar organizations to see how they oriented their platforms to communicate their mission and programs. ​
​Organizations:
-
Athletes For Care
-
Tommy Bohanon Foundation
-
Children of The Nations
-
YMCA
-
South Bronx United
Main Takeaways:
-
Program offerings are often on the Home Page
-
“Hall of Fame” layout ideas
-
Newsletter offering
-
Contact Form
-
Partners displayed
-
Social Links
Circular Layout of ways to get involved at South Bronx United. ​
Utilized within the Coaches Profiles and the Program offered
Prospective Donors and Parents
User Interviews
Participants:
-
Olesia - Mother (40)
-
Zack - Father (32)
-
Debbie - Mother (66)
-
Jenn - Mother (32)
-
Emari - Mother (30)
Key Takeaways:
-
Building trust is important especially when dealing with children.
-
Make sure to have an operating phone number for easy contact.
-
Non-profit status should be clearly stated, so they’d be more inclined to donate
-
Needs a personal connection in order to support
-
Would like more info on the staff and reason why they started
Usability Test of Original Website
User Insights:
-
No real branding or color scheme, the registration page looks so different from the other pages and is overwhelming.
-
The registration page should be a calendar
-
Pricing should be clear
-
Main page should include programs offered with a little snippet
-
Mobile and tablet view lacks photos, videos and info.
-
Add reviews
-
Keep the global nav in place at the top
What are Their Needs?
Persona
Parental Patty has a very busy schedule between work and raising her child. She places a lot of importance on what her child takes part in, so they can learn and grow to be the best version of themselves.
​
Patty Needs to have a personal connection to an organization in order to donate, as well as. an easy to use platform with clear transparency for enrollment. ​
Problem Statement
Parental Patty needs a way to enroll her child in an after school program with confidence and ease, so she can rest assured of her decision and support the organization. ​
​
-
How might we build connection to our company?
-
How might we incorporate transparency within our mission?
Designing Based on User Insights
Grayscale Usability Test Results
I designed a low fidelity prototype and had seven participants partake in an unmoderated usability study via Maze to see how users took to my design. All were able to complete the given tasks under a minutes time.
Key Takeaways:​
-
Keep the mission transparent and the 510c3 non-profit status at the forefront, so we will build trust from the beginning and bring possible donors in too.
-
Link the Programs outlined on the homepage to the Register page. - As seen on the “Heat Map” some users gravitated towards the Programs on the home page when looking to enroll, rather than the top nav button.
-
Enlarge the top nav options
-
Space out the attachment icon and the submit button for the Hall of Fame submission form
-
Clean the registration calendar up, making it more legible.
Refine the Design
High Fidelity Wireframes and Prototype
Mission Visibility
Implemented a brief description of the organization at the top with the non-profit status and keywords to the right side for clear highlights, to inform users upon entery.
Enlarged the top nav buttons for clearer visual indicators
Previous grayscale nav bar
Hall of Fame displayed via a carousel on home page with clickable success stories of past participants via an overlay landing beneath the picture.
Display of the programs offered on home page linking them to the registration page for more info.
Establishing Trust with Customers
Included Coach Profiles on the About page with overlays to share their personal stakes in their mission and their personal background. (I used a quote found of their website as a placeholder.)
Displayed past volunteer work they've done as an organization, linking them directly to the pages of those projects.
Newsletter registration, contact information, social links and Partners listed on the bottom nav.
Simplifying program enrollment process
I used color coding for each program and it's subsidiaries for visual indicators on the main calendar.
Donating Made Easy
Donation form displayed as an overlay pop up with levels of giving, ability to share out, testimonies listed at the bottom.
Lessons Learned
-
I learned to not be afraid of reimagining the current page layout and to ask pivotal questions like, how can we simplify the look to not overwhelm the user?
-
Pulling interesting colors from the established logo and working off of that to create a style guide was very helpful.
-
Asking your client the right questions at the right time can really determine the success of your designs.