image5

mudd nick foundation

Learn More

Mudd Nick Foundations is a corporation that provides life enriching opportunities for children and families in the state of Oregon.


Mudd Nick editors requested a dynamic platform to update the information on a regular basis with multi-user capability. So I designed and customized access management for them. In addition to that, Mudd Nick board of directors were seeking guidance on design system and style guides. 

My Role

Lead Web Designer 


Worked closely with a team of developers that I hired to re-create and maintain the website. 

image6

BOARD OF DIRECTORS

Pain Points and Goals

The corporation had an old and static website that was difficult to navigate. I wanted to design a modern looking website with great usability on a range of different devices for visitors and employees.


The old design was not responsive and mostly done in pdf with missing code standards and visual styles.

I made mobile a priority for the new design and defined a style guide with a collection of pre-designed elements, typography, colors, graphics and actions for contributors to follow. 


I had to recreate the navigation system to improve the content findability and design an organized information environment to help users complete tasks quicker and easier. 


The foundation was facing an exponential increase in the amount of data and information which had to be tracked, managed and protected continuously, therefore, I designed a reliable and secure database.

Stakeholders requested a dynamic website with an easy to use content management system to keep the website current and professional. 


The new website is based on WordPress content management system with access management capabilities to ensure that proper users have the appropriate access to the backend.


Outdated coding and design have a big impact on a website. Users more likely to press the back button and search elsewhere when your site takes more than a few seconds to appear. With that in mind, my team agreed the priority was to focus on improving the user interface and building a content management system.


Style guide explorations played an important role in decision making on the direction that would be rolled out across both web and print collateral for the corporation.

User Research and Analysis

The most important breakdown in user research is between qualitative and quantitative research. I wanted to understand the user's world, learn about their challenges and come up with ideas for a new website. Also I had to validate how well the new design will solve problems.


Research techniques such as user interviews and meeting with stakeholders covered the qualitative research as the best audience insights surfaced during conversations.

Numbers measure the effectiveness of a re-design, so I practiced methods such as A/B testing, remote usability testing and mouse tracking.


Identified patterns on how people navigate the website using Google Analytics and Google Website Optimizer.

image7

ARCHITECTURE

Card Sorting Sessions

Card sorting is a great way to become familiar with information architecture and user-centered design. It is also a great way of getting stakeholders involved in the process of designing a new website.


I worked remotely on this project, and by using the right tools, and keeping the right flow, I managed to run a few card sorting sessions with my client. The main goal was to improve the labeling, clustering, and organizing the information and create a sustainable navigation system for the new site.


The process of organizing content is fraught with questions. So from the beginning I made it clear that we should have a whiteboard dedicated to all the queries and suggestions. At the end of each session, I took photos and archived my discoveries.

Paper Card Sorts

I had to make sure that participants had enough room on the wall to sort cards. 


As I handled the sessions remotely, I requested the board to hold the session in a large room, and sent them the props in advance. 


I used Optimal Workshop to create the cards. Leveraging a barcode scanner I entered the data back in OptimalSort to use its advanced analysis.

image8

Style Guide

Design System

I created a design system for Mudd Nick Foundation which is a set of standards for design and code along with components that unify both practices:


  • Created the UI inventory
  • Established rules and principles
  • Built the color palette
  • Built the typographic scale
  • Implemented an icons library
  • Standardized other style properties
  • Built the first design system pattern
  • Ran sprint retrospectives
  • Recommended resources 


I was committed to kick off the process and changed the way Mudd Nick Foundation design not only the corporation's website but other social media channels and prints. 

Color Psychology

Dark pink represents playfulness and joy. I wanted users to feel the joy and excitement of children by donating for a good cause. 


This color constitute compassion, nurturing, love and hope. It reminds audiences of the early childhood memories. I combined dark pink with blue which added strength and sophistication. 


Blue symbolizes trust, which was essential for donors and sponsors. I wanted them to donate money with 100% reassurance using the website.

image9

outcome

Findings

At the very beginning of this project, I had many meetings with the stakeholders. Discussed the primary goals and recorded every single piece of feedback that I received from end users. If specifications are not clearly documented then it is likely to be forgotten and neglected.


I spent more time up front to plan the whole re-design and trained the stakeholders on a few primary matters to avoid impossible requests.


I hired developers to help me with the backend so I could spend more time on user experience and visual design. Performed QA and made updates directly in the code once the development was complete.

Re-designing a website lead to a short term drop in rankings before bouncing back up above its original position, so it was an important part of the stockholder training to manage expectations accordingly.


I learned how critical it is to have a comprehensive list of pre and post re-design activities documented. With so many changes in the process, it is easy to miss a step and forget about primary rules and objectives.


This is not a final design, Mudd Nick Foundation keeps changing and evolving. I ask this question over and over again, how can I improve it?

Earning Trust

I believe that this long-term business relationship has been successful based on trust. 


Here are a few techniques that I have leveraged to gain trust with Mudd Nick Foundation Board:


Engaging them with the design process from day one. The board enjoyed all of the card sorting sessions by far. 


Transparent design process has been enormously successful. They love to see the steps and transformation of the layouts.