top of page

TripMoment
Exclusive travel experiences content platform
the newest travel information, super useful travel tips, information about local attractive tourism spots in Taiwan and world-famous tourism spots.
MY ROLE
I served as the UI/UX designer in this project, and was responsible for the third revisal, which not only included UI adjustment and the renewal of programming language, but some new functions such as notice, message board and comment section are also added along with the revision on back-end working area. After the revisal was put online, I then design the improvement plan based on big data.
・Product planning
・SiteMap
・Wireframe
・Flowchart
・Style Guideline
・Specification
・Mockup
・Usability Testing
・GA event

Due to confidentiality purpose, only parts of the information are listed.
THE PROBLEM
Through the investigation beforehand, some unfriendly user-experiences in the old webpage needed to be fixed, and the program also needed to be revised so as to better maintain it in the future; furthermore, the confused back-end working area also needed to be fixed.
Project Process
1.Product planning
I planned the products’ core value with the perspective of Growth Hacker and envisioned the user conversion rate based on AARRR. I also came up with the ideal user growth chart and user journey map.
THE GOAL
Enhancing the links with customers
Actual ways include: Adding the comment section so that the author can talk to the readers, as well as the “following” section.
Put “topic-based” as the main logic to enhance attractiveness.
Let users find information faster.
More customized
Actual ways include: Adding the “notice” function so that users can follow the newest articles by their favorite authors, and also the system can recommend articles that some users may like to them.
2.Making a sketch
I made SiteMap to confirm what pages do we need also drew drafts of the pages in Balsamiq, so that they can be discussed and fixed. Based on the bog data, 90% of the users reached article pages instead of homepage, so my design focused on articles pages as many functions that can interact with users were added.

3.Features Overview
Put the manual of all functions into a Flowchart to confirm the operation smoothness.

4.Style Guideline
Draw in Sketch,Including color planning, Button and Icon, Text Style.
5.Mockup
After confirming the sketch, draw the Mockup in Sketch.
6.Test and officially online
I communicate with outsourced engineer many times to adjust the visual of the page, and I asked my colleagues to conduct the usability test.
Before going online, in addition to the setting of Google Analytics, I also needed to plan the positions and names of the enclosure of GA events and then asked the engineer to put them into source code.
THE FEEDBACK &
WHAT I LEARNED
When the website was being revised, only the boss and I were involved, and what we only had are the interviews left by predecessors. Nevertheless, not only did I take the responsibility of product planning, I also needed to persuade the boss to make choices among his many unrestrained thoughts, and furthermore I needed to spot my blindness in time. The whole process helped me learn the importance of teamwork and communication.
During the development stage, due to the insufficient workforces in our engineering department, we had to outsource some parts of the programming work. When communicating with these outsourced engineers, I discovered that they seldom asked questions when needed, so their works sometimes were different from the original plan, so I spent a lot of time communicate with them to make adjustment. This helped me learn that I should prepare more information and proactively ask the engineers that whether they encounter problems during programming any time, but not only care about the visual part.
For some functions that were originally planned such as the point system, the design was done and the engineers finished their work, and they are not put into use in the end, wasting the cost of human power and time. This helped me learn that next time when design a product, I should confirm more on the detailed plan of need and execution, so that efforts will not be wasted.
After the website was out online, I discovered some areas that can be further improved next time through the did data record every week, and these have been discussed to be fixed in the next round of development.
Improvement plan
-In the initial plan, some interacting functions require the users to log in the use them; for instance, many users did click the “comment” bottom, however when the login window popped up, many actually chose to close that window. Therefore, we plan to let users can get access to some functions without login, so that the jump-out rate can be lowered.
-I discovered that most users log in the system with their FB accounts, so the lining of login bottoms will be altered that the FB one will be on the top so as to be clicked on more easily.
-Articles in the mobile version of the website need to be accompanied by graphs to attract users’ clicking.
-Add more ad slots.
-In the initial plan, some interacting functions require the users to log in the use them; for instance, many users did click the “comment” bottom, however when the login window popped up, many actually chose to close that window. Therefore, we plan to let users can get access to some functions without login, so that the jump-out rate can be lowered.
-I discovered that most users log in the system with their FB accounts, so the lining of login bottoms will be altered that the FB one will be on the top so as to be clicked on more easily.
-Articles in the mobile version of the website need to be accompanied by graphs to attract users’ clicking.
-Add more ad slots.
bottom of page

