Mobile App

A UX Design Case Study for a Non-Profit
Project Summary
AsylumConnect needed a mobile app for their resource catalog to provide a better experience for LGBTQ asylum seekers as well as to help with fundraising.
Team Members
Peggy Lu: UX Design
Jack Dickson: UX Design
Myself: Project Lead + UX Design

Some of the screens refreshed for AC's mobile app.

AsylumConnect (AC) has always had a web application which has been the main way LGBTQ asylum seekers have interacted with AC’s online catalog. If they wanted to access it from their phone, they’d have to go to AC’s site and then navigate to the catalog where they were served a less-than-ideal mobile experience of the catalog.

The founder/president of AC wanted to get this done as soon as possible so that the app could be utilized for fundraising (many donors knew AC had an online catalog but were confused why it wasn’t a native app yet). In order to get this done quickly, she sent me a link to a company, GoNative, that could create a native mobile app by adding a wrapper around your site or web app. She then asked me to go over their submission process and provide any design assets they needed to create the app (simple things like our color hex values, logo, etc).

Despite the push to create this app as quickly as possible, our team had to push back as it was clear we shouldn’t submit this information without:

1. Reviewing all our options to create the native app (is this site trustworthy, do we have time to utilize our contracted developer)

2. If we did decide to go with this company, we’d have to review all the different offerings to see what we actually need (things like push notifications, slide out side nav, etc)

3. Auditing our current mobile experience
The Problem
Step One: Review all app-development options.
This actually didn't take long. We reviewed a few other options, but this company was recommended to us by the Engineering team, and ultimately the president had the final say. So it was decided to move forward GoNative — which lead us to Step Two.

Step Two: Review all features offered by GoNative.
After looking through their submission form, it was clear we needed to step back and answer some important UX questions. For instance, if we wanted to enable push notifications within the app, GoNative used a third party company, OneSignal, to perform this function. The downside is that OneSignal required certain information from the user in order to do this — things like a user’s IP Address, Location, etc. Our users' privacy is of the utmost importance, so this was concerning.

Another thing to think about regarding push notifications is that some users are likely in unsafe countries. If someone got a hold of their phone and noticed a push notification on their lock screen from an LGBTQ asylum assistance app, it could put that user in real danger. So we decided to scrap push notifications for the first version of the app in order to do more research on other, better solutions.

I won’t touch on all the UX considerations we had to discuss and decide on, but one other main point was the navigation. At the time, the mobile experience had a bottom tabbed navigation menu. Our president liked that navigation but wanted to add a second, slide-out, side navigation that included links to external pages. Naturally, our team pushed back about having two different navs in the app and suggested finding a way to get everything needed by restructuring the current bottom navigation. Our president was hesitant about changing the bottom nav because she had quotes from users who mentioned appreciating certain aspects of it and was worried that any changes would confuse users.

I suggested that, while she’s right that an updated nav could confuse users, adding a second navigation could cause even more confusion to users — like not knowing which one to use to find certain screens or links. She agreed to let our team think through other solutions while we began our audit of the mobile experience.

Step Three: Mobile audit of the current mobile experience.
Now it was time for our team to do a thorough audit of the current mobile experience to find any opportunities for improvement, spot any bugs, and find think through the overall organization of the content. We all spent time going through every step in the app individually — and taking detailed notes — and then we went over everything we found as a team over a zoom call. From here we organized everything into“quickwins” — meaning things we felt confident could be re-worked and completed before the launch date — and things that would take more time, meaning they’d have to wait until phase two of the project. Then we divvied up the quick wins between the team members and went to work.
Initial Research

Original navigation

Updated navigation

Right about now you're probably thinking, "Big deal, you changed one menu item." But there's a little more to it than that.

The reason our president & other stakeholders wanted to introduce a second, slide-out nav was because they wanted to include links to the marketing site and different forms. So our first idea was to swap the "Privacy" nav item (which showed the privacy statement and disclaimer) for a "More" nav item. The "More" screen would have all the external links and include the privacy statement/disclaimer. Problem solved, right? Wrong.

The stakeholders didn't want to remove the "Privacy" tab from the bottom nav as they had heard from a user in the past that seeing "Privacy" right away made them feel confident this was a safe product to use. But there wasn't enough room in the nav to keep "Privacy" and add "More."

So we came up with a compromise. We'd replace "Privacy" with "More," add the privacy statement & disclaimer to the "More" screen, and then add a banner (linking to the privacy information) which would be pinned just above the nav until the user dismissed it (shown below).
Privacy & Disclaimer Mockups

A few low fidelity mockups from early on in the process

There were plenty of other decisions and design enhancements, but I think the most important lesson learned from this project was around the value of communication. The designers, developers, and stakeholders all valued each other's opinions and feedback. This was truly a collaborative effort and I was proud of our team for getting a well-polished solution out the door quickly. As we handed of the designs, we were already excited to begin testing this MVP with users so that we could iterate and make the experience even better in phase two.