eero is a home mesh networking system that aims to give everyone amazing WiFi. When I joined eero, the company was working through many iterations of its hardware and just kicking off its user facing software efforts.
// Competitive Analysis
// Brainstorm Facilitation
// Stakeholder Interviews
What’s the difference between a router and a modem? What’s an ISP? What are network speeds and what do they mean? These were all questions I had when I joined the company.
My goal for the first few weeks was to gain as much context as possible into the space I’d be living and breathing each day. Through stakeholder interviews with the founders, the marketing team, and engineers, I quickly found answers to my questions, understood what user problems we were trying to solve, and discovered the goals the team was racing towards for launch.
How might we create a seamless whole home WiFi experience for both technical and
non-technical users?
• Create an approachable setup experience for everyday users
• Scalable application architecture
To start, I researched existing routers and other smart home devices by setting them up and reading product reviews on Amazon. After identifying key pain points which included confusing or tedious steps, clunky UI, and intimidating technical jargon, I dove into wireframing and conceptualizing.
We went through many iterations of flows and tested with friends and acquaintances who became our Alpha testing pool. During these in-home tests, we paid close attention to how people wanted to set up outside the guidance of the app and where people naturally wanted to place the additional eeros, or “leaf eeros”. These early tests helped to inform the placement tips we later built into the leaf eero setup flows.
After getting feedback from both stakeholders and users, I dove into visual design iterations with our the marketing Creative Director. He had defined the visual language for our brand and we worked together to come up with something that expressed the clean brand without compromising the usability of the app.
In addition to the visual language of the interface, I took inspiration from IKEA’s simple illustration instructions and decided to not only instruct but also show our users what to do.
At first, I aimed to create the illustrations myself but quickly realized that given the time to launch and the amount of work still ahead, it was best that the illustrations be contracted. I contacted and interviewed illustrators and ultimately worked with an illustrator I’d come across on Dribbble, Nick Slater. I communicated the vision by giving Nick context into our goals and sending him sketches and photographs of what I had in mind. In the end, Nick created, 6 illustrations in total and I utilized the elements he provided to create additional illustrations later in the process.
No matter how seamless we wanted to make setup, it still had it’s technical constraints. For example, it takes time for the eeros to start up before the app can connect to them and time for the modem and eero to connect to the internet. Because of this, we needed some way to show progress in the app.
After storyboarding and talking through concepts with stakeholders, I built the animations in After Effects while staying in constant communication with our mobile engineers to ensure that we were creating animations that they could build in time.
With setup nearing completion, there was the rest of the app to consider. At the time, the main goal was to allow users to manage their networks. After working with the product manager on the requirements and user stories, I approached the it focusing on the app navigation.
We tested 3 variations that had the hamburger menu, a bottom navigation, and a combination of both with users from our beta pool and testers we found on Craigslist. The goal of the test was to understand which navigation would be most accessible, usable, and scalable. I approached the test by writing a research protocol and creating tasks for the tester to perform. Ultimately, the test results showed that the hamburger menu was the most accessible, usable, and scalable.
My original designs allowed us to add many features into the app via the hamburger menu. For what eero needed during launch and the next year, this would serve us fine. But, in order for eero to grow its user base, this navigation proved to be difficult.
At the time, we felt that engagement wasn’t a priority because we didn’t have any features that required the user’s constant attention. If anything, we ran on the notion that if people don’t open the app, that meant their networks were working as expected!
In wanting to keep the dashboard focused on the status of our users WiFi, I created an architecture that de-prioritized everything else. As it is today, the app can fit a lot of features into the hamburger menu. Unfortunately, this meant that all new features would come secondary to networking.
The best way I can put it is that, we built a house out of Lincoln logs when we should’ve built it out of play-dough; something that is flexible and can be remolded.
While it had its shortcomings, the launch of eero’s first product was a success with overwhelmingly positive reviews.
My Role: Product Designer, Visual Designer, Motion Designer
Creative Director: Rob Ashe
Product Manager: Austin Lin
Mobile Engineers: Christoph Moskalonek, Giancarlo Daniele, Jordan Jozwiak, Christine Wang, Grant Oladipo, Justin Shultz
Android Development Firm: Mutual Mobile
Illustrator: Nick Slater