CNH Circle K Website Redesign
A responsive web design for a non-profit student-led service organization.
Timeline
June 2024 - August 2024; 6 Weeks
My Role
I worked on this project as a solo designer under the supervision of a mentor. I was responsible for all of the discovery and design deliverables.
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, lacks organization, and the occasional update. 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.
Getting Started
Discovery
After the research process and discovering opportunities for improvement, I noticed that the following 4 pain points consistently came up during the interviews:
Over the course of 6 weeks, I worked with past and current members to create a revamped, yet familiar design of the Circle K International California-Nevada-Hawaii District website. The website has been a longstanding resource from the organization and uses a fairly simple style guide.
The work began with analyzing the current website, interviewing participants, and collecting data to decipher the challenges users face when using it. Doing so allowed me to get an idea of what pain points needed to be addressed to improve the user journey and overall website usage.
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.
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.
In order to understand what I will be redesigning, I began by studying the current version of the website to begin the process of noting improvements that could be made to it. I also conducted a competitive analysis on other non-profit websites to view how their websites were constructed and the user journey.
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.
Development Begins
Utilizing the data collected from the competitive analysis and the interviews I conducted, I created 2 personas that would help me personify the needs of the users. Both personas represented two different types of people in unique situations to help me develop the redesign with them. When I was studying other competitor websites, I noted how clean, efficient, and streamline the navigation process was for non-profit organization websites.
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.
The next step was to develop the site map in order to create a revamped, yet familiar user journey. I knew creating a whole new experience would confuse current and past users if they would use the redesigned product. So as a result, I examined the current website and flow that users would take to complete certain goals while keeping the goals of the created personas in mind in order to focus on for the next stage of the project.
Design Updates
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.
Auditing the current website’s fonts, components, accessibility issues, functionality, and dated layout were some of the necessary steps that I needed to take when developing the iterations. Something to note: All of the design changes from desktop followed to tablet and mobile.
Iterations
Post-testing, 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
Desktop Iteration
Left: The image to the left represents the old version of the desktop homepage.
Tablet Iteration
Right: The image to the right represents the new version of the desktop homepage post user testing. Note the heavier and larger typography used and revamped layout.
Left: The image to the left represents the old version of the Our Clubs page.
Right: The image to the left represents the new version of the Our Clubs page with the addition of a search bar and new drop down navigation bars.
Mobile Iteration
Left: The image to the left represents the old version of the mobile resource page.
Right: The image to the left represents the new version of the mobile resource page with the addition of a search bar and new buttons.
Reflection
After 6 weeks, the website redesign was complete. The goal of improving upon the website design to increase usability and ease of use for users was completed even though I was working in a completely different timezone at the time. And through that unique experience is a lesson that I have learned a great much amount about while overseas. I encountered challenges of interviewing participants, adapting interview questions, and usability testing.
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.