VVOA Website

Capstone Project

Case Study

The Project

For my capstone project at NAIT, I worked with a team to create a website for Vegans and Vegetarians of Alberta (VVOA), a non-profit organization that promotes vegan and vegetarian lifestyles. The team consisted of web designers and developers, graphic designers, and a business analyst.

The purpose of the website is to promote VVOA, provide details on VegFest (a vegan festival), and encourage Albertans to take part in the community. The goal of the project as a whole was to perform a full overhaul of VVOA's old website, which primarily only included information about VegFest, and to allow them to maintain and update the website themselves.

As the lead UX/UI designer, I worked closely with both the graphic designers and web developers to design a website that met the client's requests as well as remain as feasibly codable as possible. Myself and the other developers conducted a design sprint and created several sketches to plan out how the website could grow. I led the wireframing and prototyping stage, creating low and high fidelity mockups to code into a responsive, accessible, and user-friendly website.

In order to allow VVOA to maintain the website, we decided to create it using WordPress. The developers began working on the functionality of the website and I provided support by uploading content, ensuring that everything was linked properly, and troubleshooting problems with the code.

Tools & Methods

Design Sprint, Adobe XD, Storyboarding, Wireframing, Prototyping, HTML, CSS, PHP, JavaScript, WordPress, GitHub

The Product

View the live site here.

vvoa website page mobile
vvoa website page tablet
vvoa website page desktop

Reflection

This project was a culmination of the skills and techniques I learned in my program. From writing code and wireframing to presenting to a client and collaborating with a team, I had my fair share of fun and troubles.

At the beginning of the project, my team had some miscommunication with the client and we expected to create a website to promote VegFest, and not a full website for the organization. Once we realized the full scale of the project, we quickly felt overwhelmed but hammered out the website by creating a timeline and prioritizing parts of the project. Through this experience, we learned how to manage expectations from the client and ourselves.

However, during the development process, due to unforeseen circumstances, I unfortunately was not able to keep up with my tasks and was holding back the team. I did not communicate my situation to my team which resulted in missed deadlines. When we eventually had a meeting about this, I was so grateful to my team for being understanding but also understood that, had I communicated with them, we could have reassigned the tasks to stay on top of the timeline. Communication really is key to a successful project.

In terms of technical difficulties, this project proved to be a test to my WordPress skills. Although I was not primarily working on the website's functionality, troubleshooting was a hurdle on its own. Working on the website simultaneously with other developers meant that sometimes, we'd overwrite each other's code. We would have to figure out if the problems that arose were due to WordPress errors or if the files were updated properly. Since we also used some plugins for sections of the website that we didn't have the capability to create ourselves, we needed to understand how they worked in order to fully utilize them. I was able to hone my problem solving skills during the creation of the website.

In conclusion, this capstone project was challenging and very fulfilling. It taught me what working with a client would be like and I was also fortunate enough to be able to work alongside a great team. Though there were some obstacles we had to overcome, the website was completed on time and everyone on the team was satisfied with how it turned out. Most importantly though, our client was happy with the website which meant our job was a success.