My Role
Product Designer
My Team
1 PM, 4 Product Designers (including me), 5 developers
Duration
8 months
(Sep 2023 - Apr 2024)
Top Skills
Iterative design, Product thinking, Collaboration
Microvan Inc. | UBC Launchpad Project
Streamlining the shift to online construction auctions for 4700+ users
Home
Listings
Tutorial
Contact Us
Won Bids
Download Statement of Account
Nov 5-7 | 28 hrs 44 min 6 sec
You have until Nov. 21st, 2023 to view and download your statement of account.
Hino 10W Tractor Head Double Differential Projector Light 1992
Quick view
₱210,000
Your bid
View
Quick view
Model
SS2VJB
Chassis
SS2VJB-10038
Engine no.
V25C-B10153
Hino 10W Tractor Head Double Differential Projector Light 1992
Quick view
₱210,000
Your bid
View
Quick view
Model
SS2VJB
Chassis
SS2VJB-10038
Engine no.
V25C-B10153
Past Bids
Feb 12-16, 2023
Choose which auction to view
Notifications
Your statement is ready
You have 14 days to view your
statement of accounts
You won 10 vehicles!
View your bid summary
1 hour left until auction ends
Put in you bids by 21:59!
You have been outbid
Revisit [vehicle name]
Notification settings
Microvan Inc.
auctions.microvan.com
background
What is Microvan?
Company: Microvan is a construction and truck auction company focusing on the importation, trade and sale of new and used construction and industrial machinery, trucks and vehicles in Subic, Philippines. Previously, Microvan would do in-person auctions every month. However, due to the pandemic, many of their competitors have shifted to online auctions, calling for the need for a shift to a virtual auction platform.
User Base: Microvan’s target market consists of construction companies, equipment rental companies, companies that need trucks, and logistics companies for smaller trucks.
Skip to final designs ↓
understanding users
Stakeholder Interview
As we did not have direct access to bidders since auctions occurred before the pandemic, we interviewed our stakeholder, the VP of Microvan. From the interview, our 3 main goals for the design were:
Understand current user flow and bidding experience
Gaps in the past live auction experience
Bidder challenges and areas of friction
Considerations & constraints
Started from scratch with no existing metrics or user base
Limited time for research - rushed handoff to developers, stakeholder deadlines
Out of scope: handling payment system, security, dealing with vehicles on the system
PROBLEM DISCOVERY
The Problem: Bidders face a cumbersome and unclear process when tracking their bids.
Based on the stakeholder’s experience with past auctions, bidders experienced the following pain points from live auctions. From these challenges, I came up with ways to solve these problems for virtual auctions:
pain point #1
Difficulty monitoring multiple vehicles and past bids, as they had to go to separate lots to bid for items in live auctions.
SOLUTION #1
Reduce confusion among bidders by creating an easily-viewable list of vehicles they have bidded or saved
pain point #2
Tedious and manual process retrieving statement of account, causing hourly requests from bidders
SOLUTION #2
Reduce unnecessary friction with staff by notifying bidders when and how to expect receiving statement of account
pain point #3
Difficult to understand auction process and status of their vehicles, causing bidders to face frustration waiting or simply leave
SOLUTION #3
Improve clarity by notifying bidders for each aspect of the bidding process (auction start, being outbid, etc.)
Main Objectives
01
Gain user’s trust online, generate satisfaction & loyalty
Key Performance Indicators:
Increase in conversion rate: Track percentage of bidders who (successfully) place bids
Fewer complaints to employees
Higher satisfaction rates from surveys
02
Reduce friction with contacting employees about account
Key Performance Indicators:
High Statement of Account accessibility score (bidder rates how easy or convenient it is to access their account statement with score of 1-lowest to 5-highest after receiving it)
tackling the problem
How might we streamline the bidding process for construction company bidders to reduce confusion?
🧾
How can we improve accessibility of account statements for Microvan users?
🏆
How can we enhance user understanding of their bid status, history, saved items to minimize unnecessary friction?
what will the solution do?
Ensuring the bidding process is clear and connected
To further understand and improve Microvan’s bidding process, I mapped out an existing user flow from live auctions, and adapted it to accommodate virtual auctions and tackle the pain points outlined before.
Existing user flow (live auction)
In-person, it is very easy to lose bidders since all the information is released at once, and bidders are not notified of updates.
Pros:
Instant gratification and social interaction from bidding at live auctions
Cons:
Easy to leave auction just from one look at the bid book, items could be missed too because no images with print
Can only bid in one lot at a time (has a set of items)
Difficult to track items of interest
While this process is no longer the same for a virtual platform, there are many opportunities to streamline the bidding experience online, minimize user churning, and maximize user retention/excitement.
Opportunities for virtual platform:
Notifications to keep bidders engaged and excited for new items
An easier way to save items of interest
An easier way to track bidded items
New user flow
🎯
Focus: making it transparent for users throughout the entire bidding process to reduce friction, redundant communication, and confusion between Microvan employees and bidders.
💡gets users excited about auction
💡keeps users excited about auction
💡keeps users engaged in auction
💡allows users to bid on and track multiple items
💡maintains transparency with users
💡maintains re-bidding excitement from live auctions
🏆 boost user’s satisfaction levels to keep them bidding the next day
💡 reduce user frustration retrieving Statement of Account, reduce friction with Microvan employee
😮💨 prevents users from getting overwhelmed by long list of items
SIGNIFICANT design DECISIONS
Solution: designing profile and notification features to create transparency with the bidding process.
While I collaboratively outlined the scope and product goals, sketched out low fidelity design layouts, and ideated key features with 3 other designers, we all split off to design certain pages and features individually. We discussed our designs and provided mutual feedback to improve them.
I was in charge of the following flows:
User Profile
To allow bidders to track their bids, I made a user profile page to let bidders:
See a summary of their bid history: wins, losses, and current/past bids
View items they have saved and want to reconsider for bidding
Access their personal information and Statement of Account to then be saved, emailed, or printed
Notifications
Keeping bidders engaged will be a crucial aspect of the virtual platform. Notifications will allow users to:
Stay in the loop on their status in the bidding process
Get notified when they are verified to register for the auction, they are outbid, they have winning bids, the auction starts or ends, and accessing their Statement of Account
Watchlist
Iteration #1: Creating a watchlist for users to save bids they’re eyeing.
Option 1: only show maximum 2 watchlist items, need to click to see all
Pros: Less overwhelming; easier to reach/see notification settings (less scrolling) especially if they add a lot of items to watch list
Cons: More click throughs to access watchlist, limited to seeing only 2 items
Considerations: How to order watchlist items if there are a lot?
Option 2: show all items in watchlist on the page
Pro: Can easily scroll through all items, quickly view everything
Cons: More scrolling to get to notification settings
considerations. Depends on how much they need to access notification settings -> or perhaps another way to edit notifications (i.e. not in the same page as watchlist since they’re not connected)
Iteration #2:
Created tabs for saved and bidded items; moved notification settings out
Tabs allow users to more easily access and differentiate bidded vs saved items.
Moved notification settings to the left and to another page, as it is irrelevant to the vehicle item list, and users may not need to access this frequently.
Bidding History
Iteration #1: current and past bids viewable
Pros: Clean interface, easy to find information from past bids, current bid items are distinctly separated but seem fixed.
Cons: Showing past bids stores a lot of data, especially if each has an individual statement of account. Current bid cards are also inconsistent with the rounded, shadow cards on the bidding page - could seem like the cards accessed from profile are not editable, when in fact they can be clicked.
Iteration #2: Removed past bids, made cards consistent
Main design decisions:
Changed title
Since the main purpose of the bidding history is to show what the user has bidded on and won (which would take money out of their account), I changed the title to “Won Bids” instead of “Current Bids”. Bids that the user has lost can still be viewed from their saved list. This lets users focus on their wins and what will actually be deducted from their deposited amount.
Card design
I made the cards consistent with the bidding page design, and more instantly tells users they can interact with the cards unlike the static dividers previously.
Minimizing past bids section
After consulting with our client, it was most relevant to just show the last 3 auctions’ bidding history, since Microvan will only hold 1-2 auctions per year. This also reduces cognitive load.
It is unlikely that users will need to access their Statement of Accounts (SoA) after the auction, so storing the data will not be necessary. Users tend to look for their SoA immediately after the auction, in which they can download from the “Won Bids” section for the current auction until 2 weeks after the auction ends. After that period, they can contact Microvan directly.
Fleshed out Prototype
Final Designs
The current website is viewable here.
User Profile: Watchlist
Created tabs for saved and bidded items
User Profile: Bid History
Highlighted user’s winning bids and allowed them to view past bids
Notifications panel
Keeping users excited and engaged in their auction progress and wins
impact + solution validation
Projected 40% increase in successful bids,
being developed for 4700+ users
Our designs for Microvan’s auction website will be implemented soon by our team of developers. However, with our design decisions, we project an increase in successful bids, an efficiency increase from speeding up the bidding process compared to live auctions, and positive results from user satisfaction surveys. We also hope to track an accessibility score for accessing bidders’ Statement of Accounts.
learning + reflection
Key Takeaways
🖨 Making multiple iterations and always collecting feedback
Being my first time working with other designers, I found it incredibly helpful to bounce ideas off my teammates to give me more confidence in my design decisions, and to provide perspectives on our users that I might not have thought about before. Collecting feedback was incredibly helpful for me to grow my design perception and focus on tying designs back to users through my iterations.
🧗♀️ Working with limited user data
As we didn’t have access to a pool of users since we were starting from scratch, most of my knowledge of the users came from consulting with the client from their past experiences interacting with bidders. When I was indecisive or not confident about a design, I learned to always focus on the user’s needs and objectives, and leave out other design details to minimize unnecessary cognitive load, just as I did for the bidding history page.
🏃♀️There are always more iterations to be made
This project was longer than any other design project I had done, so through many discussions and walkthroughs, I learned there are always ways to improve the designs. When I thought one screen was finished, myself or my teammate would raise another question that challenged a previously agreed on design decision. Otherwise, we were always adjusting details such as spacing and sizing to perfect the consistency across our separately-designed screens.
impact + solution validation
What’s next for Microvan?
💻 Developer Handoff: Turning the designs into a fully functional site
Currently, the development of the website is in progress by our developers, but we have already had meetings with our development team and have thoroughly annotated functions and documented decisions already in our design file for a smooth handoff.
💠 Fleshing out a design system: Making future designs scalable and consistent
We have not yet establish an intricate design system to house all of our buttons, icons, panels, and other components for future use, hand off to Microvan employees if other designs take on their website as a project, or further define and standardize visual elements in general.
📊 Gathering feedback from users
Since we didn’t have much user data to begin with, tracking metrics from Microvan’s users would be incredibly helpful to determine areas of improvement for making the designs more intuitive--whether it be short surveys for onboarding users, satisfaction ratings on certain features, or testing the first auction.
