Software@WFU is the “software download hub for Wake Forest University.” Redesigned and redeveloped in 2021, the new site fixed a number of existing navigation and usability problems.
Goals
The old site was designed by a contractor and developed using an early Javascript framework. The site lacked basic URL-based routing, making it impossible to link to ‘Software Items’ and ‘Install Guides’–a definite UI and UX impediment for our users.
We had several goals with the new site:
- Resolve the navigation and usability problems
- Reduce the number of support calls to the Service Desk
- Keep the existing WordPress database
Requirements and Feedback
I worked to gather requirements from our Service Desk, met with students in the Student Technology Advisory Council (STAC), and consulted our Academic Technology group.
There were several interesting findings:
- The university offered ‘web-based’ software that did not have an associated download. Historically, web-based software was not featured on the site, but users wanted to see all available software in one place.
- Students desired to know what they needed before installing software–for example, a license key or special permission. They also wanted to know how long it was going to take to install software.
I began to wireframe and mockup a new software site experience, incorporating web-based and downloadable software with an increased focus on delivering the user more information.
Simplifying the User Interface
I designed and developed a straightforward user interface, consisting of a dynamic homepage for viewing software and simple download pages with all the information a user might need.
Homepage
On the homepage, software is filterable via simple form elements on the left-hand side and sortable by ‘alphabetical’ or ‘popularity.’
Download Pages
We designed download pages to contain all of the information a user would need to learn about, download, and install software.
An attractive ‘header’ features an introductory blurb, image, and links to download or learn more.
A ‘metadata’ section was added to provide additional context–importantly, the ‘Required to Install’ information students had requested.
The ‘Before You Begin’ region explains any required licensing or special request procedures.
Install Guides
We had dozens of existing ‘Install Guides,’ instructions for installing and updating software for various operating systems and such, that we needed to keep. The original tabbed interface was unintuitive and did not allow for sorting or filtering.
I created a taxonomy to categorize the Install Guides as follows: Install, Update, Browser Extension, License, and Activation.
Install Guides are displayed at the bottom of Download pages in a dynamic region that updates upon selection of a guide. If a user is not logged in, they are automatically redirected to a Google login page, otherwise the guide opens in the region for easy access.
The user’s operating system is automatically determined and guides are filtered–though this can be overridden, of course.
I developed a simple hash-based router that appends the guide name to the URL. The Service Desk can send a user the download page and guide in a single link, and when the page opens the browser automatically scrolls down to the desired guide.
Notes on the Tech
I wanted the benefits of fast navigation and reactive components found in Javascript ‘single-page apps’ while maintaining URL-based routing. I also needed to stay within the confines of WordPress which comes with server-side routing and data-loading already.
I rebuilt the Software site with Inertia.js, a frontend library that allows one to develop modern single-page apps utilizing existing server-side routing and controllers, and Svelte.
The result is a fast initial page load consisting of a < 50kB Javascript bundle. Subsequent route changes are completed with XHR requests to the server for data and the loading of minuscule, code-split Javascript files for frontend changes.