Rachel Smith
UX Designer and Researcher

Sisters Need a Place (SNAP)

Elevating a local nonprofit’s online presence to further enhance community outreach

(UX and UI Design)

Redesigning a Local Nonprofit’s Web Presence

This was a multi-semester student redesign project I undertook while at MCTC. Some classes involved selecting local nonprofit websites and redesigning. 

  • This website is for a local nonprofit: Sisters Need a Place (SNAP), a nonprofit dedicated to providing assistance to women in the Muslim community in the Twin Cities

  • As the nonprofit’s mission is to provide a wide reach to all women in the Muslim community, I thought it’d be best to redesign the site to approachable to all English levels, with an interface that presents easy to find contact and event information (to minimize navigational confusion)

  • Most of the wireframes were made with InDesign as I was learning the software during the 2015-2016 semesters

My Role Included...

  • Website Heuristics

  • Color Theory, Theming, and Moodboarding

  • Grafting Site IA and Navigation

  • Product Strategy, Ideation/Sprints

  • Creating Personas and User Task Goals

  • UI Sketching

  • UI/UX Wireframing

The Problem - Transform a Nonprofit Website

Starting with a Website Heuristic...

The first iteration (above) of my redesigning Sisters Need a Place (SNAP) was when I had a UX mentorship through the User Experience Professionals of America – Minnesota (UXPAMN). My mentor helped me carry out a heuristic evaluation of the site in the Spring of 2015.

Time for Ideation/Sprints!

The second approach (above) to SNAP was when I elected to re-do the project for a second web design/UX class.

We started out with a design sprint and addressed how the site could be redesigned to enhance the non-profit’s mission and its users. My classmates helped by putting post-its of Mission Statements, Who-Do elements, and assets on the Assumptions on SNAP.

Crafting Personas

Later that semester, I made some more UX assests including a moodboard, personas, use cases, “competitor” analysis, and made some low fi and high fidelity wireframes in Adobe CC.

  • These personas were crafted a week after the Design Sprint (above) and part of the semester-long redesign project

  • The personas were drawn up from demographic/government and census information applicable to the Minneapolis/St. Paul area

  • The High Fidelity wireframes reflect the consideration for the users: simple navigation, easily-placed contact information, visual assets for calendars, events, etc.

Low Fidelity Mockup made with InDesign

Low Fidelity Mockup made with InDesign

On to Wireframing...

  • Creating a low-fidelity wireframe helped to cement the framing of the site

  • I decided to keep the site’s most important contents Above the Fold and be responsive for all devices

  • The low-fidelity wireframe (right) was made with Adobe InDesign

Mood board for Sisters Need a Place

Mood board for Sisters Need a Place

Now for a UI Design - Moodboard

I then followed up the low fidelity wireframe with a mood board to flesh out the high fidelity wireframe (below) and liven up the new SNAP site...

  • I did research on cultural meanings of various colors, patterns, etc and paired up green and blue hues with soft whites and fonts to give the new SNAP site a warm, inviting feeling for visitors

  • The green reflects growth and blue expresses religious observance. I was particularly drawn to geometric tiles from across the Middle East as inspiration

High Fidelity wireframe made with InDesign

High Fidelity wireframe made with InDesign

Working on further UI Design - High Fidelity Wireframing

  • The visual design for both the Desktop and Mobile was kept fairly minimal, so photos and other visual assets can be highlighted more by the user when using the site

  • Notes in the margins (left) go into greater detail about specific design decisions

The Results...
High fidelity mockup for Desktop and Mobile

High fidelity mockup for Desktop and Mobile

Finally, I crafted some high fidelity wireframes using InVision.

What have you learned from this project?

Overall, this was a good project to flesh out over the semesters while a UX student.

  • I greatly valued being able to do a heuristic evaluation as a UXPA MN mentee for the original site in Spring 2015 

  • I also loved picking up the project later on for my Web Design II In the Fall of 2015. Being able to do an actual sprint with classmates and create a moodboard, personas, user goals/tasks and low and high fidelity wireframes. For the first time, this project made me feel like a UX/UI Designer, sharpening skills I use to this day!