NABA Website Redesign

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

Logo Design


Icon Design



Adobe Illustrator

Adobe Photoshop



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.

Low-Fidelity Desktop Sketches
Low-Fidelity Mobile Sketches

mid-fidelity prototype

Mid-Fidelity Wireframes

first iteration

Mobile Version and Interactions
Desktop Version and Interactions

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,99.9%25%20decline%20since%20the%201980s.