TrademarkVision Redesign
Web Application
TrademarkVision's search, results, and reports page was built using Typescript, Angular, & Django, but our account and search history pages were built using Typescript & Vue.
I was tasked with refactoring the flagship product's search, results, and reports page to also use Typescript & Vue so that we could have a more consistent codebase and style across the entire webapp.
Old
Since I wasn't too happy with the current frontend interface for TrademarkVision, so I redesigned and iterated over a bunch of different mockups, taking feedback from the CEO, COO, sales, marketing, and other developers.
The old UI was very cluttered and inundated the user with too many options, especially on the search page.
We had gotten customer feedback that the search page was confusing and they thought the optional search parameters had to be filled out, but that was narrowing their initial search too much.
New
Since users can refine their search on the results page, we decided to put the keywords along with the rest of the advanced options in a toggleable sidebar.
Now users don't have to scroll to view all the advanced options on the search page.
Also, having the advanced options in a sidebar allowed us to reuse the same component on the results page rather than having two separate components that behave the same.
Old
For the results page, I decided to move all the information in the top bar to the sidebar, taking up less screen real estate while also being able to show more keywords (scroll down rather than increasing height of the top bar).
We also added many new features with this redesign, including a slider to change the size of images in grid view, highly requested list view, and localization in Chinese and Korean, with more languages to come as translations are confirmed.
New
- Date: April - December 2018
- Employer: TrademarkVision
- Category: Front-end Web Development