Backme

Overview

Backme is an independent crowdfunding cash flow system and also a powerful pre-order tools. Users can create crowdfunding campaigns and create crowdfunding rewards on the admin panel. Project-creators can manage their campaign, backers’ data, and transaction records on the admin panel. It is important to present data clearly and quickly and accurately guiding users through complex business processes on the admin panel. I conducted user research and redesigned its admin panel based on their needs. Also, I designed and developed interfaces for new features, including writing feature tests.

Role

I worked as a product designer and front-end developer and collaborated with project manager and back-end engineer.

Method & Tool

Method: Competitive analysis, Persona, Agile, Wireframing, Prototyping, User testing
Tool: Sketch, Prott, Illustrator, HTML, CSS, Javascript, Ruby on Rails, Vue.js, Chart.js

Design Process




Define Problems & User Needs

First of all, I conducted interviews with end users including project creators, engineers and project specialists who are responsible for developing marketing strategies for launching projects, to find out the problems they encountered when they used Backme. The result shows that:




Problems


  • Users cannot easily find the search menu on the right side of the screen because the table on the left is too large and users should use a scrollbar to explore the whole interface.
  • Users can hardly find important information since there is no tags or labels in the interface.
  • Project specialists need to spend a lot of time explaining how to use the system for their clients.
  • There is no design guideline for the system and it is hard for engineers to develop the system.
  • The process of creating rewards also causes confusion for both project specialists and project creators.
  • The Email marketing system needs to be updated and also allow users to view the open rate and click rate.
  • Project Specialists wants to see the conversion rate and data resulted from different marketing strategies so that he can modify his strategies immediately.



Solution

After interviewing end users, we defined the problems and seperate them into different tasks. The tasks can be categorized into “New Features” and “Optimize or Redesign the System”. I will introduce 2 tasks and their design.



Timeline & Tasks


Task 1 : Redesign Project List and Project Dashboard

To solve the problem that the search bar was on the right side and was not easy to be found by users, I redesigned the project list. Users can choose to use “Grid View” which showcases photo and brief introduction of each project or “List View” which can display more projects in the limited space. Moreover, I added tags and labels on the list so that users can find out the project they want more quickly. On the other hand, I reorganized the information architecture of Project Dashboard since many users cannot find out project information they need. I interviewed several end users to categorize the information and decide their order.

Information Architecture








Wireframes

I also created wireframes to discuss with engineers and project specialists to see if this design is feasible or not. Also, I could confirm if this design sove their problems or not.






High-Fidelity Prototype







Results

This design provides more clear information and intructions and reduces the costs of customer service. Also it reduces workload for project specialists since they can quickly find out information they need.

Task 2 : Referral URLs Analytics

For project specialists, they need to develop and modify marketing strategies based on conversion rate of advertisement everyday. They access the conversion rate by using UTM parameters which are simply tags you add to a URL — when your link is clicked, the tags are sent back to Google Analytics and tracked. However, they still need to calculate how much money each link makes. Moreover, they should view the data on Google Analytics and compare the conversion rate with the fund raised on Backme.

To solve the problem, we access the tracking data and connect it to Backme. I designed interfaces that condensed huge amounts of data into charts which users can easily explore Click Through Rate(CTR) and the money each promotion activity made. Also, I designed a Return On Advertising Spend (ROAS) calculator. After switching to calculator mode, users can key in each advertising cost and quickly get ROAS.




Development

Several modern web development frameworks were implemented in this project, including Ruby on Rails, Bootstrap and CSS Sass. I mainly took charge of the front-end work (html, css, javascript, Vue.js, D3.js, Chart.js) and used GitHub to work with back-end developers. It was efficient to be both the designer and developer of the project because I had full control of the look of the end result. Involving in front-end and design work, allow me to think from both perspectives and consider more about the feasibility design.




Backme Guideline & Module

At first, there was a simple design guideline which provided colors, font styles and basic UI components. However, with the development of new features, we need to create more UI components to adopt to new needs. To make the styles of Backme more consistent, I design a more accurate, clear and reusable UI guideline and modules.