CNCS
Corporation for National and Community Services
Summary
Users on an average dedicate 15 seconds or less for a website. Come to think of it, it’s really not a lot!
Users on an average dedicate 15 seconds or less for a website. Come to think of it, it’s really not a lot!
It is very important for a Government Agency website to provide information that is easy to find and hold the user to complete the tasks intended within a short span. The main goals of CNCS is committing to improving lives, strengthening communities, and fostering civic engagement through service and volunteering. We as a team conducted heuristic evaluations tests to help us understand why the website failed in users completing simple tasks such as joining AmeriCorps, Donate financially and through service and learn more about Senior Corps which will help meet their goals.
Let’s take the case of Johnny Lockhart our user persona. He wants to do a service year. He wants to serve as an AmeriCorps member with ‘College Forward’ to help underserved students achieve their post secondary educational goals. We are committed to redesigning the website to assist Johnny in meeting his goal.
my role
User Interviews
Iterations #1
Affinity Diagrams
Empathy Map
Google Slide Deck
Usability Testing
Iterations #2
Wireframing
Prototyping
Final Testing
Tools
Photoshop
Figma
Miroboard
Whimsical
Google slides
Google Docs
Spreadsheet
InVision
Zoom
Otter
team
Understanding CNCS Website
The main objective of CNCS is to help users learn how to apply for AmeriCorps, Donate and learn about Senior Corps. Did they succeed in accomplishing these tasks with easy navigation? Let’s find out.
.png)
.png)
.png)
.png)
User Research
After Evaluating and conducting user interviews as a team we re iterated based on the feedback from our users. The current website fell short in key areas. Too much clutter, hard to find icons and buttons, too much content and images scattered.
Let’s take the case of Johnny Lockhart our user persona. He wants to do a service year. He wants to serve as an AmeriCorps member with ‘College Forward’ to help underserved students achieve their post secondary educational goals. We are committed to redesigning the website to assist Johnny in meeting his goal.
“How do I get to AmeriCorps Application Page in fewer clicks?”
“It’s not easy making a donation as there is no visual button on the homepage”
Here’s what some of our users had to say.
“I am interested in learning more about Senior Corps but having trouble with reading tiny fonts”
User Persona
Define & Ideate
Define & Ideate
Problem
National Service website was designed to enable volunteers, AmeriCorps, Senior Corps members to connect and provide service for the greater good.
But WHY as users feeling overwhelmed and frustrated that they aren’t able to their tasks successfully?
Solution
How might we reduce clutter, provide clear hierarchy and organize content to ease the users from being overwhlemed and happy to donate and join AmeriCorps. Also learn more about Senior Corps.
Let the Iterations Begin!
We considered the pain points of our users and after going back and forth to the drawing board and iterations framed the bare bone of the website through card sorting.
Website Interviews
“Unable to find donate button. Would be nice to donate directly from homepage”
AmeriCorps Interviews
“Eager to join but unable to find the application with ease”
Card Sorting
After several interviews and users feedback as a team we regrouped and created this card sorting CNCS website user interface redesign process.
​
As shown here the design is leaning towards simplicity and clear separation between sections and also placed donation, search and login buttons visibly in the global navigation to span through the entire website.
Sketches to Mid-Fi Wireframes
Prototype out for testing!
Desktop
Mobile
Don’t take my word for it!
“I am able to donate easily with the donate button large and visible on all the pages”
“I was able to go through the flow for joining AmeriCorps from Homepage itself. Very convenient!”
Let’s get some Users’ feedback!
“The site has much better hierarchy and like the drop down navigation”
Final Thoughts
Our initial design ideas was to simplify the navigation system by eliminating and sorting out the crowded content. So as a team came up with a button concept to separate the tabs and added drop down menu to keep things more clean and unified. But soon we came to find out that our box button menu was clashing with the background. So we regrouped and redesigned a simplified navigation bar and opaque box drop down menu. Overall, we had some challenges with the hierarchy and font size. But over came those with constant iterations and testing.
Future Goals
I have learned to go “Mobile First”. In the near future we will be more mindful of the font size, and not restrict ourselves with the choice of colors we choose early on. I will add more colors and font styles to the style guide. Through this project we learned about how to design for RWD desktop and Mobile interfaces. Looking forward to applying our new skills and tools to future projects.