U.S. Trading Company
U.S. Trading Company is a leading grocery and food service distributor located in California. For 30 years, it has been providing Southeast asian food to customers throughout the United States and abroad. I worked with their marketing team and designed their first iOS and Android app in the Spring of 2019. The iOS app was released in March, 2020; The Android app was released in April, 2020.
Project Summary
Background: U.S. Trading Company is a B2B food distributor in California that has been running for 30 years. This is the first time they brought their business to the E-Commerce market. With a small marketing team on board, they have sketched a mid-fi wireframes of main screens already and needed a product designer’s assistance to give UX advice, work on the visual elements, mock up the full app and hand off the final prototype to the dev team.
Problem: With increasing demands of orders from both old & new customers and the rise of E-Commerce market, UST’s traditional way: customers place orders via phones and faxes is not working well.
Solution: Create a mobile app for customers to view products, place orders, check inventories, make payments…all activities at their fingertips.
Role: Lead Designer (30% UX, 70% UI)
Time: February,2019 - May, 2019
Team: A small marketing team from U.S Trading company, including a project coordinator and a graphic designer
Tools: Sketch, Pen & paper, Invision
Approach
When this project was handed over by me, user research and the mid-fi wireframes have already been done by the UST marketing team. By following design thinking method, I was brought in at the Ideate and Prototype stage. At the initial meeting, after going through the wireframes, we addressed below as a foundation for me to move forward to the next step:
The Goal of Business (B2B)
- UST is a B2B company, which means their customers are business owners. Most of their customers have established a steady and long relationship with them with an account. Their customers understand the products and purchase process very well already, so UST doesn’t need a fancy interface to attract customers, but as clean and convenient as possible for users to take actions. No onboarding for the app is necessary as well.
- To promote new products and up-sell goods, it’s important to present goods with core features.
Needs of the users
- The target users are business owners that already have an account with UST. They should be able to log in directly with their existing customer number and view their account information right away, which Including backorder, reorder, order status etc.
- Easy to navigate to different product categories
- Language can be switched between Chinese and English (Default is English), since the products are Southeast Asian food and a lot of customers can only speak Chinese
- The current communication methods between customers and UST are phone calls. This method should be reachable in the app as well, especially when users are processing their orders.
The possibilities of technology
- The app should be both iOS and Android friendly. UST’s wireframes shows the design of a mixed of both system, it includes bottom navigation bars as well as the navigation drawer. Development team confirms that this navigation combo is implementable.
Mood Boards & Color Definition
The UST team was very flexible on the UI elements. They wanted me to explore as much as I can and provide them some options to choose from. Since the products they sell are mainly Southeast Asian food, I created two mood boards to highlight what SouthEast Asia remind us: spicy, street food, tropical, hot, blue ocean.
Another consideration I had was that there would be millions of products with photos shown on the product page, I would keep the colors minimum. Stay with white background, black texts, less borders. On the typography side, since this will be an information heavy app - customer will have to go through their long orders and read product information, I’d go with san-serif without hesitation.
I picked some common colors from the mood boards and mocked up a few version of home screens. UST teams decided to go with Version 1 with solid color as categories circles.
Design by Groups of Screens for both iOS and Android
When the color and fonts were defined and approved, we were trying to find the best and most efficient way to work further.
The UST team hired a small dev team to help implement the app but they are not bringing them into the decision making process. Meanwhile, we are all located in different parts of the country. We decided to work off the screens by groups and communicate through phones and emails on a daily basis. Each group of screens needed to have both iOS and Android interface finished to move to next group.
Group 1 Key Screens
UST team sent me the logo and illustration to use for the log in screens. Since the app was built for existing customers, we didn’t need the registration feature.
Group 2 Key Screens
When designing for group 2’s screens, there were a few challenges.
Challenge1: Finalize icons and labels. We wanted to make sure that customers were fully aware of any promotions and able to navigate easily by going through the categories list.
Solution: Worked as a team to view different icon options. Besides using the theme color of orange, we decided to add the red color as a “sale“ color to promote certain products.
Challenge2: Create two different home screens. UST wanted to have two home screens for customer to switch between. One is a regular length homepage with quick access buttons to account; the other is a longer home screen with product details.
Solution: Version 1- make it as clean as possible, using two different colors for different buttons. Product buttons are in orange with icons, while quick access buttons are grey with texts only. Version 2 - use light grey background and light grey borders to divide different sections. Keep white spacing between images and icons so that the information doesn’t look cluttered.
Group 3 & 4 Key Screens
Challenge: UST team wanted a drawer feature to be appear on both iOS and Android interface. But as a designer, based on the Human Interaction Design principles, I didn’t think it was a necessary feature and it would cause confusion to users.
Solution: View at other competitors app and check with development team to see the technology possibility. There were a few other B2B apps on the market that UST liked, and one of them was using a similar drawer showing categories. On the development side, it also didn’t bother them to use this feature on iOS, though drawer treatment is usually a unique feature on Android. We decided to use the drawer feature as for now and get users’ feedback later when the app is released.
Group 5, 6 & 7 Key Screens
The last three groups are comparative easier to work on by keeping the UI elements consistent with other groups.