Low Fidelity Mockup made with InDesign
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.
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
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
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
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!