Webpass, a human-centric internet service provider, sought a more appealing experience which would set it apart from competitors. I was tasked with building an engaging landing page, along with more interactivity to give users clarity on Webpass availability in their area.
Defining pain points
Examining analytics data with the marketing team, there was a large dropoff from the homepage; users were not exploring other sections of the site. A possible culprit was how much content was buried under multiple levels of links; users were spending too much time clicking through pages. Additionally, the center signup area was crowded and not visually appealing, due to the large photograph taking up most of the space.
We examined the landing pages of our main competitors in the ISP space.
The key takeaways were endless pricing lists, overwhelming layouts full of promotions, and no clear explanations of the company philosophy. From a design perspective, there was little use of whitespace, and over-use of strong and overpowering type.
Our core market – tech-savvy, urban-dwelling users – are looking increasingly for options that are simple and won't take up their time. This reinforced the importance of fixing our landing page issues.
I set up wireframe sessions with the marketing & engineering teams to ideate on a new layout. We arrived on a design which consolidated all content into 3 tabs, split by type of customer (residential, property, business). We felt that this would resolve usability issues related to buried content, and reinforce simplicity
Developing a look and feel
I went through several landing page iterations, from bold and compact to clean and wide.
The final design uses a clean, geometric typeface to reinforce simplicity, and use of negative space to give clarity. This helped set the brand apart from other ISPs which have a high level of information density and are overwhelming to users.
Solidifying site hierarchy
We devised a new site architecture, reflecting ideas from our wireframe sessions. This would ensure that the design was SEO-optimized and fulfilling requirements by the marketing team and other product stakeholders.
I helped established an initial roadmap for further enhancements to the site's user experience, to aid in planning deliverables.
After establishing the visual design, I developed a UI pattern library to ensure visual consistency and allow for easy code reuse.
For the landing page graphics, I wanted to achieve a balance of excitement and clarity. Bright, vibrant greens were used to catch the eye, and convey the excitement of an urban-dweller's life. This was balanced with light billowy cloud designs to reinforce Webpass's clear & friendly customer experience.
To complement the new layout and provide a library for future projects, I developed new iconography using a balance of detail and simplicity. Use of "avatars" help humanize the brand.
To showcase the Webpass coverage area to potential customers and prevent confusion about availability, I designed an interactive apartment finder to guide users to sign-up.
Outcome & next steps
After launching the new layout, we noted an increase in customers entering the signup flow from the homepage. Additionally, the interactive apartment finder has resulted in less support requests asking about building availability, reducing the workload of our sales and support teams.
The next iteration will focus on implementing heat mapping to get more detailed usage behavior, and re-work the landing page hierarchy to further improve scannability.