User Interface: Content Card System
The Story
When I started working at the University of Alabama in Huntsville (UAH) in 2019, the website was running on Joomla and Bootstrap. Because of a number of institutional factors beyond our office’s control, our Joomla and Bootstrap versions had not kept pace with software updates. As a result, the university’s website, designed in 2013, was growing stale and inflexible. In particular, the site’s design lacked a card system that could be paired with a database and a dynamic search interface to offer users easily filterable and digestible content. Newer versions of Bootstrap offer a responsive card system whose card containers feature the ability to flex their height in tandem with adjacent cards, resulting in page layouts that look clean, neat, and tidy.
The Happy Ending
The best element we had at our disposal was the Bootstrap panel container element, which lacked height responsiveness relative to its neighbors. Taking initiative, I proposed to create a custom card system that would work with our outdated version of Bootstrap to create the same effect as the fully responsive card elements that its newer siblings featured. Collaborating closely with our office’s developer, we used a combination of CSS flex properties and Javascript to create a clone of Bootstrap’s card system and unveiled it with our release of a new microsite for UAH’s Office of Student Housing. You can read the story of that site’s development and our design of the search filter that the cards work with below.
Before
After
Before
After
User Interface: Dynamic Search Filter
The Story
The current website of The University of Alabama in Huntsville (UAH) was designed in 2013. By the time I started working as UAH’s web and UX designer in 2019, the site had not been updated to reflect current trends in either aesthetic or functional web design. Perhaps the most glaring deficiency was its lack of a user-controlled content search filters for content such as academic programs and university housing. Search filters are ubiquitous on the web, and for good reason: they give the user instant control to create their own experience. They are so common that to not have them available as a tool on your website is to break one of the fundamental commandments of UX design: meet your users’ expectations. If users are accustomed to certain tools or layouts, make sure to provide it for them. Unless your organization has a rabidly loyal audience and is in the business of pushing boundaries, such as Apple, or MIT, it’s wise to respect what your users are accustomed to. Make it easy for them.
The Happy Ending
Working in collaboration with my team’s developer, I drafted a wireframe and an Adobe XD prototype of a dynamic search filter, using the Bootstrap card clone that we had previously developed together. The developer took my prototype and wrote the functional Javascript and developed the database to house the content. We unveiled it during our redesign of the university’s housing website. We are currently in development of an academic program search version to serve the offices of admissions and academic affairs. You can see a sample of that search filter by clicking on the right-hand thumbnail below.
