North American Butterfly Association
During my undergraduate studies at the University of Illinois, students were asked to identify a non-profit’s website that was subpar and redesign it. Each student was asked to create a home page, an about page, a 404 page, and a page of our choice. We were also asked to incorporate UI/UX into our process.
User Experience Design
User Interface Design
Visual Identity Design
The first step of my process was to analyze their current website. There are three main aspects of the webpage that I analyzed: Navigation and Information Architecture, Page Layout and Visual Aesthetic Design, and Trust and Credibility.
I looked exclusively at other organizations that worked with butterflies. Their competitors included Pollinator Partnership, Save Our Monarchs, and Xerces Society.
Finally, I conducted a trend analysis of other non-profit sites, not necessarily related to butterflies.
I performed a heuristic analysis of the old NABA website and the reactions of three different users. I found that the site was extremely difficult for users to navigate with a lack of cohesive branding, multiple URLs, and unclear page titles.
I used Miro to perform a card-sorting exercise with my users. I was able to see how users organized information found on the original site.
After conducting this research, I felt I had enough information to move forward and started to sketch a low-fidelity prototype for both desktop and mobile. I asked participants to navigate through it on paper and recorded what was working and what was not.
For example, I removed the Join/Renew button and decided they needed to be separate to make sense. I was also interested in how the navigation bar should appear and took note of preferences amongst users for side navigation vs top navigation. Opinions were split on this feature.
After user testing I derived key findings:
- The content needs to engage the users by directly addressing them.
- The desktop side navigation is not ideal for this kind of website as it limits how much information can fit on a page.
- I need to better differentiate buttons from other content, participants were confused about where they can click.
second iteration moodboard and visual identity
After receiving feedback, I needed to start rebranding to address some of the concerns that came up. I also decided to move my work from Adobe XD to Figma.
For my final design, I incorporated the feedback I received and cleaned up the brand as a whole. I did this by:
- Redesigning my buttons to make them more clear that they are clickable.
- Changed the navigation from side to top to give to have more room to build layouts.
- Resized the text to better information.
- Rebranded elements on the website to frame information and brighten the site as a whole.
- Re-researched and rewrote my copyright to better engage with users.
Joshua J. Cotten
Suzanne D Williams