Yunbaoxiao（云报销）is a software company that develops a travel and expense web and mobile application for personal and business use. Its namesake application allows users to manage expense transactions, upload receipts, generate receipts from online sales and automatically create expense reports as well as allows finance teams to approve and export reports.
Founded within a year, it has successfully served over 300 companies in China. During that time, as the chief designer in this startup company, I took responsibility for branding, user research, UX and UI Design and seamlessly with project managers and programmers in this team.
At the very beginning, we discovered that it was painful for individual staff to gather receipts and wait for approval from managers.
Is it possible for staff to just take a picture of the receipts and immediately get approval from managers and finance teams? Can we free the finance teams from checking hundreds of and even thousands of receipts by the end of each month? Is there a way that managers can approve expense at anytime and everywhere?
2. Competitive Analysis
These were 4 potential competitors in the market at that time. I did this research and made this form to compare them.
3. Branding & Guideline
- Logo Design
The logo conveys the idea that people can manage expense transactions on the cloud. We chose a feminist bright pink color because we want to be more friendly and closer to our users.
- Icon Design
To make the product more integrated, I also created this set of icons which are all composed of lines, rounded corners and gaps between lines.
- Responsive Design Guideline
I create this guideline so that programmers could easily understand and the UI of the whole app was more consistent. It turned out to be very effective and efficient.
4. Card Sorting
After the user research (please look for the detail on this page), we were able to sort out key features of our product.
5. Use Flow
For different functions and features of the product, I created use flows for each of then. For example, here is the use flow for landing scenario when a user first opens the app/website.
6. Low Fidelity Prototype
Before jumping to computer, I kept sketching on paper quickly and then discussed with project managers and programmers so that we were on the same page before further design.
Then I made these wireframes to clearly demonstrate the logic behind each page. Here is the example of profile pages.
7. Visual Design
Here is the profile pages design. These pages change according to different users from general staff to admin user.
Here are the Progressive Onboarding Design and Empty States Design for new users.
When the trial expires, there will be an alert and a way to get official version by contracting the staff from our company.
Connect Bank Account
8. High Fidelity Prototype with Origami
I also used Facebbook Origami to create interactive prototype at that time. It saved a lot of coding time as my iOS programmer could used the code exported from Quartz Composer here.