Federation of Students (Feds)Website Redesign
A website redesign moving from Wordpress to Drupal with an enhanced User Interface (UI)
Project Overview
The creative brief to ensure alignment on overall goals, scope, roles, stakeholders, milestones, timelines, etc.
.png)
Federation of Students (Feds) Website Project Overview
Enhance the look and feel of the Feds website making it easier for students to find information, alignment with the University content structure, and increase student and staff satisfaction.
- Enhanced look and feel of the website in alignment of the Feds branding strategy
- Alignment with the larger university content structure
- Alignment with current WCAG accessibility guidelines
- Increase user (students and staff) overall satisfaction
- Design researcher
- UI designer
- UX design and strategist
- Front-end developer
- Optimal Workshop: TreeJack
- Adobe XD
- Drupal 7 Framework
- HTML & CSS
Insights with Feds Students
Collecting input direct from our students and staff.
.png)
Design Research
During the annual Student Learning Centre (SLC) Open House event, we ask students, what do you like about the current Feds website and what do you dislike?
A few of the student responses included:
A few of the student responses included:
- Event calendar is easy to find
- I like to see job opportunities
- Easier access to the pub information
- Faster load times
- Updated to a more modern look
- Club information is out of date and links are broken
- Improve search
We surveyed our student leaders working within Feds who rely and utilize the website on a day to day basis and have an understanding of its history. Gauging the sentiment of this student group, will help us to understand their challenges and sentiment towards prospective changes.
Key Result (similar to students):
Key Result (similar to students):
- Needs to be modernized with a refreshed look
- A better mobile experience
- Easier to find content
- An update to the site is highly encouraged and needed
Content Structure
Evaluation and organization of content is the foundation of a solid and well organized website.
.png)
Information Architecture (IA)
We lead three rounds of open card sort exercises with students and staff by writing out content topics on an index card. Each group was tasked with sorting the cards into relevant groupings and label them with a heading. Participants were also able to eliminate any topics they felt did not belong as well as add topics that were not provided.
.jpg)
.jpg)
Findings
- Each group had slight variations but overall there was a consistent theme to all three structures
- Providing incentives (in this case a gift card) for student groups proved to be highly valuable. Without the incentives, we would not have had a large enough pool of participants to obtain a well rounded result.
Based on the data analysis from the three open card sorting exercises, we defined a consolidated content structure to put to the test. Using Optimal Workshop’s TreeJack platform, the structure was entered into the system. We asked students to navigate through the structure to find the page they believe contained the information provided in a series of tasks.
Findings:
Findings:
- We looked closer into the areas where users had a difficult time locating the correct destination, and was able to adjust by relabelling or slightly altering the structure to provide clarity.
- The interactive graph provided by TreeJack, gave insights into the journey which users followed and identified precisely where they deviated, turned around, or abandoned the task, pinpointing where issues were encountered.
Sample results provided by TreeJack test analysis.
Generating Creative Concepts
Generating and evolving concepts into potential solutions .
.png)
Ideation
I began putting some structure around ideas with simple paper and pen. I sketched out basic concepts, component types, and some structural and layout ideas. Sketching allowed me to create, iterate, and even discard quickly and easily.
I created wireframes in low fidelity. Low fidelity wireframes were essential for focusing on areas such as layout, priority, order, and balance. These wireframes were easily adaptable and afford the flexibility to adapt to the input provided. In this case study for Feds, 4 wireframe concepts were selected and brought forward to stakeholders for feedback.
Results and take-aways which came from the feedback include:
Results and take-aways which came from the feedback include:
- a sense of order for desired components
- general component structure and concept
- a hybrid solution based on the proposed wireframe concepts
Expand Ideas to Visual Concepts
Evolve concepts with brand to create visually pleasing and engaging high-fidelity solutions.
(2).jpg)
Prototyping
High fidelity concepts beginning with the homepage were created based on feedback and discussions of the wireframes. We selected 4 variations to present to the marketing & communications team and project stakeholders.
Results:
Results:
- Overall, the look and feel was good
- Redefined and altered a few sections to better align with maintenance strategies and desired output for students
- Discussed the section options in each of the 4 variants to determine what would provide students with an optimal experience. For example, how many events, news, and feature item should or will we need to display at a given time.
I consolidated feedback into a single UI concept. Within a few iterations, we were able to collectively agree and universally excited to move forward with a single concept.
Aesthetic & Functional
Bringing designs into fully responsive and functional websites.
.jpg)
Front-End Development
The Feds website was required to be created on the Content Management System (CMS) the rest of the University uses. Considering Feds runs separately, the University web team together with the Feds project team, decided the best strategy would be create a sub-theme that will be created and maintained independently by the Feds team while sharing the CMS.
The majority of the development was writing HTML and CSS to create the Feds sub-theme. I was highly connected with the University web team to ensure we were in compliance with protocol, requirements, and meeting technical expectations.
With the theme created, we ran a few additional tests including a codebase format check, an accessibility compliance audit, loading time, and browser compatibility. After further iterations cleaning up the last of fixes, we were ready to launch.
Conclusion
Results of the hard work and efforts along with some lessons learned for future considerations.
.png)
Wrap Up
The Feds website was required to be created on the Content Management System (CMS) the rest of the University uses. Considering Feds runs separately, the University web team together with the Feds project team, decided the best strategy would be create a sub-theme that will be created and maintained independently by the Feds team while sharing the CMS.
159%
Increased engagement over the previous year
192%
Increased users over the previous year
- When conducting in-person user tests all participating facilitators need to be disciplined when speaking. Providing clarity and direction is what we’re there for, otherwise, maintaining an unbiased point of view is imperative.
- Feedback is a gift! Be grateful for all feedback and criticisms even when they are less than positive. It is not personal and can be very beneficial to the overall project. Provide a space that is open and honest to allow folks to speak to their true experiences and impressions
- It is not realistic to please everyone. Remember your target audience(s), their needs, and requirements as a priority.
- It is ok to make a list of items or features to come back to. Ensure the delivered solution is robust in its release, however you can continue to work to enhance or add new features at a later time.
- Avoid presenting too many options to stakeholders. I found 2-4 concepts to be ideal. Be sure not to include options you as a designer cannot live with (that might be the one they select)