Being part of the UX Team during my 12 months co-op with the City of Surrey, the team was tasked to redesign the Surrey Public Wi-fi landing page. The requirements gathered were flexible as long as the end product was responsive and user-friendly. The design would also be implemented for the Surrey Public Libraries requiring consistency between the two interfaces.

Roles I Played: Lead Designer, Visual/UI, Business Analyst, Quality Assurance, Front-end

Tools Used: Illustrator, Axure RP, Photoshop

In collaboration with: Datavalet

Prototype: Here

Final Look of the Surrey Public WiFi interface for Surrey Public Spaces & Surrey Libraries.

We first approached this project by analyzing the current page and the overall user experience of it.

We noticed a few things: 

  • The page is not responsive.
  • User would need to zoom in to check off the Terms & Agreement and press the button to proceed.
  • Small checkboxes are not user-friendly on mobile devices.
  • No consistency between the current UI and the City of Surrey’s branding (ex. colour).
  • A lot of unnecessary text and space-filler.

Experiencing the Interface ourselves, issues included:

  • Returning users (mostly iOS devices) tend to have the WiFi icon on their phone telling them that they are connected even though they are and have to enter into the sign-in page first.
  • Non-tech savy people may not realize they have to open up a browser first when first connecting to the WiFi.
  • User needs to type something into the search bar before loading the page which makes it frustrating for users.
  • The user would need to retype their desired site again after connecting.

(Left) Old Surrey WiFi interface. (Right) Experience of old Surrey WiFi interface.

samplewififlowssamplewififlows

(Left) Old Surrey WiFi interface. (Right) Experience of old Surrey WiFi interface.

Popular samples that exist:

  • We noticed that for both Starbucks and Tim Hortons’ Wifi on Android phones, the browser automatically pops-up when the user connects to the network.
  • We liked that they both have buttons to press and no checkmarks.
  • Starbucks took more of a quick and simple approach which also included a way of advertising.
  • Tim Hortons’ was more lengthy in text and time.

Overall, I was able to redesign an interface for the City of Surrey that thousands of visitors and residents would interact with easily, quickly, and conveniently.