Transfernation
Client portal for a non-profit food transfer company
Overview
Transfernation transports your excess food away from landfills and towards people & places that need it. They handle the matching, the physical transportation of the food, collecting impact data, and processing companies’ Enhanced Tax Deduction.
I created and designed a client portal for Transfernation to eliminate the process of employees manually emailing clients summary and invoice reports.
Timeline
Oct - Dec 2020
Role
UX Designer
Tools
Figma, Whimsical, Keynote, Zoom, ProCreate
Methodologies
Comparative Research, Usability Test, Feature Prioritization, Design Studio, User Flow, Wireframes, Prototypes
Problem
Transfernation is a non-profit operating with a small team. The current process to send invoices and summary reports is via email, which takes extra time and correspondence between staff and clients.
How might we reduce dependency on email in order to receive reports and invoices in a timely manner?
Research
After conducting a stakeholder interview, I was passed along the user research that Transfernation’s team had already gathered prior to bringing me onto this project. My job was to synthesize the data and find the common trends that would lead me to my design decisions.
User Personas
Upon interpreting the user research provided, I identified two user personas: internal employee and external client. Both users needed a common space to manage and view summary reports and invoices in an accessible and professional platform. The internal employee needed the extra feature of uploading and editing reports to the portal.
Comparative Research & Feature Prioritization
Comparative research was done to mainly evaluate how invoice, subscription plans, and history of services are managed on these sites. These are the primary functions the stakeholder expressed the client portal should be able to provide for their clients.
With so many features that could be included, a feature prioritization was conducted to bring our focus to those that the users needed most. Must haves were:
Ability to upload and download reports
View history of pick up activity
View summary and invoice reports broken down by quarter and year
A way to update the payment information on file
Vision & Design
A design studio was conducted to sketch out possible designs for all the screens needed in the client portal. All must have features were included and I tried to incorporate all other extra features if possible.
Sketches & Mid-Fi wireframes
Mid-Fi Usability Test
Following a usability test script, the mid-fi prototype was tested through a series of three tasks among a group of four users over Zoom.
Key Takeaways
Make the download button more noticeable
Add clarifying language on the page to set better expectations for report content
Include descriptions for subscription plans
Hi-Fi Wireframes
The design was brought to life by incorporating the company’s existing logo, color palette and typography into the hi-fi prototype. I established main design components to ensure consistency throughout.
Results from the mid-fi usability test affected the type of changes that were made fo the hi-fi wireframes. I made sure to incorporate the most outstanding issues from the mid-fi usability test results.
Issue: Users had success locating the download button but not without displaying some hesitation first.
Solution: Made the download button default as inactive. A report must be selected via the checkbox in order to activate and draw the users’ eye towards the download button.
Issue: User feedback was that they were unaware what the difference between subscriptions plans were, so they weren’t sure what they were paying for.
Solution: All subscription plans are outlined on cards with the unselected ones grayed out but still visible.
Key Takeaways
Although the download button was greatly improved based on user feedback, there is still an opportunity for additional testing around the download button.
All other tasks were direct successes!
Next Steps
Conduct additional testing to understand user behaviors around the upload and download functionalities.
Understand the impact of a Stripe integration - what will users be able to edit in their account profile?
Explore additional functionalities such as adding user accounts and payment inside the portal.
Consider how the Transfernation app and client portal can potentially link up in the future. (i.e. Driver directly inputting pickup stats, homepage dashboard, etc.)