gear network

A peer-to-peer rental platform for photographers and videographers

Project Overview

Gear Network approached us with their idea for a peer-to-peer rental platform in early 2014. Their initial need was a set of wireframes to illustrate basic functionality so that the client could use them to raise financial support. In early 2015, Gear Network notified us they were ready to proceed with the buildout of their site. Since the majority of the UX phase was completed the year prior, I was tasked with revisiting the existing wireframes and completing the visual design so that we could begin development.

My Role

This project took place in two phases over the course of a year. During the initial phase, my role was primarily production, supporting another project lead. In the second phase, I was the sole project lead, carrying the project through UX, visual design, development and QA. As a UX lead, my role involved the following:

Project Planning + Leadership. The UX portion of the second phase was relatively small, but I was responsible for creating the project plan and UX approach. Initially we had estimated hours for revisiting the wireframes we had created 9 months prior, with the remaining hours allocated to visual design and developer collaboration. Since the site and concept were new, I knew that user validation would be crucial on this project. After initial meetings to revisit wireframes with the client, it was clear the existing UX wouldn’t change much, so I was able to accommodate user testing sessions by reallocating hours in the existing budget.

Maintaining Client Relationship. Having already established a strong relationship with the client from the initial phase, I was well-equipped to jump in and pick up where the project left off. It definitely helped that these clients were exceptional to work with; they were clear with feedback and communication and it was easy to understand what they needed. I felt a strong bond to these clients and the project in general, having worked on it from the start and feeling as though I was on this journey with them. I took my role seriously in helping them achieve their vision.

Internal Collaboration. I worked consistently with an account executive, a project manager, and a team of both frontend and backend developers. My role as UX lead required me to communicate with each of these team members on a regular basis to manage product hours, schedule client meetings, and lend UX consult throughout development.

Presentation + Facilitation. A large responsibility of mine as a lead was presenting my designs and receiving and incorporating feedback from the client. This included being prepared for meetings with questions for the client and designs to present. Feedback sessions were facilitated remotely, and I presented designs using Invision so the client could start to see how their site would function. We would typically discuss their feedback over the phone, but they also had time after each meeting to review and provide additional feedback.

Design Production. Being the sole designer and lead on the project, I wore multiple hats. After determining the UX approach, I also executed on that approach. This included revisiting the existing UX through stakeholder meetings, playing the role of visual designer, validating the designs through user testing, and then handing off to and consulting with the development team.

Understanding the Client

The project began with a series of stakeholder interviews. The project budget did not permit us to perform user research, but we were able to spend time with the client to understand their need and vision for the site. Our client also happened to be an expert in their industry, so they had a good understanding of their user base. We had some upfront information gathering sessions with them in which we were able to establish the requirements for the initial launch of the site.

Through these early meetings we determined that the first launch would include: two subscription tiers for users to list equipment for rent on the site, a search function that allowed users to search by equipment and location, and a service in which Gear Network would locate equipment for users.

Sketching + Ideation

Armed with requirements, I began sketching. I was able to show some very early, rough sketches to the client in order to confirm we were headed on the right path prior to jumping into wireframes.

Sketches
Early sketches

Wireframes

Creating wireframes was the bulk of my work on this initial phase of the project. We knew that the work we did here would be used down the road in development, so I included detailed annotations on each screen for whoever would be working on the project in the future. Client feedback on the wireframes was fairly minimal, and I was able to finish everything under budget. Finishing under budget allowed us to create some initial design concepts for the client to use in tandem with the wireframes to help explain their vision to investors.

gearnetwork-wireframes1
Home page and search results wireframes
Search Wireframes
Search functionality with example annotations

Phase Two: Revisiting the Design

Phase two of the project began with revisiting the wireframes I had created the year prior. I conducted a meeting with the client to understand what had changed in the months since we had first worked on the project. Fortunately, the existing work was still mostly valid. The client had a few changes they wanted us to think about incorporating, including a Google style equipment search over the dropdowns we had originally created for search.

gearnetwork-search
The new equipment search allowed users to type any piece of equipment in the search field and implemented an auto-complete.

This time around, I was very fortunate to have the lead developer with me from the start. Anything the client requested, we were able to immediately gut check with the developer present in terms of effort required. We established open communication with the client from the start, letting them know immediately if we didn’t think something was feasible within the budget, but working with them to create an alternative. In this way we were also able to make new suggestions to them, which they appreciated in a big way. I recommended we get user input through testing, and they were immediately on board with that idea, especially when I was able to clear room in the budget. The developer and I were able to explain the benefits of implementing responsive design at this stage of the project. The client was appreciative of the suggestion and decided to include it.

Visual Design

I decided to dive straight into visual design, rather than wireframing the requested changes. This freed up hours to do user testing and allowed me to spend more time finessing the visuals. At the end of phase one, another designer had stepped in to create some visual concepts. The client still liked the overall visual direction, so I took the original concepts and modified them slightly. Again, having the developers involved early paid off huge. I could discuss any new ideas with them right away to determine feasibility. For mobile mockups, I created the main screens and established basic patterns, and then collaborated with the front end developer as he implemented the designs.

gearnetwork-home
On the left, mobile design for the home page. On the right, desktop design for the home page.
gearnetwork-results
On the left, mobile design for the search results page. On the right, desktop design for the search results page.

Validating the Design

Once I had the bulk of the site designed, I set out to do some user tests. Since the hours I had were limited, I recruited people I knew who were photographers and videographers to test the site. I was able to conduct all the tests in person, using the Invision prototype. The feedback I gleaned from these sessions was hugely valuable, especially since the site had not yet been viewed by potential users. Overall I received positive responses, but there were a few key areas users identified for improvement, primarily around elements on the search results page.

The client was very interested in and receptive to the feedback I received. I created a brief summary document stating the major findings from the testing along with recommendations on what could be done to improve the site. I implemented the approved revisions in a final iteration of the design, and we were ready for development.

Development… and Launch!

Another benefit of having such close collaboration with the developers was that they continued to involve me in the process, even after I had officially transitioned off the project. They consulted me first if they ran into issues or changes that had to be made. They even didn’t seem to mind my occasional check-ins to see how the site was progressing. I was even involved in QA, having the opportunity to do a final pass on the site for any last minute tweaks.

I feel so honored to have the opportunity to help someone achieve their dream, something that was only on paper the year before. To see how happy they were watching their dream realized, that for me was the best part of this whole project.

View the full site.