Category:
UI / UX
Type:
Responsive & interactive webpage
Role:
Front-end Developer & Designer
Date:
March 2019 – June 2019
Client:
Gabby Communications International, Inc.
Technical Information:
Illustrator, PhotoShop, HTML, CSS, JavaScript, Bootstrap
Background:
Building a responsive and interactive user guide in English, Japanese and Mandarin, to explain the main functions and frequently asked questions for an English training App.
Gabby Communications International, Inc. is an international startup company, which provides web-based English training service. The investment comes from the US, Japan, Canada, and the headquarter is located in Vancouver. The basic idea of Gabby is practicing speaking English with native coaches through the Gabby App. I was in charge of the user guide part, including design, UI/UX and front-end development in the project. Since the back-end development team is located in Japan, I also needed to use several remote working communication tools to collaborate with other team members.
First, I designed the wireframe and mockups for the user guide, according to the provided style guide. There are mainly three parts included in the user guide: the dashboard, the help page, and the detail pages. Considering people may use the user guide when they are having problems in using the app, I separated the user guide from the main function intentionally. As you can see in the images below, I took off the left navigation in help and detail pages, so the user guide can work individually, even when users open it in other devices.
I coded the user guide as a component, so it can be merged with other parts easily. In the component, I used Bootstrap to make sure everything is responsive. Also, considering there are many images in the guide, I added lightbox by using JavaScript, to make the user guide interactive and user-friendly.
Debugging and cooperating with other teams to follow up if they have any changes in other sections or not. If they do, I need to update the content to the user guide as well to ensure the best user experience. After finished the Japanese version, I translated it into English and Mandarin, made the user guide suit for Chinese speaking users and other languages users as well.
