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.
Skills:
User Experience Design
User Interface Design
Visual Identity Design
Logo Design
Branding
Icon Design
Copyright
Programs:
Adobe Illustrator
Adobe Photoshop
Figma
Miro
web analysis
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.
competitor analysis
I looked exclusively at other organizations that worked with butterflies. Their competitors included Pollinator Partnership, Save Our Monarchs, and Xerces Society.
trend analysis
Finally, I conducted a trend analysis of other non-profit sites, not necessarily related to butterflies.
heuristic analysis
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.
card sorting
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.
low-fidelity prototype
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.
mid-fidelity prototype
first iteration
user testing
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.
final design
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.
figma files
Desktop View:
Mobile View:
images from
Evan Buchholz
Joshua J. Cotten
Paul Immanualsen
Nicholar Doherty
Eva Blue
Suzanne D Williams
Dulcey Lima
Kyle Glenn
information from
https://www.sciencedaily.com/releases/2021/03/210304145405.htm#:~:text=Western%20butterfly%20populations%20are%20declining,99.9%25%20decline%20since%20the%201980s.
https://www.pnas.org/doi/10.1073/pnas.2002551117