About

Projects

Resume

Available for work

New Product

MVP for Flikshop Neighborhood

Duration :

Jul 2024 - Dec 2024

Skills :

Product Roadmap, UX Design, Design System

Tools:

Figma, FigJam, Jira

Teams:

1 Designer, 1 PM, 2 Developers

My Contribution

Created a new design system based on Bootstrap framework
Mapped out comprehensive structure and user flow for Flikshop Neighborhood
Launched the MVP and tested on pilot users

Background

Connecting families to incarcerated people — and beyond.

To reduce recidivism, Flikshop connects families and friends with their incarcerated loved ones through mail. Without access to the internet, incarcerated people are basically detached from their social support and the ever-changing world, making it harder for them to reenter society. That's why Flikshop has a mobile app that allows users to send postcards and photos to people inside.

The Product

Flikshop Neighborhood

Having built connections with more than 85,000 incarcerated people in jails and prisons, Flikshop's next goal was to leverage these relationships and expand the influence by bringing community, educational, and second chance hiring programs in.

To prepare people for release, Flikshop is building a Neighborhood with shared resources. On the other hand, Flikshop was also helping organizations to find their targeted audience.

Challenge

The problems with the old prototype

When I was introduced to this project, I was handed a prototype created by the previous designer. However, many pages were missing from the user flow, and there were several glaring issues in the UI design. Most importantly, I was expected to roll out a functional prototype as soon as possible, as the project had already been stuck in the backlog for a year.

Goal

Project Goal

After rounds of discussion, the team decided to focus on the basic features and roll out the product quickly. The second priority was to collaborate with the PM in creating a more comprehensive product roadmap. My role as a designer thus became:

We should

"Build an MVP that allows users to send postcards and letters, pay the money, and check the results."

Process

Design Process

Skipped the user interview and learned from best practices

Due to the tight schedule, I didn't get the chance to conduct user research. However, since my goal for the project was to build a minimum viable product, I decided to learn from best practices to fill in the gaps in the user flow. I researched other online marketing and direct mail providers, focusing on the design of key features like campaign creation, shipping, and contact management.

Mapped out the user flow & wireframe

Using the competitor study I compiled, I mapped the user flow into a flowchart, which gave me a clearer view of the pages that needed to be filled. To further visualize the ideas, I also created wireframes based on the new user flow. The flowchart and wireframes also proved helpful in discussions with the PM and the CEO.

Built a functional prototype as a team

Midway through the project, I was assigned a new PM who also took on some of the design responsibilities. We collaborated to turn the wireframe I created into a high-fidelity prototype, providing feedback on each other's designs through regular meetings.

Competitive analysis

The nuances that make design user-friendly

Besides focusing on the overall user flow, I also paid close attention to the nuances of how competitors design their UI/UX — to create an experience that is intuitive, efficient, and conveys a sense of trust. These three factors are particularly important because we not only want to ensure that users can deliver their campaigns seamlessly, but also foster a sense of identity as part of the Flikshop Neighborhood.

Provide confirmation

It's important to inform users of the outcomes of their actions and prompt them to double-check. For example, once users enter the shipping information, the status will update accordingly on Mailchimp's shipping page.

Support bulk actions

Bulk actions allow users to save time on repetitive tasks, thereby improving efficiency. Contact information and history records are two common areas where interfaces are designed to support bulk actions.

Let user be in charge

Users have to purchase Flikshop Credits to pay for campaigns, but the old prototype lacked a clear explanation of how each campaign was charged. Yet we found it's common to show detailed billing information. Some competitors even provide real-time shipping status updates.

Design Iteration

Create Campaign

With Flikshop Neighborhood, users can create a postcard and mail it. We designed this feature based on years of experience delivering mail to prisons and jails.

For example, to prevent overwhelming the mail system and ensuring timely delivery, the system will recommend staggering the mail when necessary. This means to divide a large recipient list into smaller batches and sending them sequentially rather than all at once.

With Flikshop Neighborhood, users can create a postcard and mail it. We designed this feature based on years of experience delivering mail to prisons and jails.

A better way to create staggering mail

When designing how to help users split a campaign, my initial idea was to create something similar to a calendar where users could schedule shipments by choosing the exact date.

After discussing with the dev team, I realized the difficulties to implement the changes. Our calendar component didn’t support multi-selection, and the back-end would require new fields and a logic rewrite. So I went through rounds of iteration on this feature.

When designing how to help users split a campaign, my initial idea was to create something similar to a calendar where users could schedule shipments by choosing the exact date.

Design Philosophy

Balancing user needs with business goals

As a product designer, I worked closely with the CEO throughout the entire process to ensure that the design not only addressed users' needs but also served the business goals. Maintaining this balance was particularly important when I designed the dashboard, as it forms the first impression users get when they log in.

The former designer initially came up with a concept that emphasized Flikshop's ability to provide data, but he didn't take account of what the users actually wanted. To avoid repeating the same mistake, we spoke with several pilot users with our design. This gave us a better understanding of their expectations.

Reflection

Take-away

Don’t give up on advocating for user interviews

While the table research helped, I felt we were missing the vital perspective from the actual users. Despite tight schedule, I kept advocating for usability testing. I explained how crucial real user feedback is for shaping a successful product. Midway through the project, I convinced the CEO to connect us with a NGO worker.

This led to a usability test and interview, providing insights that we couldn't have gathered otherwise. The feedback helped us improve our design and map out future work. This experience taught me to never give up on finding ways to connect with the users, even when it seems difficult.

OEC - Document redesign

OEC - UX Writing

Let’s connect!

Like the projects you see?
Send me an email or find me through the links below. Can’t wait to create design together :)

Email: janet.wan.ting.lo@gmail.com

Medium

Let’s connect!

Like the projects you see?
Send me an email or find me through the links below. Can’t wait to create design together :)

Email: janet.wan.ting.lo@gmail.com