I collaborated with a team of developers to design and build a site for locating public wifi spots.
Finding Reliable Public Workspaces
Wifi has become an essential tool for getting work done, and tech is getting more and more portable. When someone is away from home or the office, it can be difficult to find a nice workspace with a reliable internet connection. Our goal was to solve this problem by helping people identify and rate public workspaces.
Getting Everyone Involved
As the UX Designer, I led the team in a design studio to flesh out our ideas for the site. Initially, the developers were a bit hesitant, but in the end, everyone had some great ideas and contributed to the overall design. We brainstormed a bunch of names for the site, and decided on WiFinder.
The developers had a lot of ideas on how to collect and build out the data on the site. After quite a bit of discussion, we decided to crowdsource the information. People can go on the site and create listings for great public workspaces with wifi. Others users can add reviews and rank the various listings.
We discussed features and created a list of user stories in order to figure out the ways in which people would be able to use the site.
Who Will Use This?
I conducted some user interviews to better understand the needs of people who might use our site and developed three personas:
The Occasional User — doesn't use public work spaces often, but likes to find a nice
atmosphere when he does
The Migrant Professional — constantly meeting with clients in different parts of town and doesn't want to waste time looking for a place to work in between meetings
The Local Business Owner — offers free wifi and a cozy atmosphere at her coffee shop and wishes more people knew about it
Coding & Styling
Bringing the Product to Life
The four developers split up the coding and got to work. They were really fast. I was impressed by how quickly they were able to build a working site.
In the meantime, I started work on the visual design for the site. I picked typefaces, a cover image, and a soft and calm color scheme. I also designed the site logo.
Testing & Iterating
Identifying and Fixing a Navigation Issue
Once the team had a working site, I tested it with some users. The main finding was that it was a little confusing getting started once the user arrived on the home page. People kind of understood the function of the site, but weren't sure what to click on first. Luckily, this issue was easy to fix, and I collaborated with the front-end team to modify the design. We added a clarifying description below the main logo, and a button to get started below the description. After this change, users had no trouble jumping right into the site.
The Final Product
We ended up with a working WiFinder site. Users can search for public wifi spots and read details and reviews for each listing.
Users also have the option to create an account in order to post new listings and to write reviews.
The Value of Collaborating with Developers
Overall, the project went very well. I think we were all a bit nervous about working together for the first time, but the process was very smooth. Being the sole UX Designer on the team was initially a little intimidating for me, but it proved to be a great leadership and teaching opportunity. I also learned a lot from collaborating so closely with a team of developers. They taught me about GitHub, APIs, and how to animate in CSS, and I taught them about user research, wireframes, and that you don't need to be able to draw straight lines in order to design.