Julia Caston
UX designer

Sequeer

UX Research and UX/UI Redesign: Mobile App

Image alt tag

How can we support LGBTQIA+ businesses?

Sequeer is a mobile application that serves as a global search engine for the LGBTQIA+ community and allies. Businesses can register as LGBTQIA+ owned or ally locations, and users can rate and review businesses. However, Sequeer had issues with user retention because of UX and UI issues. Working with my design team at Moment Studio, I collaborated on a comprehensive heuristic analysis and redesign.

My role: part of a 5 - person UX/UI design team at Moment Studio. I worked on the heuristic analysis of the mobile app, sketches, wireframes, high-fidelity screens, and the prototype.

Tools:

Figma

InVision

The Project

Sequeer is a mobile app that serves as a way to find LGBTQIA+ businesses and safe places. We undertook a comprehensive heuristic analysis and redesign.

The Challenge

The Sequeer app had a variety of usability issues. The UX was counterintuitive and inconsistent, and the UI was cluttered, out of date, and did not inspire trust. Because of these issues, the app had lost many users.

The Solution

Our team completely redesigned all the screens from scratch based on the results of our analysis. We solved many usability issues and brought the UI up-to-date based on current industry standards.

1. Heuristic Analysis

For our analysis, we used Jakob Nielsen's 10 usability heuristics. We analyzed all aspects of the app such as onboarding, search, and the profile. Overall, the heuristics with the most issues were the following:
1. Visibility of System Status
2. Aesthetic and Minimalist design
We concluded that ensuring that users are easily able to tell where they are within the application, prioritizing that colors are contrast compliant, and creating a layout that is uncluttered and consistent would improve the user experience.
Below is a selection of our annotations. I annotated the profile screens and preference settings.

2. Design

After sharing our analysis conclusions with the stakeholders, we were give the go-ahead to start the re-design. We began with pencil sketches. I worked on sketches of the home/search screens.

Wireframes

After our sketches, we created and shared our wireframes with the stakeholders. This was a crucial point in the design process, as we realized that the stakeholders had a different vision than what we initially understood. They wanted the app to function more like Google Maps or Yelp. I had designed the home/search screen, and with this feedback, I redesigned it to have a predominantly featured map element. I also redesigned the search filters to have pre-determined categories such as food, beauty, and sports.

Mood board and Style Guide

I contributed to the mood board, which we would use the starting point for our style guide and high fidelity screens. I chose screenshots of Yelp, as well as an app called AccessNow. This app focuses on helping users with disabilities find accessible businesses and places near them. As Sequeer serves a specific audience, and accessibility is a consideration, this comparison was useful. Our stakeholders told us that they wanted a bright "neon" palette that would pop. We chose purple as our main color, though our UI underwent many changes and iterations throughout the process.

High Fidelity Screens

The high fidelity screens presented a particular challenge in the design process, as we had a lot of back and forth with the stakeholders about the color palette. They wanted the app to have a "neon" look, but had a hard time articulating what that meant. We used our skills as designers to help them interpret their idea. Initially, we tried some pastel colors, but eventually decided this was not the right feel for the app and had poor contrast with the accent colors. I made multiple iterations on the home/search screen, and decided upon a purple header with white, brightly outlined buttons for the preset search categories (sports, music, etc.). Below are the various iterations that I created.

Final Screens

After nailing down the color palette, we were able to complete the high fidelity screens, shown below. In addition to the home/search screens, I also edited the profile screen. A crucial difference in the profile screen was the updated set of preferences. The initial preferences or "badges" had too many options and used outdated, overly complex icons that did not look like anything used in other apps. The updated preference badges used simple icons for categories such as free Wi-Fi, and featured blue-purple gradients which alluded to the "neon" look that the stakeholders requested.

Before and After

The before/after comparison of the home/search screen is a particular source of pride for me, featured below. Our redesign is clean, accessible, and contemporary, with just enough detail for the user to complete their tasks.

3. Prototype

I created the prototype based on the high fidelity screens, to make sure that the app had a smooth feel as the user transitioned from one task to another.

4. Developer Hand-Off

I worked with the lead UI designer on the developer hand off. Sequeer used an outside developer, and we needed to make sure that everything was as clear as possible to avoid any kind of misunderstanding. The other designer and I both created annotations explaining key elements on each screen. The other designer created the font styles in Figma. I created the color styles, and made myself a rough guide containing each color used in the app, featured below.

6. Test

After completing the developer hand-off, I had some extra time to conduct usability testing. I created my unmoderated remote tests via usertesting.com. I wrote all the test questions and analyzed the findings of five tests. I asked questions of several specific user flows: going through the tutorial during onboarding, finding a place to have a drink, using the filter settings, and finding the frequently asked questions. There were several key takeaways.

Usability issues

The main usability issue that kept coming up was with that the tutorial at the beginning of the onboarding process. The tutorial featured screenshots of main parts of the app with text on how to interact with those sections. Three of the five testers found this element either confusing or not particularly helpful. A solution would be to integrate the tutorial into the app once onboarding is complete, in the form of pop-ups at various screens with hints on how to interact with the app elements.

Other takeaways

  • The five users rated the ease of navigation on a 1 - 5 scale, with 5 being very easy. The average rating was 4.6, indicating that navigation was fairly straightforward.

  • Testers were located in the United States, Canada, Mexico, and the Philippines. This geographic distribution was helpful, as one of Sequeer's business goals is to have an international reach.

  • Testers responded positively to the color palette and UI of the app.

I presented these findings to Sequeer stakeholders, and they are in the process of considering whether to incorporate changes into the app design.

5. Reflect

I learned a great deal through the UX research and redesign involved in this project. The most important take-away for me was how to effectively work with stakeholders. I realized that there is a delicate balance between catering to the stakeholders' desires, versus guiding them to an effective design solution. Through the back-and-forth communication about the color palette, I realized that less is more when presenting different versions of high fidelity screens and other design options. I enhanced my communication skills, and learned to trust myself more as a designer.