A UX/UI Design and Full Stack Development Project
I was a part of a two-person team that lead the design, development, and implementation of a site redesign for the third largest college at UCF, the largest university in the country.
Backstory:
Since its opening as an small all-male engineering college in the 60s, UCF has seen unprecedented growth as it became the largest university in the US in 2016. The College of Education not only encompasses the 5,500 students enrolled and staff but also provides assistance for schools and outreach programs for the underserved populations of Florida.
The website first created for the College needed to be refreshed to represent this incredibly large and diverse audience. It needed to adhere to accessibility standards, scale both visually and technically to keep up pace with the University, act as a advertisement for prospective students and donors, meet the need of the established user base, and also meet all the brand standards UCF had come to establish. Additionally, this site served as top site in the College’s umbrella of over 200 subsites.
The original site was constructed on a technology stack consisting of Apache, Oracle, ColdFusion, and Flash. Much of the content did not scale to mobile or tablet and did not meet accessibility standards. Pages were constructed using nested tables and outdated marketing material.
Approach:
To begin work on the tech we needed to do an in-depth technical investigation to find out what stack would be best for us. We inspected front-end frameworks such as Bootstrap and Semantic, NoSQL vs SQL, and several Javascript libraries.
For design, we wanted to approach this with our most diverse users in mind. We already knew how to make a website for students and faculty but we what we needed to learn was how to represent the community and outreach programs. With our 7,000+ user base being as diverse as we could imagine, we decided we needed to pinpoint audiences and create personas based off of usage and goals.
Research and Insights:
Opportunities:
Family Counseling Center: A research clinic that runs therapy sessions for couples and families while also providing childcare and resources to help people excel in their career and home-life. We realized how important marketing was for organizations that run on grants and community participation. Visibility was everything and many of them work with clients who have little access to the internet and know English as a second or foreign language.
Intervention Program: An organization that exists across the state that provides urgent intervention for families with children with disabilities under the age of 5 to better prepare them for the school system. From this we learned the need to have an easy and quick way to upload and share files and information since the participants were so far away from each other (up to 900 miles away). It was also imperative to meet very strict accessibility standards and have a friendly appearance to educators, researchers, and parents.
Reading Clinic: Funded by the counties, these clinics provide after-school enrichment for students to get them involved in writing, reading, and performing. From this we learned the importance of a good purchase flow since every clinic cost a fee. We also learned the importance of having high visibility so the educators in school could quickly print out the flyers and share out the information with their class, which encompassed grades K-12.
Personas:
Crafting our Vision:
The Stack that Smiles Back:
Using our learning from the interviews and knowing what we were prioritizing, we both agreed that migrating towards a MEAN stack would be best. In the end we decided there was not enough time for a full rewrite before I left school and we went with a third option that we could build and deploy rapidly. We left the database, and replaced the frontend with an angular application, utilizing the bootstrap components and jquery to communicate with the database.
Information Architecture:
After landing on our stack, we decided to go ahead and start crafting how to organize the website. Taking some action words from the personas, we mapped them out basic on similarity to begin crating an IA. We focused on breaking out the similarities based on concept and also based on actions.
Wireframing:
Prototyping:
We began quickly prototyping the new website organization in a quickly mocked up website using assets from Bootstrap. We shared it around with the users we originally interviewed to gauge the ease of use and the approachability. We continued to iterate on the design until all our stakeholders felt comfortable, including the Dean of the college and the UCF branding department.
Launch:
In my last week before graduation, we were ready to push to the world!
Reflection:
Being able to work for such an incredible College that gives so much back to my community was an amazing experience. It was also amazing being on such a small team, even though resources were tight, I learned about every step in the development process. Looking back, I wish I had more time to migrate our backend services over. It was a significant challenge having so many stakeholders and having such a diverse audience. I learned so much about inclusivity as well as how important community outreach is.
