UI Improvement Proposal
Home
Before
After
1
Added Kmong‘s logo on the header, serving as a global “Back Home” button. Dragged the notification entry to the top right corner of the header, where most users are more familiar with.
2
Emphasized the search bar and added hint text in the placeholder. Also replaced the hero slides with one single cleaner hero image with the app’s slogan on it.
The reason I made these changes is that most users visit Kmong app with precise purposes, so instead of showing feeds first like what Facebook or twitter does, to provide the quickest way finding what services they need should have a higher priority. Also, showing over 5 slides in the hero section is not that efficient according to the UX best practices.
3
Changed the icons to be consistent with the counterparts on Kmong’s webpage.
4
Re-positioned hero slides and the way they appear.
5
Made full use of the screen width by removing the card list style. In addition, added the data showing how many uses have bought the services.
6
The current expertise level indicators which consists of initial letters like N, J, P and a purple circles are kind of ambiguous.
7
Refreshed “Home” button and re-labeled “Menu” with “My Page” or “My Kmong”. Since the position of notification has been changed to the menu bar, more important entry could be added to the tab bar. The brightness of the active color is also tuned down 5% considering the readability and contrast.
Search
I think the search function is very important to platform like Kmong as mentioned before. So I improved the entire search UI by adding search trend, search history, and search suggestion features.
Before
After
Category
Changed the structure of category page from “Level 1 —> Level 2 —> Level 3 —> Service List” to “Level 1+2 —> Level 3 —> Service List”. By doing so users can reach the deepest category by 2 touches at most, which is recommended by the best UI practices also.
Before
After
Message
Before
A glitch: there is an unnecessary divider on the empty message page.
After
Utilized Kmong’s mascot illustrations on empty status pages according to the empathy design principles.
Also added a new entry button for the “Recommended Specialists” on the empty page. On one hand, this entry gives new users a channel to find their desired services based on specialists. On the other hand, this also gives the specialists another chance to expose their services.
