top of page
Center For Sustainable Development International
Context
Overview
Center For Sustainable Development (CSDi) is a service providing education on climate change and conservation. I performed a heuristic evaluation on the current website, and used insights gained from research to redesign the current website to increase in-site purchases in the North American markets
Client
Center For Sustainable Development
Product
Responsive website
Duration
4 weeks
Role
Solo Project
UX Designer
UX Researcher
Tools
Figma, Wordpress, Maze
Business Problem
Center For Sustainable Development has faced a steady decline of in-site class purchases from individuals in North America since 2019. The current site has not been updated since 2016
Business Goal
Center For Sustainable Development wants to increase program sign-ups in North America, specifically environmentally stricken areas
92 percent visitor bounce rate
Wants to increase sales 60 percent this year
Sales down 65 percent since last year
Target cities impacted heavily by climate change
Design Challenge
How might we update the current website and increase class sign-ups in the North American market
Increase usability of website to promote sign-ups and reduce bounce rate
Design Process
Usability testing results
Iterations
Microsoft Fluent
Current site usability test
Heuristic Evaluation
User flow
Prototype
Competitive analysis
Information Architecture
Usability Test
I conducted usability tests with 6 different users aged 21-45 in North America as that is the target user
Why?
I did a usability test on the current site to identify downfalls and usability issues that are contributing to a decrease in in-site class sign-ups. Ideally these usability issues can be addressed and iterated on to improve site functionality
Usability Test Focus
-
Understanding navigation
-
Using search function
-
Identifying class categories/ sub cate
-
Finding a class users are interested in
-
The process to sign up for a class
Usability Test Insights
Many links open new tabs with no back option, frustrating users
Users struggled to create a mental map of website
Hidden search function caused irritation and disabled the users happy path
Users experience cognitive overload upon homepage arrival
Competitive Analysis
I completed a competitive analysis with 4 other educational websites, and 1 e-commerce site including Udemy, Coursera, General Assembly, and Amazon.
Why?
I completed a competitive analysis to identify important UI features as well as navigation flows of other sites to incorporate into CSDi's website to make it more efficient and usable.
Analysis Focus
-
Search function location and implementation
-
Understanding information architecture and navigation
-
Understanding product card layout and displaying relevant information
-
Identify key accessibility features offered on other websites
Competitive Analysis Insights
CSDi does not have clear branding leading to a feeling of distrust
CSDi, although an international product, does not offer an alternative language option
CSDi does not provide basic product information to showcase their products. Instead provides too much information
Heuristic Evaluation
I completed a heuristic evaluation on the current website using 10 usability heuristics from Jakob Nielson
Why?
I completed a heuristic evaluation on the current website to identify usability issues that are causing a decline in class sign ups and a significantly high bounce rate among users.
Unclear that these are clickable links
Unclear if 'Consulting' is part of the navigation and a clickable link
Unclear what page the user is currently visiting in navigation. User should always be aware of where they are on the site at all times
Text says account, but icon is a shopping cart
Unclear if 'How to start course' is part of navigation or not
This graphic provides no real value or information to user
Product cards are text heavy and have a high cognitive load
Unfamiliar CTA style. No consistency in website
This link takes user to anchor on current page
'Learn more' CTAs not specific enough for user
Secondary navigation is unorganized and not intuitive. Some links take user to new tab, and some links take user to new page on site
Large amount of text over image leads to poor accessibility and usability
Site does not include alternative language option, eve though site claims to be international
Site does not provide a search option for users to quickly find specific information
Site does not have a structured navigation leading to no mental model for users
Site is very content-heavy and leads to poor decision making from users and possibly no decision being made at all
Heuristic Evaluation Insights
Site lacks Consistency and Standards and users often unsure of the result of certain actions
Current site lacks Visibility of System Status. Users are unaware of what is going on while using the site
Current site lacks Aesthetic and Minimalist Design. Information is dense and often unnecessary
Users quickly experience cognitive overload due to excessive information on both homepage and product pages
Information Architecture
I created an information architecture utilizing course information provided by the stakeholder and an open card sort to gain insights on course organization
Why?
The original Information Architecture was proven to be extremely confusing based on my research. In order to redesign the website, first, the Information Architecture had to be redesigned to build a mental model and understand how the information would be displayed on the site
Current IA
Secondary navigation on every page, not located in header
No organization to secondary navigation
Some links take user to external page, some open page on same tab
Proposed IA
Navigation located in header, no longer on every page
Courses organized by categories, determined in open card sort
Users can view every course available to them at CSDi
Information Architecture Insights
Proposed AI allows user to see all courses available on site in one location
Proposed AI has a dedicated navigation for all courses instead of listing all courses on each page
Original AI had secondary navigation on almost every page with no organization, simply a list of links
User Flow
From my research, and speaking with the main stakeholder, the main goal for users is to efficiently find specific courses and purchase those courses.
Why?
I created a user flow to visually represent the path users will take from arriving on the landing page, selecting a course, and checking out. CSDis website essentially functions as an e-commerce site, so ensuring the users can efficiently proceed to check out to purchase a product is the main goal.
User Flow Insights
New user flow allows user to purchase class or continue browsing, reducing bounce rate
Original User Flow follows similar steps, but CTAs and steps are hidden from user
Original checkout process is lengthy and does not offer option for Google, Facebook, or email sign in
Microsoft Fluent
For the website redeisgn, I chose to use Microsoft Fluent Design System. The current site lacks any consistency regarding overall design, CTAs, color, or style
Why?
I chose Microsoft Fluent because the stakeholder was already familiar with the design and interaction of Microsoft products. I wanted to focus on the needs of the stakeholder to make a product that could be efficiently implemented and understood without a steep learning curve
Prototype
The initial design iteration features a new layout, design system, and navigation among finer details, as well as limiting the cognitive load placed on the user upon arriving to the site.
Website Homepage Initial Iteration
My first iteration of the homepage utilizes insights gained from my comparative analysis to create an approachable and easily digestible landing page showcasing featured classes as well as utilizing Microsoft Fluent
Navigation Initial Iteration
The most critical flaw in the current site based on my research and usability tests, is the lack of a centralized navigation. Using information gathered from the stakeholder, I was able to get a full course list. Using an open card sort, I was able to organize all classes into different groups
Similarly to the homepage, the original product pages were text heavy and failed to provide any information hierarchy leading to cognitive loss and information overload. Additionally, the CTA to sign up for courses was located at the bottom of the page, and not immediately available to the users
Product Page Initial Iteration
Usability Test
I completed a Usability Test of the initial prototype using Maze. I had a total of 8 users complete two usability tasks as well as answer 4 follow-up questions
Why?
8 total users
4 follow-up questions
I completed a Usability test to identify usability flaws in my first iteration of the design. Any usability issues that arise will be identified, iterated upon, and tested again.
Usability Test Insights
Several users stated they would have liked to see the price of each class listed on the product card
100 percent of users completed both tasks successfully
2 users stated confusion with the 'folder' style navigation layout
1 user stated they were not familiar with the 'Waffle' icon
Navigation Iteration
Based on the feedback received from my usability test, although users completed the task successfully, two users made comments regarding the navigation being unfamiliar
First iteration Navigation
Proposed Navigation
Looking back on my research, specifically my comparative analysis, I identified websites laid out their navigation with overarching main categories, and subcategories with drop-down or expandable sections to show all content available to users
My proposed navigation utilizes what I have learned from the comparative analysis and provides a more familiar and usable navigation
Waffle Icon Iteration
Although only one user reported being unfamiliar with the waffle icon, it is important to take into consideration all usability input and accessibility issues. Based on other websites and my personal experience, I agree that the waffle icon is not as familiar as other icons that express navigation action.
Product Card Price Addition
One user from my usability test stated they would have preferred to see the course price on the product card, before clicking on the course. However, when I brought this design decision to my stakeholder, he protested and was not interested in including the course price on the product card.
Ultimately, this is his website and company. I can only be an advocate for UX Design and design decisions. I provided ample information, examples from other sites, and data from my research to convince him otherwise, but he is holding firm on his decision.
Final Product
Stakeholder
Over the course of this project, the biggest challenge I overcame was collaborating with individuals who have no experience working with UX Designers. I really had to be an advocate for UX design and explain not only will it benefit users' goals, but also benefit the business goals
The primary stakeholder had no prior experience working with User Experience Design and struggled to appreciate and incorporate the nuances and details that went into designs
Design System
Working with a developed design system like Microsoft Fluent was a huge benefit for myself as well as the stakeholder. Working within the constraints of a design system was a great experience and allowed me to be more productive and ultimately create a more uniform and cohesive product.
My stakeholder also appreciated it, as he was familiar with Microsoft products so it eliminated a steep learning curve for him to implement the design into his website.
bottom of page