top of page

RWCNS WEBSITE REDESIGN

FinalLogoWhiteBG HiRes 2.png
MODERNIZING DESIGN & EXPANDING
USE CASES

Ruth Washburn Cooperative Nursery School (RWCNS) is a beloved preschool in the Pikes Peak region, established in 1961. 

 

In 2022, I helped RWCNS to modernize the web experience for their customers by delivering a newly redesigned high-fidelity prototype ready for development.

WHY REDESIGN?

The RWCNS website was last updated in 2012. The design was outdated and new information had been added to the site over the years in a manner inconsistent with the original design. This resulted in a muddled design style. Long-form paragraphs and a 20-minute video on the landing page overwhelmed users. Additionally, many potential users of the site were not accounted for, and the result was calls to the school for routine questions that could be found on the site. The site was developed with a desktop and mobile version—common to 2012 web design—but the mobile version lacked information most users need. With 60% of their users being on mobile, the organization needed a mobile-friendly overhaul.

Screenshot 2022-11-08 at 3.28.53 PM.png
Screenshot 2022-11-08 at 3.29.07 PM.png

Homepage Before the Redesign

Screenshot 2023-01-09 at 11.50.53 AM.png

Hard-to-Read Fonts Display at Certain Screen Sizes

Screenshot 2023-01-10 at 6.39.57 AM.png

Dense Text Dominates

THE CHALLENGE

The design problem was to create a modern website with updated site architecture while incorporating additional use case scenarios. 

MY ROLE

I served as the sole UX designer for this project between August and December 2022. My responsibilities included conducting extensive user and competitive research, wireframing, prototyping, and photography. The completed high-fidelity design was delivered to developers in December 2022.

UX STRATEGY

The UX Strategy for this project was developed using the double diamond design process.

double_diamond.png

DISCOVER

User Research
  • Surveys: Surveyed users in the target market to uncover motivations for using the site, previous challenges with finding information, and to learn about their personalities.
  • Interviews: Interviewed administrative staff to uncover business needs and current limitations of the site. 

  • User Pre-Testing: Watched users try and navigate the site; asked them to complete tasks.

  • Personas: Developed three personas based on common users of the site.

rwcns_ux_brief_Family Persona.png
rwcns_ux_brief_Sponsor Persona.png
rwcns_ux_brief_Teacher Persona.png

Competitor Research
I analyzed 15 of the top competitor sites to understand industry trends and where the client's site could benefit from adopting trends. 

UX Audit

I evaluated the site based on Nielsen's Heuristics and created a report for the business owners with my findings. The site failed three of Nielsen's Heuristics. 

Content Audit
I reviewed each piece of content on the site, tracked its location, and evaluated the effectiveness of all design elements for: 

 

  • Contrast​ (meeting WCAG guidelines)

  • Content Length

  • Effectiveness of Photography Chosen

  • Tone/Voice

  • Audience vs. Content Mis-Match


I created a formula to assess how well the content met the above criteria and determined a score for each section. The average rating for the site was a 3.6 out of 5, with the homepage scoring a 3.5.

DEFINE

Use Case Scenarios
After interviewing site users, the below use case scenarios were identified:

 

rwcns_ux_brief_Use Case Scenarios.png

Customer Journey Maps

I translated the above user research and use case scenarios into customer journey maps to identify pain points and potential solutions. 

 

Screenshot 2022-11-08 at 4.02.46 PM.png

Insight Synthesis 

After analyzing the information uncovered in the research phase, I identified five major insights for improving the site.

  • Modernize Designs

The previous site design was over ten years old and had an inconsistent design style. The design needed a complete overhaul to match current user interface (UI) industry standards and the organization's new branding.

  • Increase Accessibility 

The combination of text and background images used throughout the site did not provide enough contrast to meet WCAG guidelines. The site needed a design approach that maximized contrast and accounted for screen readers.

  • Expand Use Case Scenarios

We needed to expand the potential users of the site to address the content and functionality needs of the organization.

  • Group Content in Appropriate Context

Critical pages were buried in the sitemap structure, making them difficult to find. The site map needed to be re-structured to align with user flows. 

  • Make the Mobile Site a Responsive Copy

60% of the organization's users are mobile. The separate desktop and mobile versions excluded information on the mobile version—which is most commonly-used. The site needed a responsive design where the mobile version displays 100% of the information.

DEVELOP

Information Architecture 

The existing site’s architecture had major challenges that impacted the experience. Content was not grouped by user, so many users had difficulty finding the content they needed because it was buried in other parts of the site. Since I was adding a significant amount of new content for additional users, the entire sitemap needed to be re-imagined. I began the process by conducting a card sorting activity with potential users of the site. 

IMG_5860-copy-980x735.jpg

With organizational ideas from these users, I built an updated sitemap in Figma. I reviewed this with the organization to ensure it covered all of their content needs. 

Screenshot 2022-12-10 at 4.35.32 PM.png

Sketches

I began the design process with rough, hand-drawn sketches to narrow down what worked best for both the school and its users. I tested these ideas with potential users to get a feel for what users would want to see. My motto is "test early and often!" It's much easier to change a design up front when it's on paper than further down the road in a high-fidelity prototype. 

Mobile Wireframes

The organization says 60% of their users access the site via mobile. I used a mobile-first design methodology for the wireframes and mapped out the site at mobile sizes first.

Screenshot 2023-01-10 at 10.38.23 AM.png
Visual Design

Style tiles helped narrow down the color palette and visual design language we would use on the new site. The client was provided three style tiles from which to choose. After the client chose their favorite tile and we had decided on a design approach, I used the color palette to create four distinctly different themes for the desktop homepage featuring abstract art. 

Screenshot 2023-01-10 at 10.06.29 AM.png
Custom Abstract Art

I began the custom art for the website by taking the belly shapes and colors from the logo and created a collection of splotches that look like paint blobs. Since the school is very creative and children often paint, this felt like a nice tie-in to what you see every day at the school. The plan was to use this art and these splotches throughout the site to bring consistency to the visual style.

FinalLogoHorizontalTransparantBG.png
Photography

The school did not have quality photography with a consistent visual style to use for the new site, so I did three photoshoots and shot over 600 pictures. The new photography was used to populate the site with consistently-feeling images.

Screenshot 2023-01-10 at 10.54.46 AM.png

Site Copy

I wrote all of the copy for the site after interviewing administrative staff to learn the salient information to communicate. After I created an initial draft, the copy went to a communications professional associated with the organization for review.  

Prototypes

I transformed the user and organization-approved wireframes, photography, copy, and design elements into high-fidelity prototypes using Figma. I built in all hover effects, interactions, and external hyperlinks.

Screenshot 2022-12-10 at 3.26.03 PM.png
Screenshot 2022-12-10 at 3.26.33 PM.png

User Testing

At the end of each design phase (sketches, wireframes, visual design, prototypes), I checked in with users about the designs to gauge what was working and what needed iterating. The designs were updated with user feedback.

 

DELIVER

Final Approval 

After all of the rounds of iteration, I scheduled a final walkthrough of the design with the organization's leadership. The design was approved in December 2022 and handed off to developers. The project is scheduled to launch in January of 2023. 

SUMMARY

The results of this capstone project are the delivery of a modern, user-centric website design for RWCNS. The design includes a full color prototype of 24 web pages, each with custom photography, updated copy, and a consistent visual style. The design is ready to be handed off to developers. Here's an overview of how key insights were addressed in the final design.

 

  • Modernize Designs

The new design incorporates many current UI and UX trends for elements such as buttons (design, hover effects, click interactions), cards (for image, heading, and content groupings), and the use of abstract art elements to tie the design together across multiple pages. 

  • Increase Accessibility 

The updated site meets WCAG accessibility criteria for contrast on all text and backgrounds, provides alternatives for each video media, and includes suggestions for adding alt text to each image during development.

  • Expand Use Case Scenarios

The new site incorporates six additional use cases for two current and one new user group.

  • Group Content in Appropriate Context

A  new sitemap arranges content in user-approved groupings utilizing existing mental models. 

  • Make the Mobile Site a Responsive Copy

The new site design plan incorporates screen size responsiveness so the design looks good at any size. Mobile users see content that is designed to look good on a smaller screen. All content is included on all screen sizes. 

carlymojica-exhibition-card-image-1200x600.jpg
mojicacarly-gallery-image-04.jpg
mojicacarly-gallery-image-05.jpg
mojicacarly-gallery-image-07.jpg
mojicacarly-gallery-image-08.jpg
mojicacarly-gallery-image-09.jpg
mojicacarly-gallery-image-12.jpg
mojicacarly-gallery-image-11.jpg
bottom of page