Shuttr.Hero.jpg
 

PROJECT OVERVIEW

 

Amazon Air

Project: Responsive Web Design
Client: Shuttr
Role: UX/UI Designer | Project Manager
Team Members: Will Richter, Beverly Martin, Kristin Yang
Tools: Sketch, Invision, Photoshop, Google Docs

Shuttr is a marketplace that connects influencers and businesses to freelance videographers, photographers and editors. Customers are able to search, view, book and pay freelancers all on Shuttr- hence making it easy to assemble your team and bring your creative vision to life.


 
 
 

The Challenge

What might a content creation ecosystem look like that is secure and productive while creating compelling content for the user?

The Goal

Design an application that creates connections consisting of trust and quality between influencers and content creators, an ecosystem that produces compelling content which engages their followers.

 

RESEARCH

 

Interviews

Through interviews, I gathered data from both freelancers and influencers about using online marketplaces to expand clientele and produce content.

 
 
avataaar2.jpg
 
My goal is to deliver the needs and wants of clients but still retain my aesthetic
— Stan
avataaar.jpg
It would be nice to have a space [that recommends photographers] and is like this person is good for editorial and this person is good for lifestyle.
— Demi
 
 
 

Affinity Mapping

With the information gathered I was able to identify some shared pain points.

  • Lack of communication

  • Lack of trust

  • Lack of collaboration

IMG_3809 copy.jpg
 
 

C&C Analysis

Through a C&C analysis I gathered information that would give an overview on the features that lent itself to a content creation ecosystem.

  • Familiar features such as search and login functions on the homepage

  • Chat functionality

  • Rating/Review system

Heuristics

A heuristic evaluation helped me determine the current pain points in the Shuttr website.

  • Inconsistencies in the style guide and layout

  • A non intuitive search function for finding freelancers

  • Minimal branding overall

 

 Insight

Group.jpg
  • With the goal of creating a secure environment, I explored a closed membership based system. Those of my interview participants who had worked with similar systems had not been pleased, so I decided to explore other solutions.

  • During a heuristic walkthrough of the existing site I saw a map function. This appeared to give a freelancers’ direct personal location hence causing a safety concern. I removed the feature and explored more secure options for establishing proximity.


Synthesis

 

Persona 

I wanted to design this website for both influencers and freelancers. So I found it necessary to put together 2 user personas that embody the expectations, motivations and the concerns of both types of users. If the design was meeting the goals of the personas then I knew I was on the right track.

 
 
 
 

Feature Prioritization

With the data collected, I prioritized features using the MoSCow method. Separating by must haves, should haves, could haves, and would haves helped me to narrow down the features to the Minimum Viable Product that would address the personas’ needs.

With the MVP targeted, I now had the groundwork for building a testable prototype.

Feature Prioritization.jpg
 

 IDEATION

 
 

Design Studio

With Chris and Natalie’s needs as a blueprint, my team and I designed paper prototypes of the new Shuttr content creation ecosystem.

 
 
 
 
 
 
 
noun_UX activity_338633.png

Testing

  • The testing prototype was built out pretty bulky, the hero had a gallery, quotes, and videos, the profile page had everything from hashtags to reviews.

  • I put a calendar on the profile page in order to show freelancers availability.


 
 
noun_insight_338644.png
noun_iteration_339017.png
 

 Insights

  • During the usability tests influencers felt overwhelmed by all the information on the site, they felt it looked cluttered.

  • Freelancers felt the calendar on their profile was a bit invasive, as it was showing their complete/open schedule.

Solutions

  • I iterated the design by removing some elements to streamline the site making it more usable and efficient.

  • To create a sense of security I removed the calendar, instead availability would be matched to the initial date inputed into the search parameters.

With these solutions in mind, I was ready to design higher fidelity prototypes.

 
 

 

PROTOTYPE 

 

User Scenario

Natalie the influencer is travelling to Palm Springs for a brand partnership, she needs a photographer to produce high quality images for the project. Chris the photographer is in Palm Springs at the time and is ready to shoot.

 
 

Medium Fidelity Prototypes

With the updated model of the prototype, I moved onto medium fidelity wireframes to help both personas accomplish their goals.

 
 
Landing.Page.png

Homepage

Search Results page.png

Search Results Page

 
 
Profile Page.png

Profile Page

Video_Viewing.Final.jpg

Chat Page

 
 

Insight

  • With further testing a trouble point was in the booking process. The CTA felt abrupt and overcommitting.

  • Also users did not want to put 100% of the initial payment up front.

Solution

  • Surprisingly by simply shifting the button placement from the left side to the right our users were much more comfortable to proceed.

  • Also we made it that only 40% of the full amount was due upfront, the remainder would be paid upon completion of job.

(Click to enlarge)

 
 

Metrics

During usability testing, the users felt the new design was more secure for both influencers and freelancers.

 
noun_unlocked_2052101.png

On the original website with a hard to find rating system and overly specific location system the site struggled to create a sense of security for both parties.

noun_locked_2052101.png

Now with the addition of “Shuttr Verified” (a status freelancers achieve through an application process) and only the necessary components to bring people together, that sense of security is more inherent to the site.

 
 

High Fidelity Prototype

With a new style guide and an updated flow I moved on to creating the high fidelity prototypes.

(click below to watch video)

 
 
 
 
 

Next Steps

 

I built the site out as a responsive web design so i’d like to build out the mobile prototype. I’d also like to make it so that freelancers profiles have multiple portfolios separated by specialization (ie. wedding, product, and event photography). Third I’d like to integrate an auto book function much like AirBnB. Where influencers can directly book freelancers based on dates they have already established as available.


Mobile Landing Page