This content management system is intended for civil servants to update forest-related information.
Supergeo Technologies, a geographic information company, acquired a case from the Forestry Bureau, which is part of the Taiwanese government. I participated in this case and was responsible for the front-end development. We worked on a content management system for civil servants to update forest-related information in real-time such as forest trials’ status, nature education, volunteers, etc. The information will be updated on the Taiwan Recreation Forestry website.
Company: Supergeo Inc.
Role: Front-end Development
Time: 2018/5-2018/7
I coordinated with Supergeo Technologies' back-end engineer, who wrote asp.net (C#) as this website’s back-end. My responsibility was to review the content that needed to be created, read, updated, and deleted (CRUD). Additionally, I use a lot of AJAX (Asynchronous JavaScript + XML) on this website, which means web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. I learned how to utilize a lot of Vanilla JS from this project.
This is a live demo of our questionnaire; the questionnaire is on the left-hand side and the frequently asked questions (FAQ) are on the right-hand side. You can create, read, update, and delete (CRUD) content on the left-hand side. You can drag the frequently asked question (FAQ) and drop it on the questionnaire on the left-hand side.
See the Pen Questionnaire (drag&drop VanillaJS) by yuchinglin (@yuchinglin) on CodePen.
1. Navbar Redesign:
In the original design, some of the links would open the submenu,
while other links would jump to the page directly. Therefore, I added the symbol “” to help users more easily understand.
2. Submenu Redesign:
In the original design, the submenu's word and
background color contrast are only
3.9, which fails to pass WCAG 2.0 level AA for normal
text, which requires at least a 4.5. Consequently, it is not enough for users to easily recognize,
so I changed the color.
When I was coding and testing the website, I found out that the two navbars are very easily confused. The main navbar always exists on the page, but the sub navbar will change depending on what the users click on the main navbar. The main navbar is fixed and the sub navbar is unfixed. Because of this, I drew a line between them and give them different styles to differentiate them.
