Ascension Press
Timeline: June – September 2022
Deliverables: Optimizing Landing Pages
Team: Corporate Marketing Team Ascension: Josh Rudegeair and Gregory J Cole
Role: Web/UX Designer
Tools: Figma, Shopify, Shogun & WordPress
Ascension Press is a Catholic publishing company that was founded 20 years ago. Ascension creates valuable resources, media, and study programs for the Catholic community. They have relied heavily on their website to promote and share Catholic material. Ascension has seen a large rise in the number of people purchasing materials through their website since the Covid-19 pandemic, and with all the new users on Ascension’s website came issues with the site’s user interface and user flow.
Background:
Re-access the user flow of the website to optimize product pages
Design landing pages via Shopify & WordPress for popular products
Objectives:
Step 1: Empathize
I was tasked with designing Ascension's landing pages. In doing so, I had to make sure that they were accessible to all users and followed Ascension’s brand guidelines. While interning, I was given the opportunity to design different landing pages including those that are now live on the Ascension site. One of the largest projects I worked on was designing the new landing page for The Holy Bible - The Great Adventure. Prior to my internship, The Holy Bible - The Great Adventure only had a product page and did not have a landing page, so I was tasked with designing a new landing page from the ground up.
“How might we design a landing page to make The Holy Bible - The Great Adventure more accessible and user-friendly?”
When given the task of designing landing pages, I first needed to understand what Ascension stood for as well as get a better understanding of its targeted users and brand guidelines.
Problem
Prior to designing any wireframes, I needed to know who the Ascension user was and where/how they viewed the Ascension site. For this, I looked at research from different studies and surveys that Ascension has sent out to its users. From this research, I found that Ascension's main users were 55+ (from the generations Gen X and Baby Boomers). Of this age group, almost three-quarters were female (data taken from email subscribers). This information allowed me to better understand the targeted market’s characteristics which allowed me to begin ideating what the landing page would look like. While researching how the user interacts with Ascension’s site, I found that over 50% of the total user sessions were via mobile devices while only 34% were from desktop devices. With this important information, I was able to focus on prioritizing the mobile user flow for the landing page of The Holy Bible - The Great Adventure.
User Persona/Research
Armed with the knowledge of who Ascension’s main user is, I then moved on to ensure that all of my new designs were within Ascension’s brand guidelines. The main fonts Ascension uses are Sentinel and Trenda, and when those are not available (such as in Microsoft Word or Powerpoint), Georgia and Century Gothic are used. When looking into the color palette for the Ascension brand there are only 6 approved colors that can be used when designing any graphics for the brand (as seen below). In designing the final high-fidelity mockup landing page I made sure to follow these guidelines.
Brand Guidelines
Step 2: Define/Ideate
Prior to ideating, I also needed to acquire a better understanding of what content was going to be shown on the page for The Holy Bible - The Great Adventure, as well as, receive feedback from the Corporate Marketing team on how they wanted the page to flow. My team then supported me with all the media content needed to create the landing page. The Corporate Marketing team wanted the landing page to be aesthetically pleasing and shared with me different websites from which they wanted to take inspiration (wordonfire).
Task Flow
Sketches/Ideating
Now that I was better able to understand the user, brand guidelines, user flow, and overall ideas for the user interface, I began creating a low-fidelity wireframe for the landing page. I designed the low-fidelity wireframe using Figma and created the user flow based on what my marketing team wanted (as seen below).
Step 3: Prototype
Website Design - High Fidelity Wireframe
After showing my team the low-fidelity wireframe, they approved the design and asked me to begin creating an unpublished version of the page via Shogun (a plugin on Shopify). Throughout this transition from Figma to Shogun, I made sure to get feedback on all the design changes being made.
Once the design was recreated in Shogun, I went through all of the media supplied to me for this specific landing page. I had multiple meetings with my team to go over what content would be best. Many of our decisions were based on data from Google Analytics and HotJar heatmaps of the landing pages for different products. After choosing the content that would be shown, I was now able to use the brand guidelines to create the high-fidelity wireframe. While creating the page on Shogun, I made sure to use the appropriate fonts and sizing (from Ascension’s brand guidelines) because I did not want the page to look off-brand or to be inaccessible to users reading it.
Once I finished adding all of the media and content onto Shogun, I wanted feedback from more people outside of my team. I decided to send the unpublished page to the Marketing and Media Team, which together consisted of more than 20 people. After inquiring about my progress, I was able to gather valuable feedback.
The Takeaways:
Have videos automatically play when scrolling through the landing page
Smaller text sizing on quote cards
Add more animations to the page, having information “appear” slowly when scrolling
Get better quality images for Bible in a Year - The Great Adventure
After receiving feedback, I was able to change the high-fidelity wireframe and inquire again if those changes made were to the team's liking. One of the changes that were out of my control was getting higher-quality images. After speaking with my employer about the importance of high-quality images, I was able to get funding to hire a photographer to solve that issue.
Finally, the unpublished page was completed and approved to be published on the live website. The photos on the live page are not up-to-date as the photographer we had hired was unable to perform to our standards and a new photographer is currently in the works. The photos will be updated by the team as per my outlines when they are finished.
Since this page is brand new, there was no prior page to compare data from. In order to ascertain how the new site was performing, I collected data from Google Analytics engagement reports after having the page live for two business cycles. By implementing Google Analytics, if in the future changes were to be made to this page, my team would be able to compare data points on those changes and their overall effects.
Publishing Live Webpages
Step 4: Moving Forward
My internship at Ascension has helped me grow tremendously as a designer. This project specifically has taught me the importance of obtaining feedback even when you believe you are “finished” with the design. I also learned how critical data skills are in order to back up every decision made. In the future, I plan to continue to grow in these areas, to help other companies flourish in their own website capabilities.