Because of COVID-19, I was presented with a project to help create a virtual graduation “website” for Pensacola Christian College. Graduation is obviously one of the most exciting moments that all college students look forward too. Unfortunately, the Class of 2020 has been put into a situation where a “normal” graduation event would not be able to take place.
We wanted to highlight each student on our website and allow the graduates to share their achievement with family and friends through social media. I was given a wireframe of sorts (was basically just a sketch on a napkin) and I needed to bring the idea to our website.
I went to work and started wireframing. There were so many variables to think about so using Freehand by Invision was a great tool to take advantage of. I was able to quickly throw together wireframes that we could present to Administration.
Once the initial wireframe was approved I wanted to create a high fidelity prototype. This would also be great to show the lead programmer who was assisting me on the project. I believe that showing developers what we want to create in a visual way can really help make the process easier for everyone. A developer can often bring valuable input on things that others may not realize.
We wanted to make sure the user experience on the page was as easy to use as possible. We would have not only college students but also family and friends using the page.
Now it was time to start developing the page on the website. I created a placeholder for all the sections that would be dynamic. Then the programmer would easily be able to go in and adjust those sections and make them dynamic.
Key features to the page:
- Search for a graduate
- Filter graduates
- Hear audio of name recording when a graduate is selected (autoplay when possible)
- Add a slideshow of photos for each graduate
- Dynamically pull honors and awards for each graduate
- Make each graduate’s profile shareable
This was a great project to work on and the page was a huge success! Be sure to check out the website! pcci.edu/VirtualGraduation
