REALITY KITCHEN
REDESIGN
PROJECT OVERVIEW
THE CHALLENGE
Reality Kitchen needed a new website to reflect their inclusive mission and better connect with customers, donors, and volunteers.
MY APPROACH
Over 9 weeks, I worked with a small design team to improve usability, rewrite site copy, and align the website with stakeholder goals.
THE OUTCOME
A more friendly, clean, and intuitive site that better engages users, increases donations, and improves community outreach.
REDESIGN STAGES
MY ROLE
UX Designer - user research, prototyping, web design, content strategy, website copywriting, graphic design
TIMELINE
9 Weeks
TOOLS USED
Adobe Color, Adobe Stock, coolors.co, Figjam, Figma, G Suite, Photoshop, Stark, Unsplash, Zoom, Discord, WordPress, Astra (theme), Spectra (WordPress Block Editor), ChatGPT, HTML, CSS
SCOPE
Led full-cycle redesign from research to launch, including:
-
Heuristic analysis, interviews, competitor research
-
Personas, journey mapping, IA, and feature planning
-
Rebranding with updated logo, color scheme, design guide
-
Responsive prototyping, user testing, and accessibility review
-
WordPress development, content integration, QA, and launch
Discovering User NEEDS
Assessing Usability Through Heuristic Analysis
We evaluated RealityKitchen.org using design heuristics, identifying pain points like overly text-heavy buttons. We conducted a comprehensive review of the website from top to bottom, ensuring no area was overlooked.
1. BUTTON STYLES
-
Inconsistent elements can confuse users.
-
Buttons have too many words.
2. POP-UPS
-
Users respond negatively to pop-ups.
-
The image doesn't engage users.
3. NAVIGATION
-
Some page links are broken.
-
Some pages are missing.
Gathering Insights from User Interviews and Testing
Our user testing revealed how participants interacted with the website, assessing their ability to navigate and locate target pages, while also capturing their feedback on the experience.
NAVIGATION TESTING
We conducted a user test to evaluate the website's usability and created a graph showing hard-to-find pages. Surprisingly, 50% of users couldn’t find the café menu. This highlighted significant usability issues that required immediate attention.
USER FEEDBACK
We recorded critical feedback from customers and testers. I created this chart to highlight common issues such as a lack of confidence in the donation process. These insights guided our redesign efforts to address these concerns and enhance user trust.
Defining CORE ISSUES
Creating Personas to Align Design with User Needs
With user research and testing feedback we created three personas or key user segments. This information informed our design decisions and helped us convey our design choices to the client.
LUCY LUNCH
-
Goal: Meet up with friends for lunch
-
Needs: Find café menu and hours
-
Pains: Doesn't like using technology
BELLA BAKER
-
Goal: Independence through skills training
-
Needs: Navigate to online-based classes
-
Pains: Struggles with information overload
WALTER WEB
-
Goal: Engage the organization's community
-
Needs: Writing blog and news posts
-
Pains: Doesn't like complicated workflows
Visualizing the Customer Journey to Identify Key Opportunities
I created a user journey map to visualize the experience of customers like Lucy Lunch as she interacted with the website, identifying friction points and opportunities for improvement. Making the website more intuitive and emphasizing the organization's positive impact can build trust and encourage donations.
LUCY LUNCH, USER
-
Goal: Meet with friends for brunch
-
Needs: Find café menu and hours
-
Pains: Doesn't like using technology
EMOTIONAL JOURNEY
-
8:15 am Recalls Reality Kitchen has good food
-
8:16 am Remembers café is not always open
-
8:19 am Easily finds menu, gluten-free options, and explores the new intuitive website
DEV OPPORTUNITIES
-
Show positive customer reviews
-
Access the menu from the homepage
-
Funnel users to the donation page
Establishing Clear Goals Through a Problem Statement
Before starting work on specific features and designs, we crafted a problem statement to align our design goals with the stakeholders' objectives and vision, clearly outlining the usability issues we aimed to address.
PROBLEM STATEMENT
The Reality Kitchen website serves as a central hub for organizational information, an access point for online classes, and a platform for community outreach. However, our user research and usability testing revealed that users struggle with navigation and the mission statement lacks clarity.
HOW MIGHT WE?
How can we redesign the website to ensure intuitive navigation, strengthen community engagement, streamline maintenance, and increase monthly donations?
Developing Design Solutions
Brainstorming Design Solutions with SCAMPER
Our team used the SCAMPER method to brainstorm design solutions for the website, exploring ways to Substitute, Combine, Adapt, Modify, Put to Another Use, Eliminate, and Rearrange elements. I suggested adapting the old design into a retro style to create a unique and engaging user experience.
SUBSTITUTE
-
Combine multiple news pages into one blog
-
Simplify navigation with single-word labels
-
Replace Courier New with a modern font
COMBINE
-
Merge the wishlist and donation pages
-
Consolidate policy pages into one
-
Integrate the partner page with the homepage
ADAPT
-
Transform the "old" style into a "retro" vibe
-
Convert excess pages into blog posts
-
Change the complaint form to a feedback form
MODIFY
-
Add "Menu" to top navigation
-
Highlight photos prominently
-
Simplify information
PUT TO OTHER USE
-
Feature customer reviews as testimonials
-
Archive outdated updates
-
Make static homepage distinct from a news page
ELIMINATE
-
Remove missing pages
-
Eliminate duplicate buttons and links
-
Reduce excess negative space
REVERSE
-
Place "hours explanation" at the top
-
Move contact info to the footer
-
Add donation button to the header
Focusing on High-Impact Website Features
We used an impact matrix to prioritize website features gathered from our brainstorming session. Due to time constraints, some ideas were shelved for later sprints. Fixing the navigation, making the menu easy to find, and chunking (reorganizing) information were all feasible and highly impacted the user experience.
Improving Navigation Through Card Sorting
To tackle the navigation issues the team conducted card sorting. We each organized website topics based on logical relationships. We compared our results and discussed the differences. This exercise helped us create a more intuitive navigation menu based on user expectations.
Creating a Clear User Path With a Visual Sitemap
I translated our card sorting into a hierarchy. This visual sitemap shows how pages are linked together and roughly how users can expect to flow from the homepage to subpages. Users can reach any page within two clicks.
Exploring Initial Concepts Through Paper Sketches
Creating layouts with paper sketches helped us quickly visualize and organize ideas. While sketching the homepage, I noticed the information felt cluttered. This revealed the need to increase negative space in future iterations to improve clarity and balance the design.
Creating a Low-Fidelity Wireframe to Gather Initial Insights
Next, I translated the paper sketch into a low-fidelity wireframe, including elements like the header, navigation menu, content sections, call-to-action buttons, and footer. This simple, non-detailed version allowed for early feedback on the overall structure and placement of the page elements.
Creating Interactive Prototypes in Figma
I created a clickable menu in Figma using our low-fidelity prototype to test and validate our card sorting decisions. This prototype enabled us to gather initial feedback on the navigation's functionality and make necessary adjustments before proceeding with the WordPress build.
Refining Design Choices with a Style Tile
Developing a style tile in collaboration with the client enabled us to quickly explore various design styles, receive client feedback, and make timely adjustments to visual elements.
Delivering A User-Tested Product
Measuring Redesign Impact with User Testing
We tested our navigation redesign for both mobile and desktop views. While users initially had some difficulty finding the wholesale page, they located it after further exploration. The redesign increased successful navigation by up to 150%.
Crafting User-Centered UX Writing and Branding
We enhanced the website copy by using straightforward and concise language, making links and buttons action-oriented, and using info panels (card components) to group related information. We also incorporated playful word choices in section headings to engage users and reflect the Reality Kitchen branding.
Improving Accessibility with Usability Testing
We ensured our final design adhered to accessibility standards, including color contrast and screen reader compatibility, by using tools like Adobe Color. We also gathered real-world feedback from testers to validate usability and ensure an inclusive experience for all users.
COLOR PALLETE
-
Text to background contrast ratio 7:1
-
Colorblind safe color combinations
ALT
TEXT
-
Clear image descriptions
-
Null "" for decorative images
UX
WRITING
-
Clearly labeled form fields
-
Contextually descriptive links and buttons
Ensuring Design Consistency with a Style Guide
We created a style guide that clearly defines the typography, color palette, spacing, and color combinations. We included examples of best practices and things to avoid, maintaining page consistency and brand identity.
Enhancing Logo and Graphics
For this project, I created custom graphics and converted the existing logo into vector format by hand. The vector file increased text sharpness and reduced the file size by 40%.
PNG File
324 KB
SVG Vector File
192 KB
Developing the Site Using WordPress and Tailored CSS
In addition to designing, our team built the site in WordPress using the Spectra block editor. We used the Astra theme and used CSS to add custom hover states in the navigation for better visibility.
Tailoring UX Through Responsive Design
We implemented final changes based on testing and ensured the website functioned seamlessly across different screen breakpoints, delivering a smooth experience for both desktop and mobile devices.
reflecting on insights gained
INSIGHTS
Here are just a few of the insights gained during this project.
COLLABORATION
Working closely with stakeholders helped me understand Reality Kitchen's unique needs and align the design with its mission to support people with I/DD.
CUSTOM SOLUTIONS
Designing custom graphics and tailored UI elements, like hover states, enhanced the visual appeal and usability of the website.
USER-CENTERED
Through testing and feedback, I learned that incorporating user input early in the process leads to more effective solutions that users will love.
RESPONSIVE
Creating a seamless experience across devices reinforced the importance of designing for various screen sizes to ensure brand consistency.
NEXT STEPS
Here are a few things I would like to do if I had more time to work on this project.
ACCESSIBILITY
Set up an accessibility solution like UserWay so users have access to ready-made usability options.
OPTIMIZATION
Focus on optimizing the site’s load times, mobile performance, and overall user experience by converting images to WebP and reducing page elements.
SEO
Improve search engine optimization by adding keywords to titles, meta descriptions, content, and image alt text.
ANALYTICS
Install Google Analytics to track user behavior and gather data-driven insights for future website iterations.