The New Jersey Association of Library Assistants is an organization within the NJ Library system that includes Library Assistants, Library Aides, Para-Professionals, Para-Librarians, Library Directors and other specialists. Throughout this nearly year-long project, I was responsible for redesigning their original website using WordPress, as well as a variety of skills and tricks I had picked up throughout my classes.

Context & Challenge

Problem Statement

NJALA reached out to me through a mutual connection. They had one main problem, which did little to narrow down the scope of the project: They knew that their site needed work, and wanted me to try and fix it. They also wanted me to put a renewed focus on events, and wanted users to be able to easily see what the newest events were, as well as allow members to quickly post new ones. Sounds simple enough – but this was a process I had never attempted alone, so it would be a brand new experience for me. 

Users/Audience

My brief research found that the site’s userbase consisted of two main groups. One group was consistent users, usually members of NJALA who would check the site for events, updates, or information. The other group was seasonal users, who would access the site around the time of NJALA’s well-known Annual Conference. NJALA hosted the signup forms on their site, meaning traffic would increase, and funneling users to the correct areas became very important. My user research found that providing easy access to events information was very important, and providing easy access to signup forms during Annual Conference season is a secondary goal.

Roles and Responsibilities

I was the sole developer and designer on this project. This was a brand new experience to me, and I was nervous about this responsibility, especially as I had no one within NJALA to turn to with advice. This ended up being one of the greatest challenges to this project, as I essentially had no other voices providing me with advice or help when I reached a challenging stage in design or development.

Scope

This was an extracurricular project I took on while working simultaneously on my Drexel studies. As a result, the time with which I could spend with this project was severely limited. This lead me to communicate that my scope could not be as large as if I was focusing on the project full-time. Nevertheless, I sought to create as complete a final product as possible.

Project Restraints

My restraints mostly focused around the aforementioned part-time nature of this project. In addition to this, however, I would consider myself only an amateur UX/UI designer and a novice WordPress developer. To take on a project of such a complete scope is an opportunity to improve, but also a sure challenge.

Process

Beginning Steps

To begin, I knew that I needed to create a map for the site’s organization. At the outset of this project, the site had no clear structure and was incredibly difficult to navigate as a result. To that end, I developed a sitemap for the redesign:

Design

NJALA’s original site already had a color scheme and choice of font; I discussed this with the client, and they wanted to keep this relatively the same. I made slight adjustments to the full color scheme; certain colors were slightly adjusted in order to reduce harshness and make the interface more pleasing to look at. I made no changes to the font. I then created an infographic in order to visualize my branding:

At this point, I used elements from previous web design classes in order to design a quick wireframe using the NJALA branding.

Development

Development began by using code from a previous project, my WordPress-based portfolio site, as the basis for this new project. I removed my portfolio branding and replaced aspects as needed. I used the code for the search function from my portfolio site, using the idea of being able to post new portfolio pieces in order to allow NJALA members to post new events.

Code for Search function

Code for Event display

Outcome

Pictures show a test version of the home screen, with 3 test posts

The final site encompassed all requested aspects; an aesthetically refined NJALA home site, focusing on an established color scheme and visual design, populated with NJALA-member-generated content in the form of events. Users to the site can quickly learn more about the group in the hero CTA, which brings them to the About page. The rest of the pages in the top menu (aside from Events) encompass static content, provided by NJALA, that can be easily filled and replaced.

The search feature is available in the top right corner, and can be used to search all currently posted Events. The 3 newest Events are posted at the bottom of the home screen to allow for easy access, but all Events can be located in the Events tab in the top bar. These features work together to make it as easy as possible for consistent users to find the events they are looking for.

Events are easily created and edited through WordPress’s built-in tools. I provided instructions for every step of this process and sent them off to the NJALA members I was in contact with.

The hero image on the main page can also function as a temporary way to direct users towards Annual Conference forms; with a few switched lines of code, the hero’s CTA now directs to an offsite Google Form, and the text changes to match.

Results

The amount that I learned from this project is difficult to quantify. I feel that I stepped into this position with very little experience, hoping to figure it out as I went along; what I learned is that this approach does not work with design and development work. Rather, my best results occurred when I developed a plan and used the resources at my disposal to achieve what I needed to. By the end of the project, I had rearranged my style of working to better suit the project; I found myself plotting out work days and utilizing professors and past projects to support what the project needed.

The freeform nature of this project allowed me to experience the good and the bad of self-directed work. I learned that weekly goals and checkpoints are essential to keeping the flow of work going; otherwise, one will never know if they’ve accomplished what they need to for the week. At the same time, it was a refreshing break from the deadlines and tasks of regular schooling – though these things are definitely needed.

Overall, my understanding of my own abilities and knowledge when it comes to design has been further cemented by this project, and I now know my own abilities and can better communicate them to future clients. I’m very happy with how the final site turned out, and I hope NJALA are too!