This is a project sponsored by AMERICAN EXPRESS. We designed some new user flows and app features for AMEX SERVE prepaid card mobile app, in order to promote a smarter way of living and financial management.

The team consists MBAs from Wharton and student from computer science department. I took part in the research and concept development, and was responsible for UX and UI design.

Client & Challenge

AMEX SERVE is a new kind of prepaid cards developed by American Express (AMEX). Customers can get it as easily as buying a gift card at convenient stores. Once registered, the card can be used as a fully functional debit card with very low or no fees. 

SERVE is targeting the unbanked and underbanked population, who has long been kept out of the main-stream banking services. AMEX offers has a multi-platform digital operation tool for SERVE users, including online banking and mobile app. 

However, the adoption rate is low since it was launched. Besides, the conversion rate from account opener to long-term user is also not ideal. So AMEX defines the following challenge:

"What can SERVE do to get more customers to adopt the product as their long term banking alternative?"

Research Safari

We dissect the challenge into two parts: to Get more potential users to use SERVE, and to Fix the users into long-term users. Getting more users is more about a marketing thing, while to fix current users we have is about the experience of the product itself. 

We decided to focus on how to fix the users, for that we thought it was the essence of the problem and the user experience was also an important content of any marketing campaign. 

The team members started our own journey with SERVE, using it for most our purchases for the whole week. We also interviewed over 30 people at places like discount stores, payday loans, check cashes, where it was more likely to meet SERVE’s target users.

…I don’t know where my money went. They are just gone. I just spend them somewhere…

- Steve, Car Wash Employee

…Walmart is cheaper than Walgreens. You know, I just want to spend my money smartly…

- Sarah, House Cleaner

…Sometimes I’ll have something that I want so much, shoes, new jackets, Xbox…

- John, Grocery Cashier

…I go to supermarket once a week to get daily necessities, usually spend about over 100 there…

- Mary, Single Mother

From the interviews, we get the following insights about our target users:

  • They do not have a record for past purchases or a plan for future purchases, so they don't know where money goes.
  • They do care about the price gap between different retail chains.
  • They do have something big they really want to buy.

And our goal emerges: 

"Help users save the price gaps of daily purchases for more meaningful items."

The solution consists of 3 main functions: 

Price Comparison, enable users to search and save items in shopping list, help users compare the total prices of different stores and retail chains, and end up with Mobile Payment through the app. In this way we can get finer information about users' purchases spontaneously;

Goal, allow users to set saving goals for their desired items, then add the amount they saved in Smart Saving to the goals;

Summary, more visualized and classified summary of users' recent spending.

Information Architecture

So what components we should have in order to realize those three functions? We disassembled the functions into a few pieces. For Summary, we should have:

  • A classified view of users' daily spending.
  • A sortable detailed list of the purchases made through SERVE. 

For Goals, we should have:

  • A list of goals, and the progress of each. 
  • A flow to set up new goals (amount, due day, purpose).

For Price Comparison, we should have:

  • A flow to search products.
  • A flow to sort and choose retail chains and conduct mobile payment. 
  • A flow to choose a goal, and add the amount we just saved to which.
  • A list of selected items (shopping cart). 


We explored different interaction patterns and layouts to realize the functions. We also checked other mobile banking apps and mobile retail apps to make sure we are not deviated from the industry standard. Finally, we decided to remain the side menu to navigate between different functions considering the number of functions (7-8 items) and the relative low function-switching frequency. 

We mapped out the information architecture and all the user flows, and draw screens on paper. Then we made some prototype screens with Sketch software based on the original SERVE mobile app.

We got 4 of our initial interviewees back and conducted a user test. From the test, we got the following findings:

  • Users think the combination of those functions will help them reduce unnecessary spending and save money for more meaningful things. 
  • The use frequency of Price Comparison function is higher than any other functions.
  • Users also want to have a glance at their account every time they open the app.

Based on the feedback, we made the following improvements on the info architecture: Design a “Home” screen as the default screen, containing Price Comparison portal, and key numbers linked to Account and Goals. Accordingly, we also change the item sequence in side menu.

On interaction level, we further combine the original nav bar and key number bar into a more integrated app bar. The new app bar will contain the major actions and important information of this screen (page title, tabs, filters, and key numbers). We use a gradient blue background to better differentiate the app bar from the rest of the screen of which most contents are lists of items and numbers.

We also notice that the minumum unit of info is quite typical in this case. A typical example of that unit would be a row of some item and a number (eg. A transaction and its amount). So we redesign a standard form of information unit by making more use of the divider lines. The lines can also serve as progress bars, and background lines for tabs.

Finally, we use the new info lists instead of the original pie chart to show user's account summaries. The reason behind it is that our interviewees think they care more about the comparison between budget categories, rather than the percentage of certain category over the total spending.

Final Design

We finally designed a “Home” page as the default page after logging-in and as the pivot of the experience. The page includes a standing-out search bar, in order to encourage/accommodate users to use the Price Comparison function. The page also shows key numbers about your account and goals, for quick view and shortcut.


More visualized and classified summary of user's recent expenses, provide uses with a clearer and more direct view of their financial condition.


Allow users to set saving goals for their recent desired items. Users can easily set new saving goals and check the progress of current goals.

Price Comparison & Mobile Payment

Price comparison and payment feature, helping users spend money smartly.  When in use, search for things and put them into the cart, then the app will give a list of nearby retail chains which you can sort by total amount or by distance.

Go to retail chains, put real things into real cart. When checking out, generate a QR code, then have it scanned by cashier to pay with your SERVE Card. 

Add the price gap you just saved to one of your goals. Once goals are achieved, users will get cash back and other rewards.


After three weeks filled with post-its, prototypes, and PowerPoints, we pitched our solutions to the AMEX Enterprise Growth Design team. The team thought highly of our solution and were interested by our path to more and finer user information.