Core Team: Monica Bosque, Web and UX Designer in close collaboration with the SJSU University, Marketing and Communication's Interim Associate Vice President and University Writers.
My Role:
• Developed a visual style that still connected with WSQ's main identity
• Designed core template and component blocks
• Built out and designed the final pages that are optimized for mobile view
• Designed new creative assets as needed along with photo editing and optimization for web
• Developed a visual style that still connected with WSQ's main identity
• Designed core template and component blocks
• Built out and designed the final pages that are optimized for mobile view
• Designed new creative assets as needed along with photo editing and optimization for web
Project overview
SJSU's University Marketing and Communications team aimed to launch a Year in Review series that was tied to our WSQ university magazine. Our initial attempt utilized our campus blog platform which did not offer an impactful delivery of our moments at SJSU. I was tasked with leading the development and design of our first more formal launch of our Year in Review using our Foleon platform which offered a more interactive experience with flexibility in design.
With about a 1 month timeline to our target launch of the last day of the fall semester in December, the editorial team worked quickly in outlining the content we wanted to feature. From there, I outlined the order in which each piece would be presented on a single landing page — grouping content with similar themes. Once finalized, I began planning the design of the page.
Extending WSQ's digital identity
Since this series would be set up as a "WSQ presents..." — I kept the style of the navigational elements the same along with a reduced color palette with our SJSU blue and gold and two of the additional shades of blue for the gradients. For typography, for a more playful but still modern look, I leveraged our custom typeface Pride. This typeface is often utilized in marketing materials from our Athletics department and for more celebratory events and programs around campus. I kept Nunito Sans for our paragraph style, which is a web-friendly and modern sans-serif font. Overall, it offered a fresh look and feel that still felt connected to our magazine.
A reduced color palette of our university colors along with our Pride custom typeface gave the page a very prideful and fun feel.
Finding the right hero — and animating it!
For the cover, I experimented with a few of our favorite shots from our photographers. We looked at selects that showcased campus life to students working in the field — but we ended up loving this one beautiful shot of a student in a moment right before they walked the stage at commencement. It felt like the right option for our cover showcasing what we all work up to at SJSU.
I also saw an opportunity to amplify the impact of the cover by animating the lights in the background.
A GIF version of our animated cover of a student about to walk the stage in commencement. A few of the additional details I enjoyed is the blue hair of the graduate with their blue and gold stole (celebrating the colors of our university) along with the subject being framed by the lit up spartan heads in the background.
Creating rhythm and flow throughout the page
Once the hero was set, I began developing the design of each block for the page. One of my main goals with this landing page was to create enough variation in each block to keep the reader interested but repurpose enough of each pattern that it felt unified and purposeful.
It was important to create a few block styles that were flexible enough to repeat throughout the page. I added slight modifications to each one with background patterns and colors.
Fun with gradients! I experimented with creating a layering effect with gradient backgrounds — a treatment that was different from WSQ magazine and added to the fun and celebratory quality of this series.
Final design
With the approach in place, I was able to have a lot of fun with the design of each section that worked with and highlighted the assets we were using. We were very excited to launch this series and find a new way of sharing the highlights and milestones throughout the year at SJSU.
Analytics and insights
As this was our first series, we introduced and promoted the page through a New Year email message from the president along with social media promotion. Our team was unsure how it would perform given the timing right after commencement and folks going on break, but were pleased to see our analytics and heat map results.
• Total page views: 856
• Average session duration: 3 min 48 seconds
• Average session duration: 3 min 48 seconds
The heat map showed yellow and red to the mid-point of the page with the majority of green and slivers of blue sections the rest of the way down. With this in mind, we will aim to shorten the page significantly for the next version.
Special shout-out from the Foleon team!
The team at Foleon, which is the platform we use for this series, loved our page so much that they offered us a shout-out on LinkedIn. Check out what they had to say about our Year in Review.