top of page

Platform  Web App

Service Customer Care & Billing

Tool  Adobe Xd


Disclaimer: All the names and screenshots have been modified to comply with my non-disclosure agreement. This case study reflects my own opinions, not necessarily the view of the company.


PageSCAN is a free and online tool for checking web SEO performance, detecting the speed bumps and hinting at the solutions. After that, if the users are willing to pay, PageSCAN can offer a package to improve their websites and even promote them on popular social channels. 


As PageSCAN is just a freebie and also has to compete against other similar services on the market, it’s stuffed with as many metric values as possible, so that users cannot look elsewhere. 


As a product designer, I need to figure out a way to help users, who are both company members and the customers, quickly navigate to the content of interest on the mobile phone without breaking the page consistency and transparency.

On-page menu for quick navigation

PageSCAN report page includes:


  1. ​SEO Summary

  2. Pay-Per-Click

  3. Google Analytics

  4. Mobile Friendliness

  5. Social Network

  6. Site performance

  7. The bottom line

  8. Contact form


UI treatments used for shortening the page are accordions and tabs.


However, on mobile, the page remains lengthy.

PageSCAN report page on desktop and mobile


I listed out 10 popular tools on the first page of Google that also measure website performance, then I analyzed how they present the report/analysis page on both desktop and mobile phone. 


Similarweb has quite an interesting UI treatment for desktop, which is the sticky menu on the left-hand side for quick navigation to a specific section.

Competitive research for SEO healthcheck tool


Even though this feature is small and the work is light, I still need to start with an epic and a clearly stated task to keep track of all my works.

Work breakdown


inspired by Similarweb, I prototyped the sticky navigation bar on both desktop and mobile. The title of 7 sections will act as an anchor link, each link in the navigation is illustrated with colorful icons and text to make it look more appealing.

Icons for sticky menu

On the desktop design, the navigation is positioned on the right-hand side, as the majority of users use the right-handed mouse and the cursor movement from right to left is more natural.

On the mobile design, the navigation remains on the right and sticks to the top corner. For an even better experience, the section icon will be changed accordingly when users scroll to a section.


After finishing the hi-fi prototype, I presented it to the Product Owner, Marketing and Development teams, and let them try interacting with the prototype.


After discussing back and forth, everyone was happy with the hi-fi prototype and I handed over the design specs to the developers via Zeplin.

Design handoff to Zeplin

Sometimes compromise is unavoidable no matter how vocal you are about the product experience. After quite a while working in several projects, small or large, billable or non billable, I finally look at the term “compromise” in a new light - Compromise is just another way we designers adapt to the situation and find a sweet spot among conflicts. 


​In the E-Invoicer project, thanks to all the micro-compromises I encountered along the way, I’ve had a chance to loosen up myself gradually so that I can be open to all the possibilities. 

Before and After of PageSCAN report page
bottom of page