CONCEPT:
EveryPenny is an intuitive cloud-based nonprofit software suite that provides tools built to support the good work nonprofit organizations do. My objective was to design a responsive SaaS website that is easy to use and allows nonprofit employees to successfully engage with donors, manage memberships, plan events, track volunteers, and much more.
COMPETITIVE ANALYSIS
I did a comparison of other SaaS websites for nonprofits to see what is and isn’t effective and looked to see what is lacking within the nonprofit SaaS market.
QUESTIONNAIRE
I posted a questionnaire in nonprofit groups on social media and received 7 answers. My goal was to learn which software they use now, what their struggles are with that current software, and what would make their fundraising software experiences better.
PERSONA
I created user personas to realistically represent key audience segments. I didn't need to represent every possible audience member but rather address the major needs of the most important user groups. Meet Jessica, a new hire at a nonprofit looking for a new software solution for her fundraising needs.
EMPATHY MAP
I created an empathy map to understand my users, organize my research, and to drive a human view rather than technical view of EveryPenny. Empathy maps are used to understand and communicate the problems and mindset of users in an easily digestible manner.
SITEMAP
A sitemap was created to show the relationship between the content on the site.
TASK FLOW
I identified the main flow that users will follow to complete the main task (completing a task on the to do list on dashboard). A path was created to the key screens that would become part of the site design, also known as the "happy path" of the software.
USER FLOW
A user flow was created to represent the different paths that a user would take through the site to complete each task.
WIREFRAME SKETCHES
Created low-fidelity sketches of different options for the software dashboard.
WIREFRAMES
A wireframe was created to illustrate the layout of the dashboard interface.
LOGO CREATION
I created a fresh and modern logo for EveryPenny that simply represents a copper penny. This circular penny can therefore later be used in design elements within the software.
STYLE TILE
A style tile was created consisting of fonts, colors and interface elements that communicate the essence of the visual brand for the EveryPenny software.
RESPONSIVE UI DESIGN
Next, I needed to design to accommodate different viewports - the layouts need to be able to fold and expand gracefully without disturbing the overall flow of the design.
PROTOYPE CREATION
The testing phase is the greatest opportunity to improve products by studying how people respond and interact with ideas. I created a functional prototype with clickable buttons, simulated page transitions and animations that roughly matched my experiential concepts for usability testing.
USER TESTING
Next I took that prototype and put it in front of some users to see how well the design ideas played out.
INTRODUCTION:
Four users were tested. They were aged 23-62, both male and female. The task was log into the account and complete the first task on the to-do list located on the dashboard. This test was done remotely via Skype. Introduction was done via video chat and then test was done using screenshare. The prototype itself was tested with a link from InVision. After each test, I asked them feedback about their experience, what their pain points were and how they would improve the interaction.
SUMMARY OF RESULTS:
All users completed the task with no errors
No hesitations from any users throughout task
Suggestions for change:
Alteration of progress bar to make it more obvious
Collapsible dropdowns rather than separate windows for forms
Make entire boxes clickable rather than just circles with arrows
Create another login area or make login more prominent
2 of 4 clicked on login without exploring homepage
4 of 4 users did not try to click on any other parts of website outside of task
AFFINITY MAP
I wanted to step back and see the big picture of my results so I created an affinity map. By labelling groups and sub-groups, I can visually see where the main issues are.
REVISED PROTOTYPE CREATION
I made revisions to my design work based on feedback from my evaluative research. I had to determine what were the biggest priorities to change. In this stage, I would continue to make revisions and complete usability tests until the design is a success without any usability issues.