University of North Carolina System // Website Redesign

Company:
VisionPoint Marketing

Design Duration:
7 months

The homepage is one of the most important page types to increase engagement on any site. For UNC System, we showcased noteworthy news and statistics from the system’s institutions and affiliates for key stakeholders to easily access. A fun serif typeface, bright colours, clean structured layout, and subtle interactivity reinstate the professionalism and credibility of the system while alluding to the exciting work produced by the various institutions and affiliates.

Gateway Page

This page type offers more information on a specific audience type like legislators and policy makers at UNC System, as shown in this example.

Institution Listing Page

This page type displays all the UNC System institutions and affiliates in list format and with an interactive map.

Institution/Affiliate Overview Page

This page type showcases more information about an individual institution or affiliate of UNC System.

After gaining a thorough understanding of the goals and strategies for UNC System, I collaborated with the creative director and another designer to establish a direction for our concepts. Once established, I dove into sketching and creating digital compositions with plenty of team check-ins.

After many explorations, I developed two concepts to present to UNC System. The first concept was an effort to speak to UNC System’s goal of telling compelling stories, so I created a gridded approach that combined many different types of content, like photography, school and system news articles, and statistics. This concept also experimented more heavily with texture, purposeful animation/interactivity, and the system’s brand colours.

The second concept was more structured in its approach but took some liberties with interactivity. This concept focuses much more heavily on bringing content to the forefront, with little “reveals” worked in through rollover states. One thing UNC System really enjoyed about this concept is the actionable hero area with calls to action that link out to high traffic areas of the site, essentially helping users get to these pages right off the bat.

From these concepts, UNC System decided to move forward with Concept 2 while incorporating some elements from the three other concepts that were presented. After many refinements, I finalised the homepage design and built out other page types that used a consistent visual style alike to the homepage. These page types are essentially templates that UNC System will use in their content management system (CMS) to show different types of content. All website designs at VisionPoint meet Level AA of the Web Compliance Accessibility Guidelines.

Page types were delivered in batches of 3-4 pages, and UNC System provided feedback for each batch that I wove into the various iterations of were worked into the many iterations of these pages before yielding the final designs displayed above. When delivering new page types to UNC System, I directly guided them through the design decisions in a presentation.

When each batch of pages was approved by UNC System, they passed into development after being thoroughly annotated via Zeplin. During this phase, I collaborated heavily with developers to make sure the built pages matched as closely to design as possible. At times, this meant pulling up a chair next to the developer and working together to tweak things like the padding, margin, heading size, and animations. Once pages were built in development and pushed to the staging site, I conducted design and functionality QA by testing the pages across various browsers and devices, submitting tickets via Bugherd for even the smallest details, and continuing to have collaborative discussions with developers.

Looking back, this project was very much successful since UNC System was satisfied and excited about our designs throughout the whole process. I was able to appreciate the collaboration between designer and developer to a new level, realising how necessary it can be to bring these two worlds as close together as possible to achieve time-sensitive results. In doing so I was able to also see how developers work in real-time and expand my knowledge of front-end development. In addition, I was able to practice my leadership and presentation skills when I shared designs directly with UNC System, answering any questions and guiding them through decisions that aligned with their goals.

Finally, the shared success of the project team and UNC System brought to light an amazing effort in collaboration that ultimately resulted in a beautiful, usable, and purposeful design for UNC System and their users.