Doing UI Stuff as an Engineer

2019-09

During the summer of 2019, I had my internship at LeanCloud’s Beijing HQ as a Technical Support Engineer. Although the majority of my duty was to handle clients’ technical issues and write code for internal systems, the company allowed me the freedom to work on any project that caught my interest, which led me to pursue a role as a UI/UX designer on some of my projects.

Demo iOS App

The first thing I designed was a demo iOS app for the company’s real-time messaging SDK. The purpose of the app was to display the capabilities of the SDK to our potential clients. When I first started my work, I built a lot of custom components that involved my personal style and my perception of the company’s style with the belief that this could make the app more visually attractive. However, I failed to realize that the clients could be distracted from the core features offered by our SDK, and it would be hard for our iOS engineer to finish all the custom UI components before the time we expected the app to be launched (thanks to the reminders from my colleagues). Therefore, I discarded my first draft and redesigned everything by incorporating more native UI components while still preserving a certain amount of fun elements that kept the app playful (like using emojis for users’ profile pictures). I also ensured that the overall logic of the app matches those of other popular messaging apps so our clients can quickly pick up the app and easily navigate through different views.

The demo iOS app.

“Help” Page

The next thing I did was to redesign the “Help” page on the company’s official website. In our previous version, all the methods for clients to reach the company were listed in parallel, with each of them noted with a specific purpose it serves (e.g., email for account-related issues, ticket for technical issues, and phone for pre-sale inquiries and emergency contact). However, we noticed that many of our clients ignored the purpose specified for each contact method and repeatedly chose the method that could reach a real person in our company with the shortest waiting time: the phone. This brought a lot of unexpected phone calls to us and wasted a lot of person-hours throughout the company. To deal with the problem, I first researched how other companies designed their “Help” pages. The companies (products) I looked into include Heroku, Firebase, Uber, and Apple. I played around with the relevant pages on their websites and made some diagrams reflecting the steps a client needs to take to get a problem solved.

Apple’s flow for getting help.

After doing the research, I wrote a proposal discussing the background of the problem, my analysis of other companies’ strategies, and my solution to the problem. For the solution, I borrowed Apple’s idea to have clients choose what problems they’re facing and display only the contact methods that work for their problems. Since we had a limited number of products, I made only a single level of questions so that after a client comes to the page, they only need to make a single click to choose the question that matches their problem.

List of questions.

After doing so, they will see a short paragraph describing a possible way to solve the problem themselves, with applicable contact methods below.

Applicable solutions displayed after a question is chosen.

LeanCloud has already launched the new “Help” page. You can view it here.

“Pricing” Page

I also designed tables that show the pricing plans for all the products offered by the company. These tables will be placed at the bottom of the introduction page for each product, as well as a dedicated “Pricing” page.

LeanCloud has already launched the new “Pricing” page. You can view it here.