Challenge:
Redesign Landing Page. Users have reported they do not understand what kind of resources they are being connected with. Users have also reported not being able to find resources in their area.
Solution:
Create explainer pages that a user can scroll through and see what free resources are available to them.
Visually show current counties where we provide services.
About:
Shelter App is an all-volunteer, non-profit organization whose mission is to help houseless and low-income families connect to services.
My Role:
UX Designer
Overview
As a user who is trying to find an app that will help me get the help I’m looking for, I want to know if they can help me quickly.
I decided to break down the information from the old site into more digestible bits of information that is easy to scan. The hope of this decision is to allow users to see quickly, if we can support them or not.
Landing Section
Original landing page design
The first thing that crossed my mind when I saw this landing page was about the people. How might we create a better connection with our target audience? There were a lot of options on the top navigation bar and too many call-to-action buttons.
To solve these issues, I..
Reduced the amount of page options on the top navigation.
Chose the logo with an image to keep the association together.
This way, the icon of the logo can be used for smaller designs.
Incorporated an image that relates to people.
Specified what services.
Cleared out CTAs for better structure.
New landing page design
Goal = Download app
The stakeholder brought up a point about downloads being the main goal of the landing page. I explained how they are still accessible from the top navigation and as soon as the user scrolls.
And although that was accepted, I thought about and researched other landing page designs with multiple CTAs. I kept thinking about “out of sight, out of mind…” and how to incorporate downloading the app into the page without it becoming too cluttered.
Left image is original landing page idea. Right image has the added download now button.
Image of voting results on which landing page design would entice user to download app with 89% voting for the right 1 and 11% voting for neither.
Interesting Results
Just by adding a download now button, the user had a 22% increase in pleasant feelings toward the design and a 23% increase in ease of use.
1 person decided to say neither and informed me that more could still be done. They were right and I went to work.
Chosen Design
I listened to their feedback and iterated the spacing between the right elements on the top navigation bar. To ensure download was the main focal point, I also made sure to make download now the main button and see how the secondary button.
Image of woman holding child in oversized hat and kissing them. Buttons to download now and see how.
About Section
Original about section version
This section was not very scannable and had yet another screen for its image reference. It explains who Shelter App is, where they help, features, and volunteering. It’s just too much reading altogether.
To solve these issues, I...
Brought the download links into their own page with mock-ups on relevant devices.
Displayed the counties we currently are in.
Visually show on a royalty-free map, the counties we currently provide service to.
Separated features into their own elements with accompanying visuals.
Moved volunteer request to contact box.
Map with points showing counties currently in our database.
In the explainer screens, We pointed out the different platforms and download links. I think in development, we can set the download button to automatically detect the correct platform to download from or for.
Users stated that having a page like this was still a good to have. Here are 5 quotes from testers below.
5 quotes from testers.
Image with download links for desktop, tablet, and phone.
Features Section
Screenshots of original designs for Shelter App features and screenshots pages.
This section had repetitive information that focused on app functionality and features versus how it is helping people.
To solve these issues, I...
Used screenshots to show the functionality and why they matter to a person using the app.
Created explainer pages to better describe what kind of resources are available to them.
Social Proof
Screenshot of original section with awards and partners.
Shelter App is a non-profit with a 100% volunteer team. This section showcases our partners and the awards we’ve won. There is currently no distinction between the 2.
To solve these issues, I...
Separated partners and awards into their own carousels.
Screenshot of Partner Logos and Award Logos on their own carousels.
Contact Section
The old site didn’t have a contact section in the current landing page reel. Research has shown that including a form generates more leads than a site with a separate contact page only.
To solve these issues, I...
Created a contact form with floating labels.
Added 3 suggestions for contacting us.
Submitted Iteration
Users not understanding how and where we help, were prominent challenges that triggered an overall redesign of this landing page. To keep a consistent message, I used the same explainer points from the app preview and the explainer video. This design is currently in development and I’m looking forward to updating this case study with analytical data soon.
By adding an additional call to action in the hero section, users showed an increased likability and usability by around 20%. Also, every now and then, you meet other awesome designers through communities I am active with.
Original landing page design.
New landing page design.
Mid-responsive Design
Small-responsive Design
Latest Iteration & Final Thoughts
After doing a portfolio review with another designer for a job interview, I was asked about the stock photos and the importance of the download now button in the mobile version. With his feedback, I made an iteration of the design that changed how the stock photos are used and added the download button on the mobile screen.
This is why I love feedback. It helps drive iterations that, when done right, always improves the user experience. It was also easier to change the mobile version design first, then the desktop version. Compared to working in the reverse direction starting on desktop and converting to mobile.
