FrontStream
Overview
FrontStream provides an all-in-one digital fundraising platform that enables nonprofit organizations to manage, plan, process and promote their online fundraising events.
Role
- Wireframes
- UI Design
- Rapid Prototyping
- Interactive Design
- Responsive Web Design
Tech
- HTML
- CSS
- SASS
- Bootstrap
- JQuery
FrontStream acquired BiddingForGood, the leading online auction and event management company, in 2015 to expand and improve the FrontStream platform. As part of the acquisition I continued my role as Front End Designer and Developer responsible for rebranding all BiddingForGood web sites to reflect the FrontStream style guide. In addition, I led the redesign of the BiddingForGood mobile auction site.
Mobile Auction Redesign
To kick-off the redesign I met with individual members of the management, engineering, sales, marketing and client services teams to gather their insights and perspectives on the issues the current mobile site had with respect to design and usability. Based on their collective feedback I derived the key objective and priorities that needed to be addressed in the redesign.
Original Mobile Design
Mobile Login
Auction Home
Mobile Design Objective
Create a mobile experience for auction attendees based on the assumption that they know nothing about transacting on mobile devices and have no time to figure things out.
Mobile Design Priorities
- Address the confusion over the "waffle" icon navigation.
- Make the "Bid Alerts" functionality readily apparent and understandable.
- Ensure that the auction home page is easy to use and engages visitors.
- Identify the next most visited pages that can be improved.
- Determine the impact of making the font size larger to improve legibility for older attendees.
Wireframes
Main Menu
As the first step, I created a wireframe to address the confusion created by the "waffle" icon navigation. Usability testing showed that users did not know what the icon represented. As a result they had difficulty figuring out how to login or register for the auction. To solve this problem, I designed a menu bar that exposed the critical interactions for both the logged-out and logged-in states. The new menu incorporated both iconography and text to clearly indicate what each icon represents.
Auction Home Wireframe
The next step was to "get the auction homepage right". To reflect a more modern mobile design approach, I replaced the buttons with iconography and text to indicate what each icon represents. The search was also moved from the top into the main screen so users can instantly search for items.
Mobile Redesign
I presented the wireframe design concepts to Product Management and the Executive Team who collectively agreed the design approach met both the objective and priorities and signed-off on starting to code the design.
Auction Home
A badge was added to the "Messages" icon to indicate the user has received a winning or outbid message and an alert notification is also displayed. The body font size was increased to make the text more legible. Featured items and sponsorship images were also added in the course of the redesign.
Featured Item
The item bid page was updated to include multiple item images. Tapping the image displays a larger responsive version.
Navigation
A hamburger icon was added above the menu bar allowing users to navigate from other pages without having to return to the homepage screen.
Results
Employing mobile bidding during our live event felt radically different. In the end, we garnered 700 bids and raised nearly three times the revenue of last year's auction. The results speak volumes!