The Remote Collective
Overview
Problem
The client wanted to create a networking app that felt fun and young but professional and provided our team with an early concept of The Remote Collective app and an informational slide deck. She asked for help designing the rest of the app based on four user stories to create a minimum viable product.
Solution
To help the client accomplish her goal, our team designed wireframes and prototypes that were inspired by existing social media and networking apps and guided by research and best practices so that the app would appeal to younger audiences while following usability heuristics.
Process
- Discovery
- Ideate
- Design
- Handoff
- Reflection
Tools
- Figma
- Google Workspace
- Slack
- Zoom
Role
UX/UI designer in a team of 5 designers, with the support of a project manager, 2 senior advisors, and the client
Duration
7 weeks
Discovery
Kickoff
Before starting the project, our project manager provided our team with a folder that included a completed questionnaire, slide deck, and videos from our client. Her vision for The Remote Collective is an app inspired by networking and dating apps in which remote workers can match with each other and find local events based on shared interests. She emphasized that the app is meant to feel fun and young (Gen Z) but professional, and user safety especially for women and marginalized groups is a top priority. We first began by doing research on existing apps, including LinkedIn, Facebook, Twitter, Hinge, and Bumble, to aid us with user flows.
Ideate
User Flows
For this project, our team designed screens for the mobile app based on four user flows and the resources that the client shared with us. The four user flows that the client asked for help on were to create an account, log into an account, set up a profile, and make a post. Our team divided the user flows among the team members, and we mapped out the steps of each user flow so that we would have a better idea of which screens to design. I took the lead on the user flow for logging into an account and contributed to and reviewed the other user flows throughout the design process.
Medium-Fidelity Wireframes
After mapping out the user flows, our team found out all of the user flows either began or ended on the home user feed screen. I held a brainstorming session where we ideated on the user feed screen, in which we decided to use existing social media feeds as the basis for our designs. After coming up with some low-fidelity wireframes, we collaboratively designed the home user feed screen so that all of our later designs would look consistent, taking bits and pieces from each of the lo-fi designs. During this phase, we also decided on Poppins as our typeface and to include rounded corners on all of our rectangular shapes to give the app a welcoming feel.
We then designed the wireframes for the rest of the user flows and provided feedback on other wireframes along the way. Although the login user flow appeared to be simple at first glance, I found the UX writing and thinking about the potential ways that the login process can go wrong to be a refreshing challenge. For example, I had to consider how to best phrase messages so that the content would be easily understandable to users but not condescending to an audience that is likely familiar with how to log into apps. I also had to consider more edge scenarios such as what happens when a person types in the wrong email address or a username that does not exist in the system.
During this process, I advised the team to use components, typography/color styles, and a consistent spacing system so that our designs would look more cohesive and so that it would be easier for developers to code for the different div blocks during handoff. I also advocated for smaller usability improvements such as having the setting up a profile user flow to be broken up into multiple screens in order to decrease cognitive load on the user (progressive disclosure). I also initially included a lazy registration design pattern to allow users to quickly skip past the user flow so that they can get to the content faster, but our team and the client decided that it would be better for users to have a complete profile instead, as adding some friction in the registration process may be beneficial to users in the long run and result in a more personalized experience.
Design
Inspirations
For the visual designs and content that I contributed to, I mainly took inspiration from the social media and dating apps that the client mentioned. Other team members added decorative elements that gave the app more of a fun and young feel inspired by designs on Dribbble and other design elements from Facebook, an app that I was less familiar with. We also explored some potential color palettes using the client’s resources and online tools such as Coolors.
Iterations
Before proceeding to the high-fidelity designs, we wanted to give the client a few potential design and color options. We chose to iterate on the user feed screen because it is one of the most viewed screens in the app. We tested over 10 iterations, each with a different combination of colors and layouts. It was a bit difficult to find a balance between accessibility and the client's aesthetic preferences, but we eventually decided on neon green as the primary color, which aligned with the client's goal of using bright colors to appeal to younger age groups and passes the WCAG color contrast criterion (contrast ratio of 10.09:1 against black text). Although the red/orange gradient for the button backgrounds against white text does not quite meet WCAG criterion, we hope to include options to allow users to use darker colors for buttons in the app settings.
Accessibility
Although our team prioritized accessibility in our designs, I recognize that the red/orange gradient against white text for the buttons does meet the criterion for WCAG AAA Normal Text. I suggested to the client to include options to allow users to use darker colors for button backgrounds or a high contrast mode in the app settings. During group critiques, I also suggested other accessibility changes such as underlining text “links” that lead to new screens, clarifying text prompts on input forms, and assigning text chunks to text styles to establish hierarchy for screen reader use.
Style Guide
We created a style guide based on the user feed iteration that the client chose to help guide us before starting the high-fidelity designs. For the style guide, we included the updated colors, typography (headings and body text), and components with the new colors. I also made sure to check the content on each screen to make sure that all text were tonally consistent and adhered to the client's goal of creating a professional but fun environment. We hope that the client will be able to expand this style guide into a larger design system in the future to include branding and writing guidelines.
High-Fidelity Wireframes
We used the completed user feed screen and style guide to fill in the rest of the screens. During this step, we replaced the old components with new components, changed the grayscale colors in the wireframe to match the new colors, and added placeholder images.
Prototype
We then created an interactive prototype to show the client, developers, and other stakeholders how the app would work in practice. This prototype connects the screens in all four user flows (create an account, log into an account, set up a profile, and make a post).
Handoff
To aid developers in coding the app, we included notes and measurements in the developer handoff file. We used the notes to clarify design choices such as strokes and translucent overlays and draw attention to screens that are part of branching decision paths. The measurements mostly focused on the dimensions of unique design elements and spacing in the app. We also made sure that every chunk of text and color was assigned to a style in Figma.
Reflection
Overall, the client was delighted by our design, so much so that she decided to contract our design agency again for further assistance. However, there are a few things that I would have done differently provided that we had the time and budget. First, I would have liked to conduct more primary user research through interviews and surveys to better understand the users who we will be designing the app for, such as common pain points in existing networking apps. Although it was not within the scope of our project, usability testing is also essential to evaluate the effectiveness of our design. For example, we can use tools such as UserTesting.com to create a remote unmoderated usability test and address usability issues based on user insights and priority. Finally, the app can be further improved after it is launched. We can use quantitative research methods such as A/B testing to continue iterating on the app and introduce new features to provide a joyful user experience for all.
Coincidentally, I started this The Remote Collective project while I was traveling in Colombia, and during our group discussions, I thought about what social features I would have liked as a remote worker in a foreign country and ideated ways in which we could design our screens to make the app more accessible for users and developers. For example, I advocated for the team to use consistent spacing in multiples of 16 pixels (4, 8, 16, 32, etc.) whenever possible and reusable components so that it would be easier for developers to code for an element one time instead of using custom code for every element. I also kept usability heuristics and color contrast in mind for my designs and when reviewing designs by other team members.
As the team lead on this project, I believe that it is important to recognize that every person has their own strengths and brings unique perspectives and experiences that enrich the team. Design does not happen in a vacuum; more voices are needed for successful, inclusive designs. During this project, I learned to manage team members according to each person’s strengths and encouraged group feedback, collaboration, and communication so that every team member can learn from each other. I also learned to better explain my decisions to other designers and to the client who was less familiar with UX design. As a result, our team was able to deliver a design that all of us were proud to show the client.
.png)
