CNH Circle K Website Redesign
A responsive web design for a non-profit student-led service organization.
Product
California-Nevada-Hawaii Circle K International Website Redesign; Responsive Web Design
Timeline
June 2024 - August 2024; 6 Weeks
Tools Used
Figma, FigJam, Google Forms, Google Sheets, Discord, Maze
My Role
UX/UI Designer, User Research, User Interviews, Wireframing, Prototyping, User Testing
Overview
CNH Circle K International is one of 32 districts within the general Circle K organization. They are a student=led service organization that operates within California, Nevada, and Hawaii. The website serves a wide range of purposes ranging from being an informational source to a resource hub for downloadable content. When I was a former member, the website design did not change much and, even when writing this case study, has not been changed or improved.
Problem
The CNH Circle K website purpose is supposed to serve as the organization’s main source of information and resources. Unfortunately, the current design is dated and lacks organization. Due to that, the website struggles to have user engagement which leads to low website traffic and retention.
Objective
Design a revamped version of the website that gives new and returning users/members a new and cohesive, yet familiar browsing experience.
Current Website Look
In order to understand the website that I will be redesigning, I began by revisiting it to see if any changes were made to it since my time as a member of the organization years ago. Interestingly enough, little to no changes were made since my time. After confirming the opportunities of the redesign, I decided to analyze the competition to gain perspective on other websites and what patterns I can discover.
Original Homepage
The current homepage presents an outdated design with accessibility issues.
Original Club Page
The current Club page, similar to the Homepage, presents an opportunity to update the overall browsing experience.
Original Resource Page
The current design of the Resource page presents a disconnected experience from the rest of the website.
Researching Users
Research Goals
To understand how users utilize the existing site in order to pinpoint what aspects need to be updated in order to increase traffic by users and overall usefulness.
To understand the primary goal(s) of users who utilize the website.
To understand the demographics of users who utilize the website.
To learn about the pain points of users who use the website.
To learn about aspects of the website need to be updated, merged, or potentially removed.
Competitive Analysis
In order to identify opportunities for the website redesign, I decided to analyze other non-profit websites. In terms of the “competition”, I analyzed the CNH Key Club website since Key Club is essentially the high school version of Circle K and that it operates in the same areas as the organization’s website I intend to redesign. Another one was the Lions International website due to it being a “competitor” in the non-profit service organization space. And the last one was another Circle K International district website to give context of how other districts designed their websites. The goal was to gain insight in current offerings, areas that could be improved, and to address needs that users have.
After research and interviews, the data showed for a need for a website redesign in order to create an experience that is quick, efficient, and enjoyable for new and returning users.
User Interviews
In order to gather more data about potential user’s motivations, pain points, and needs, I interviewed 6 participants who live in California. These participants who have experience with non-profits and navigating them. Primarily, I was interested to learn about:
What purpose would a user have to access an informational or non-profit website?
What tasks does a user who accesses such a website intends to complete?
Thoughts on the current version of the website.
What attributes of website appeals to users who access a website for the first time and those who access them often?
A challenge that I encountered was working in a different timezone from my interview participants. During the user interview process, I was working from Europe and had to adapt in order to gather data from my participants. I was able to successfully gather my data by adapting my interview into survey form that would be on the same level as if I were interviewing them in-person or remotely. And thanks to that adaptation, I was able to gather 4 key insights from my affinity map:
The results after interviewing six participants and gathering data on their experiences with non-profit websites.
What is the Purpose?
Users do not like it when there is not a clear point in a organization’s website, especially when important information cannot be easily found.
Back to the Present?
Modernizing a website has many advantages, especially for users. Revamping gives websites an opportunity to take a fresh new take on what was. It also gives users the opportunity to have a better overall browsing experience. And when it comes to a website that is supposed to be a resource, having users to utilize it should be the goal.
Inconsistency = Confusion
Users need a consistent and accessible browsing experience to prevent confusion and users from not using the resource. When presented with an experience that confuses them, they tend to click off.
Time and Fun?
Most users do not spend much time in general on non-profit websites due to using them for specific tasks. Being able to give users an experience that is fun to use, accessible, and easy to use for all experience levels should be a priority for any website with multiple uses.
Getting to Know the Users
In order to understand on how to create a revamped version of the CNH website that user would use, I set out to utilize the data I collected to develop several resources I could use to assist me to develop a proper resource. Being able to understand the needs and pain points of users is important to me in order to keep me grounded and focused on due to needing to create modernized version without straying from the organization’s values and existing style guide.
Empathy Map
In order to properly meet the needs of users, I created an empathy map to assist me in visualizing what people who utilize non-profit websites think, do, say, and feel. Utilizing empathy maps helps me get into the mind of my users which allows me to begin developing an idea for how I want to redesign the website.
Based on the empathy map, I knew that I had to create a modernized version from the current one while keeping certain attributes in order to not alienate users who but to also attract and retain new ones.
Creating Storyboards
Being able to visualize situations that users would be in when using the revamped website is something that I always look forward to doing due to how it assists me in coming up with ideas of how the new version of the website should look in order to solve their needs. To do so, I developed two scenarios to identify possible opportunities and potential roadblocks.
Storyboard #1: Danny is a transferring college student who has been a member of his club’s Circle K chapter for a few years and is trying to find out if he can continue his CKI career at his new school.
Storyboard #2: Sam is a newly appointed graphic designer board officer for their club and has been recently asked to create a newsletter that will be submitted to the district board.
Creating Personas
After creating the two storyboard scenarios, I wanted to dive deeper into understanding my users. So utilizing the insights, and interviews, I created two personas describing two types of users based on the storyboards I created. The first persona I created describes a user named, “Danny” and the second persona describes a user named “Sam”. Since I thought it was important to create a modern and updated version of the website, I used the first persona of “Danny” to guide me through the redesign. I also utilized the second persona, “Sam”, to guide me through the later part when I was able to fit it within the development timeline.
I utilized Danny as the primary persona during the website redesign.
I later utilized Sam as the secondary persona once I realized that using both would help me keep in mind what other purposes the website serves.
Point of View (POV) and How Might We (HMW) Statements
After developing a deeper understanding of my users through my empathy maps, storyboards, and personas, I wanted to address issues that my users face with solutions that will, hopefully, solve them. I knew that the general goal for the redesign was to increase overall usage of the website from new and returning users. So, as a result, I created 4 sets of POV and HMW statements:
POV Statement #1: I’d like to explore ways to restructure the website’s menu or general navigation paths to make it easy to use for users of all experience levels.
HMW Statement #1: How might we improve user general experience and navigation with CNH Circle K’s website?
POV Statement #2: I’d like to explore ways to organize important information in a more structured and streamlined way in order to attract new or potential members and increase membership.
HMW Statement #2: How might we create ways to inform new or potential users of the organization in an efficient, cohesive, interactive manner?
POV Statement #3: I’d like to explore the expectations of users who are members of CNH Circle K or even Circle K International and those who are not in the organization.
HMW Statement #3: How might we reflect the expectations of users who are members and those who aren’t?
POV Statement #4: I’d like to explore ways to enhance the usability and accessibility of the school searching feature so that potential, new, or experienced members can see if a chapter is active, in process of being chartered, or inactive.
HMW Statement #4: How might we redesign the school search page/feature to make it more attractive and enjoyable to use?
After considering my timeline and what the redesigned website would need in order to retain its purpose, I decided to focus on all of the statements in order to revamp the website without removing part of the original experience and modernizing it.
Feature Set
As I was nearing the actual development process of redesigning the website, I knew that I had to create a list that gave priority to certain features so that I could follow the timeline that I have set for myself. Due to time constraints, I was required to focus on the features that were high priority or ones that grew to that level during development. I was not able to develop the following features:
Search and Filter
Sticky Menu: Did not have enough knowledge at the time on how to create a Stick Menu. If given the opportunity, will implement the feature.
Revamped Event Calendar
If given the opportunity, I would like to revisit this project to see the possibility of adding the features I was not able to add or to see what new features that could be considered.
The feature list presented, albeit short, shows the focus on a redesign and the addition of information or features to improve the user experience.
Design and Prototype
After conducting the research, building empathy for the users of the redesign, and deciding on a list of features based on priority, I began designing the experience by keeping these aspects in mind:
Modernizing the website while being able to not alienate returning users and keeping aspects that will help users familiarize themselves with the new design.
Redesigning the website to attract and retain users.
Increase website traffic and overall usage from potential and returning members.
CNH Sitemap & Flows
Based on research findings, I identified certain tasks that users may be completing when accessing the redesigned website. I took all of my created resources from affinity mapping to personas to create a sitemap that will address the needs and pain points from users. Once developing the sitemap, I was able to define the specific task flows that users will be completing when navigating through the website. The following task flows are as follows:
User Researching Existence of CKI Chapter in a School or Division
User Finding Graphic Assets
This initial sitemap assisted me in the creation of the layout of the website redesign. Over the development of the redesign, I learned that I would be unable to develop certain screen or pages due to time constraints. For example, I was unable to create “Events Calendar” and “Leadership” pages. If given an opportunity, I would like to go back and develop those pages.
When I was studying other competitor websites, I noted how clean, efficient, and streamline the navigation process is for non-profit organization websites. In order to be competitive, I wanted to create a similar experience for the redesign.
Wireframes & Iterations
In order to begin the process of deciding the layout of the redesigned website, I developed Lo-Fi wireframes. For this project, I knew the goal was to develop a project for desktop, tablet, and mobile. So I decided to develop the wireframes for desktop first since I would use that as a jump off point to develop for the other devices.
While designing, I kept myself grounded by reminding myself of the three aspects mentioned earlier:
Modernizing the website while being able to not alienate returning users and keeping aspects that will help users familiarize themselves with the new design.
Redesigning the website to attract and retain users.
Increase website traffic and overall usage from potential and returning members.
These Lo-Fi sketches show the initial version of the main screens that I would soon use as starting points when developing the advanced wireframe versions.
After developing Lo-Fi wireframes, I conducted user testing sessions with several participants to test the design for general usability. At this point of the development process, I was still in a completely different time zone from my participants and, because of that, I was unable to conduct in-person or supervised remote testing. So I adapted my interview questions to extract the maximum amount of data from them in a survey form. And after taking the collected information, I considered potential changes that I could make to the design as I developed the wireframe into Hi-Fi. During this point in the development, I experienced a creative blockage that slowed my design progress. After taking time to reset myself and allowing myself to look at my work with a fresh pair of eyes, I was able to make steady progress, which is seen after user testing and iterations.
Desktop
This image represents the Hi-Fi desktop wireframes of the redesign before user testing and iterations..
Tablet
This image represents the Hi-Fi tablet wireframes of the redesign before user testing and iterations..
Mobile
This image represents the Hi-Fi mobile wireframes of the redesign before user testing and iterations.
At this point in the development process, I returned back from overseas and was able to work in a familiar timezone. I conducted several in-person and remote tests to view the usability of the redesigned website. In order to measure the effectiveness, usability, and overall user satisfaction, Ranging between 18-30 years old, I had the participants complete two tasks:
Researching the Pasadena City College in the Moonlight Division on the California-Nevada-Hawaii (CNH) Club page.
Navigating to the Resources page and accessing the District graphic assets.
After testing, all five participants had a 100% completion rate while exploring the redesigned website and displayed ease of use when exploring the new version. In terms of positive feedback, participants described several aspects of the layout that they liked:
In general, all participants expressed a liking to the new interface.
Reported the interface to be “straightforward, accessible, simple, modern, interactive, easy to navigate, etc”.
Reported to have positive experiences with the redesigned “CNH Club Page” and “Resources” screens.
In terms of recommendations and potential opportunities for design improvement:
Participants recommended a variety of changes:
Photos on Hompage to be made a bit brighter.
Larger navigation buttons.
Brighter button colors.
After analyzing the data, I gathered a few opportunities to consider for the iteration of the design:
Retouching the Hero photos on the Homepage.
Increasing the font size of the menu navigation options.
Removing or keeping chevron lines on the “Club” page.
Changing the button color or brightness.
Iterations
As mentioned earlier, I gathered data from my interview participants and was able to find opportunities for improving the revamped website design. In terms of changes, there were not any massive changes between the first draft and the final product. The reason for that is because the participants generally did not have any negative experiences when completing the tasks during testing. And thanks to the testing results, I was able to implement most of the changes that the participants recommended and some quality of life edits to make images or texts easier to read. For more information regarding the changes, these are the main ones I made:
Retouched my hero photos to make them slightly brighter
Changed the font size of the menu navigation
Changed font weights to certain text
Most of the iterations made were universal throughout the three devices that I designed for but I will be highlighting some of the most notable ones below.
Desktop Iterations
Left: The image to the left represents the old version of the desktop homepage.
Right: The image to the left represents the new version of the desktop homepage post user testing. Please note the heavier typography used and the use of a single color to highlight specific words.
Left: The image to the left represents the old version of the About Us page.
Right: The image to the left represents the new version of the About Us page post user testing. Please note the heavier text and paragraph orientation to improve text readability.
Left: The image to the left represents the old version of the Club Page pop up page.
Right: The image to the left represents the new version of the Club Page pop up page. post user testing. Please note the heavier text improve text readability and show text hierarchy.
Tablet Iterations
Left: The image to the left represents the old version of the Resource page.
Right: The image to the left represents the new version of the Resource page. post user testing. Please note the heavier text improve text readability. And based on user testing, I also brightened up the Hero photo.
Mobile Iterations
Left: The image to the left represents the old version of the Resource page after a selection has been made.
Right: The image to the left represents the new version of the Resource page. post user testing. Please note the use of interactive buttons instead of dropdowns due to accounting for mobile space.
Final Hi-Fi Wireframe, UI Kit, and Prototype
After conducting user testing and using the data to make considerations to change the design of the screens or layout, I ended up with the final product below. As stated earlier, many of the changes that were requested were just quality of life changes ranging from making Hero photos brighter to making text easier to read by making them heavier. The goal of the redesign was to keep the essence of the original while also modernizing the design to allow old and new users to complete any task they set out to do on the resource.
Desktop Hi-Fi
Tablet Hi-Fi
Moble Hi-Fi
The following image represents the final prototype of the Desktop version of the redesign.
UI KIT
For the website redesign, I knew from the beginning that it needed to be revamped to be a modern and intuitive resource for members and non-members. To improve upon what was and to stay true to what the original website set out to do. So the choices I made had to follow the organization’s values and already existing graphic assets. As a former member of the organization, I am familiar that graphic assets and style guides that are approved by the organization’s district board that are used in all official media. So as a result, most of the decisions that I had to make were on the dropdown menus, cards, and the typography used. The other assets from the colors, the banner headers, district logos, and divisional logos are all assets approved by the district board.
Reflection
This project allowed me an opportunity to reconnect with an organization that gave some of the best memories of my life. I learned that having an emotional connection to a project helped me stay focused on what I set out to do for the redesign.
That idea of improving upon the website design to increase usability and ease of use for current and future members was very inspiring and gave me motivation to complete this project even if I was across the ocean in a completely different timezone. And through that unique experience is a lesson that I have learned a great much amount about while overseas. Besides that, I encountered challenges of interviewing participants, adapting interview questions, and usability testing. It was a humbling, yet exciting experience that I look forward to having again in the future.
Even though I faced all those challenges, I still enjoyed the development process and created a redesign that I am very proud of. Being able to push through the difficulties while doing my best to create a product that not only fits my own design philosophy, but also with the organization that I am working with. In terms of time constraints, I was not able to fully develop all the screens to represent the whole potential experience. I was only able to develop a skeleton version that supports the essential journey a user would take if the website were to be used.