Date: Feb. 2020 – July 2020
Client: Audubon North Carolina
My Role: Ux/UI developer, web developer, graphic designer, writer.
Tools: Adobe Photoshop, Adobe Premiere, Adobe XD, Adobe Illustrator, Pages, Instagram, Ceros, WordPress.
For my thesis project in my Master’s Program, I created a website for The National Audubon Society that teaches professionals how to navigate through Instagram. After interning for Audubon North Carolina last summer, I noticed that my colleagues that were 55 and older struggled to create content for Instagram. To resolve this issue, I wanted to create an interactive web interface that would provide older professionals in Audubon with resources.
In the summer of 2019, I was the social media/communications intern at Audubon North Carolina. My primary goal was to relaunch the company’s Instagram account. As I was researching other accounts within the company, I noticed that several accounts were performing poorly. I learned that many smaller Audubon accounts are run by older individuals who aren’t familiar with Instagram. Due to the small size of the volunteer branches, the account owners were often unaware of the social media resources Audubon offered.
When I interned at Audubon NC in the summer of 2019, I hosted a social media webinar. The goal of this webinar was to educate several chapter leaders on how to use Instagram. All of the participants in this webinar are in my target audience. I created a Google Survey to learn what type of content to include on the website. 10 chapter leaders out of 15 responded to this survey.
After examining the results of the survey, it was clear that the client would need a website that contained general information about Instagram, tips on how to gain and maintain followers, and helpful tools the company could use to create successful posts.
I sketched the wireframe for iteration 1 onto a sheet of paper. The first iteration of the website was created to look like a field guide next to a cellphone. Professionals at Audubon are familiar with using a field guide when birdwatching. I wanted to create a sense of comfort for the user by presenting them with familiar icons.
After creating the icons I sketched in Adobe Illustrator, I imported everything into Adobe XD to create the prototype for the first iteration of the website.
The client enjoyed the first iteration but felt like something was missing. I wanted to refine the first iteration by emphasizing the cellphone icon. I sketched a wireframe of what the second iteration would look like along with several background elements. My goal was to expound upon the original idea.
I created new icons in Adobe Illustration and imported them into Adobe XD. Instead of using a field guide as a way to navigate to a new page, I created bottom navigation elements. The second iteration also contains background icons and more small aesthetic details.
I uploaded all of my icons into a website called Ceros. Ceros is a website that allows users to upload icons from Illustrator to create a website without the need to code. After users construct their websites in Ceros, it produces a code for them to embed in the backend of a web host.
By using Ceros, I was able to add a pulse animation to every button, hover animations, transitions, pop-ups, and bottom navigation.
The feedback I received on iteration 2 indicated that multiple pulsating buttons were overwhelming. Iteration 3 would focus on refining the site’s navigation. I sketched a wireframe for iterations 3 to visualize how the user would experience the website. Instead of using buttons to trigger pop-up windows, I decided to create a side menu. Much like the original field guide idea, this menu would work as a table of contents for each page.
I went back into Adobe XD to modify the bottom navigation elements and pop-up windows. I noticed that the bottom navigation was difficult to see against the background, so I added a white box behind each icon. I recreated the pop-up windows because I ran into sizing issues with the videos. The new version of the pop-up windows allowed me to include more written content as well as include videos of all sizes. After e-mailing with the client, I decided to add a resource page. This page would include links to helpful articles, company resources, and helpful social media apps.
I recorded a video walk-thru of the website’s new layout for the client and for my peers to review. I highlighted areas of improvement and areas I would like feedback on.
Both the client and my peers agreed that the addition of the side menu was a significant improvement. My peers suggested that I change the pulsating red icon over the phone to something more subtle. The use of red typically indicates warning or error. In iteration 4, I made several improvements to the site icons and navigation. The client also requested that I add an about page so that I would be known throughout the company for creating this website. I created a wireframe to reflect the final changes that would be made to the site.
I created a site logo to include in the corner of the new top navigation menu. Instead of a red flashing arrow, I decided to change the icon to a hummingbird. This new icon was less offensive, while still reflecting the company’s aesthetic. I also added an about page that gave a brief overview of who I am and why I decided to create this website for The National Audubon Society.
The fourth and final iteration of the website was well perceived by my peers and by the client. I changed the main font I used throughout the website to give to ensure that things were cohesive. All of the clickable elements had hover animations that triggered pop-up windows. The majority of the videos were short gifs I created in Adobe Premiere.
After the client reviewed the final version of the website, I went back into Adobe XD to create a prototype for the mobile/ tablet versions of the website.
In iteration 2, I utilized buttons as one of the primary ways to navigate throughout the site. I implemented this idea into iteration 4 with minor adjustments to suit the client. Unlike iteration 2, none of the buttons pulsate or flash, which was the initial issue my peers and the client had with iteration 2. I also created pop-up windows that allowed the user to toggle between a video and written content.