Nebraska 4-H Website
Problem:
The Nebraska 4-H website was transitioned from the Liferay content management system to Drupal in 2014. As a result of the migration, the website was in need of major front-end clean up and management. Additionally, without regular and consistent content management over the past couple of years, the overall user-experience, visual identity, and web content had become outdated. At the same time, Nebraska 4-H was beginning its adoption of the National 4-H Grows Here branding campaign.
Solution:
A complete site redesign was necessary. This would allow Nebraska 4-H to launch its adoption of the 4-H Grows Here campaign with a large impact, update all the web content, and address user experience issues. The redesign process began by reworking micro-sites within the 4h.unl.edu website. Once all of the major micro-sites were relaunched, the top-level pages of the site were then redesigned along with the overall site navigation.
Result:
Since taking over management of the site in 2016, the overall bounce rate has dropped a total of 21.96%. As a result of consistent management and search engine optimizations (SEO), the site's organic search acquisitions increased by 17.25% in 2017.
Role:
-
Web Manager
-
UX/UI Designer
-
Visual Designer
Team Members:
-
Tracy Pracheil, content editor
-
Kim Novotny, content editor
-
Hannah Opfer, content editor
-
Lisa Spilker, content editor
-
Peta Clatcher, content editor
-
Lisa Karr, content editor
-
Lena Luck, content editor
-
Lindsay Shearer, content editor
-
Brandy Wagner, content editor
Tools:
-
Drupal Content Management System
-
Adobe Illustrator
-
Adobe Photoshop
Recognition:
-
North Central Region Communicator Award for a Promotional Package by a Team, National Association of Extension 4-H Agents. 2017.
-
Nebraska Communicator Award for a Promotional Package by a Team, Nebraska Cooperative Extension Association - 4-H Section. 2017.
The Nebraska 4-H website was designed using a responsive grid format which optimized content for various screen widths. Custom responsiveness was established for each page using UNLedu Web Framework CSS.
While regular ad hoc enhancements were implemented as needed, many microsite redesigns required more in-depth redesign processes. For microsites redesigns, quick sketches and wireframes were developed collaboratively with content specialists and program coordinators.
As needed, microsite mock-ups were created using Adobe Illustrator and were used to facilitate conversations with content specialists and program coordinators. Site and microsite information architectures were also created and evolved throughout the development of the website.
homepage
program landing page
program landing page
homepage
Pages and microsites were redesigned and relaunched section by section and page by page. Pages were coded with custom HTML and CSS. New features were also added using Javascript. New content types, views, and templates were built as needed.