About Flikshop
To reduce recidivism, Flikshop connects families and friends with their incarcerated loved ones through mails.
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 the mobile app that allow users to send postcards and photos to people inside.
Flikshop Neighborhood
Having built connections with more than 85,000 incarcerated people in jails and prisons, Flikshop's next goal was to leverage this relationships and expand the influence by bringing community, educational and second chance hiring programs in.
We wanted to prepare people for release by sharing the resources in our Neighborhood. On the other hand, we were also helping organizations to find the targeted audience.
The problems with prototype v1.
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.
After multiple discussions with the PM and CEO, I gained a clearer understanding of the rationale behind the features and how we intended to support users in completing their tasks.
Project Goal
Ultimately, the team reached a consensus that I should fucos on the basic features for time being, and collaborate with the PM in creating a more comprehensive product roadmap. Hence my goal for this project became:
To build an MVP that allows user to send postcards and letter, pay the money, and check the results.
Design Process
01 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.
02 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.
03 Building 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.
Design
The nuances that make design user-friendly
Besides focusing on the overall user flow, I also pay 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 before performing tasks that are difficult to reverse. 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. However, it’s common in competitors' designs to show detailed billing information. Some will also provide real-time shipping status update.
Design example: Campaign Creation
In the Flikshop Neighborhood web app, users will be able to create a postcard or upload a document and send it to the list of contacts Flikshop has built over time. We designed this feature based on years of experience delivering mail to prisons and jails. This is where small nuances can make a huge difference in creating a great user experience.
For example, to avoid overwhelming the mailroom and causing delays, we suggest users 'stagger the mail' based on the number of recipients they select. There are also reminders about any mailing restrictions specific to each facility.
Trying different design options
Show the discount clearly
In my initial approach, I aimed to provide more flexibility and ease of use by allowing users to purchase Flikshop Credits individually, with a discounted per-credit price once they surpassed certain thresholds.
After internal testing and discussions with the CEO and the back-end developer, we decided that users would only receive discounts by purchasing packages with a set number of Credits. In the final design, I also put the package in cards which makes it easier for users to see how many Credits they have purchased.
A better way to create staggering mail
When designing how to help users split a campaign and deliver letters in smaller batches, my initial idea was to create something similar to a calendar where users could schedule shipments by date.
However, considering the complexity and the back-end logic in the existing prototype, I ultimately designed three dropdown menus where users can set the start date, repeat frequency, and number of shipments.
Balancing user needs with business goals
As a product designer, I worked closely with the CEO throughout the entire product development 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 and the CEO had initially come up with a concept that emphasized Flikshop's ability to provide data, but the design did not take into account what users actually wanted from the dashboard and felt overwhelming. To avoid repeating the same mistake, we spoke with a pilot user, which gave us a better understanding of his situation and expectations.
Dashboard
Before
- Putting the data without much consideration of the user.
After
Help the user keep track of their campaign
We put a new section for the upcoming shipment and transaction history in the dashboard, so users can stay on top of things. The cross-functional collaboration between the design and engineer team made the connections with USPS and payment possible.
Still showing our strength in data
Our final design incorporates some new sections that directly address users' needs while still meeting the business requirements of highlighting data visualizations.
Take-away:
Don't give up on advocating for chances to talk to the user
While the table research helped, I felt we were missing the vital perspective of actual users. Despite the time constraints, I kept advocating for usability testing. I explained to the CEO how crucial real user feedback is for shaping a successful product. Midway through the project, I convinced him to connect with a pilot user he had worked with before. This led to a usability test and interview, providing insights that we couldn’t have gathered otherwise.
The feedbacks helped us improved our design and mapped out future work. This experience taught me to never give up on advocating for opportunities to connect with users, even when it seems difficult.
