MM_Header image_transp.png

The Midnight Mission




Midnight Missions strives to offer a bridge to self-sufficiency for people experiencing homelessness through recovery services, counseling, education, training, workforce development and continued care services. To make available the necessities of life to people experiencing homelessness: food, shelter, clothing, personal hygiene needs and medical care.

The Challenge

Identify problem areas and redesign the site. Create a better experience to navigate, find information, and donate money.


Timeline: 2 Week Sprint
Roles: UX/UI Designer
Platform: Desktop + Mobile
Tools: Pen/Paper, Adobe XD, Sketch, Photoshop


Heuristics + C&C Analysis, Persona, Sitemap, Task Analysis, User Experience Map, Wireframes, Low-Med-High Fidelity Prototypes, Clickable Prototype



The Research Process.


Original page group.jpg


Competetive & Comparative Analysis.

I first analyzed the current website using C&C analysis and Nielson's Heuristics with similar local charities. Gathering information about both layout and information.

Takeaways: Navigation, Page Layout and flow were the biggest pain points that prevented easy and effective use.



User Research.

I Interviewed users to get a determine pain points and how users may interact with the current website based off the most likely use scenarios. Observed user flow and any find any obstacles or criticisms. Through user research I was able to pinpoint the problems to work on.

Problems: Both donating goods as well as donating money were not easy to do and a lot of information and vital links were lost, causing confusion and difficulty completing tasks.


Color palette. 
Non standard logo and icon placement
Lack of information
Redundant pages
Unclear navigation
Confusing global navigation



User Personas and Scenarios.

- Who am I designing for? Make sure the designs work great for them.



Customer Experience Map

- Creating a scenario to observe users experience throughout the entire process from start to finish.



Current Site Design and Navigation.

During user testing many users showed confusion and frustration from poor design and user flow of the site navigation. Specifically in this case was the form filling process for making a donation.

The distracting background as well as the unclear form copy confused many users and made them lose confidence in brand/company reliability.


Prioritizing Changes.

Within the scope of the project, proposed features and redesigns had to be prioritized to finish during the scope and which features should be set for future iterations. The different aspects were assessed by complexity and the value that it will bring to the business.



Sitemap & Cardsorting.

Taking a look at the current flow and layout of the website, using the data gathered from user card sorting, patterns and flows of the most efficient labels were found.  This site audit revealed that the biggest heuristic violation was the number of similar and nested pages, many of the pages contained similar content contained on separate pages. During testing this showed to be a problem with many users getting lost and frustrated. 

Takeaways: Being able to significantly reduce the number of pages and links resulted in a much more navigationally friendly website. 



The Design Process.



Low Fidelity Sketches and Wireframes.

  • Sketching at the speed of thought.
  • I sketched out various ideas for the volunteer page as next steps for the project. The volunteer page was missing a lot of good information and links to volunteer and give in many different ways.
  • With more time to work on the project this next step would create a much easier experience to sign up and volunteer for the many different roles available at the midnight mission.

Medium and High Fidelity.



Lets Compare.

  • Standardizing the colors, copy, and layout makes it easier to glance through and gives off a better sense of trust.
  • Eliminating as many problems and areas of confusion found during the research.
  • The current homepage contained a lot of great information but the design and layout caused the majority of the users tested to skip and ignore the blocks.

Original Homepage

Homepage Redesign


Making Things Clear.

  • Selecting a different style of button as well as copy clears up confusion if users are donating on behalf of an organization.

    • This was a major area of confusion for the majority of people during testing. Taking careful consideration with the selection of the button as well as the copy allowed for a seamless checkout process without causing any confusion.



The Prototype.

  • The final high fidelity prototype allowed me to test all research and features. Testing was a success and there were no users who had troubles navigating or going through the checkout process.
  • Challenges: With such a short iteration process I prioritized one aspect of the donation process, which is E-donate.


Going Forward.

  • With more time designing all other splash pages for different ways to donate would likely greatly increase donations and volunteering opportunities through the website. The current state of things has information scattered all throughout the site on many different pages. being able to clear them up and clearly categorize the different methods would make the website complete. 
    • Amazon smile for example is something that the Midnight Mission offers however it is very difficult to find and see this option. It would be a great way for a steady stream of donations for people who do not necessarily donate funds to charities directly. A small portion of amazon purchases gets redirected to the Midnight Mission at no extra cost to customers.