Producing a New Video Spec Marketplace
Spexster Web App Design & Development
OVERVIEW
Spexster is a startup created to connect videographers with advertisers. The idea for it was birthed after the filmmaker founders decided to create a marketplace that would allow them to sell spec videos (footage shot for a pitch, but not selected). The marketplace allows advertisers to find an already-created video for their marketing campaign, provide the videographer with their branding materials, and have the videographer make the minor edits needed to create the final product. It’s a win-win for both advertisers and videographers – advertisers don’t have to hire videographers to produce a video, and videographers can market specs that were created but not used.
A cinematic look and feel conveys the purpose of the site and sets the stage for action.
Discovery
When we collaborated with the Spexster founders for the discovery session, one of the first things we looked into were potential competitors.
We found that there weren’t any businesses on the market that do exactly what Spexster set out to do, so we focused our research on indirect competitors. Stock footage sites, like Shutterstock, were as close as we could get, but still, Spexster’s concept differentiated them from the crowd.
A crucial part of our discovery focused on researching design inspiration. Since Spexster was a startup, we were able to do a deep dive into several exercises that shaped our design approach.
Once the discovery phase was complete, we were ready to jump into our UX strategy and wireframing.
UX Strategy
Since Spexster was a startup, we jumped into the UX Strategy phase to define the first version of their marketplace.
Building everything from the ground up meant that we needed to focus our efforts on planning out an impactful and easy-to-use minimum viable product (MVP). The team from Spexster brought tons of amazing, creative ideas to the table, and the first thing we spent our time on was putting together a product roadmap to help us prioritize the most important features that would make Spexster successful from Day 1.
During the wireframing phase, we focused a lot of our emphasis on 3 core pages. The landing page, video list, and detail pages were all strategized for optimal engagement and interaction. The goal on the landing page was to introduce visitors to the purpose of Spexster and give them the opportunity to immediately dive into searching the high-quality specs available on the site. The list page pulls visitors in and encourages them to browse the specs available within a wide array of categories. The detail pages were intentionally structured to provide an immersive and forward-moving experience with a clear path to the next step a visitor needed to take.
Our second area of focus was on the conversion funnel. Since Spexster ran on a unique business model and was a high-ticket marketplace, we spent a lot of time mapping out a frictionless conversion flow.
Build
After formulating our UX strategy we started to skin the wireframes, leaning on darker colors to give the site a cinematic feel.
We balanced the dark backgrounds with lighter backgrounds in sections that had large blocks of text, since research shows that too much white text on a dark background strains the eyes.
Pulling complementary colors from Spexsters’ logo, bright accent colors were worked into key parts of the site to leverage attention and bring attention to the calls to action (CTAs). These energetic colors also helped provide visual interest by breaking up the monochromatic black and white background colors.
In terms of programming, Spexster is complex. Due to the unique flow and features needed for the marketplace, we built the site from the ground up on a custom .NET platform (WordPress or other off-the-shelf enterprise level solutions just wouldn’t do). This allowed us to build the site exactly to meet the client’s expectations, from the frontend design, to the logged in user interface, to the backend content management system. Everything was tailor made for Spexster’s unique vision.
We were able to code some very engaging interactions while building the site, starting with custom interactions on the video listing page, where a short video clip plays when hovering over the video thumbnail. If the visitor wanted more information, they could click to expand open additional details on the listing page. If the visitor wanted to message the creator or make a purchase, they would be able to click on a button taking them to the detail page. Each element encourages interaction from visitors and is optimized to pull visitors deeper into the user journey.
Test & Launch
Once the site was built we fully tested it using multiple browsers, mobile devices, laptops, and desktops.
Once we were confident that there were no bugs on the site, we trained the client on the CMS and allowed them to go through their round of testing and finalize content on the site. Once complete, we were ready to take the site live.
In preparing to go live, we normally would review the old website’s analytics, find the time when the least amount of users are viewing the site, and use that as our guide to launch. However, since Spexster was a brand new company without any previous website, there were no visitors that would be impacted with the launch. Thus, we were able to go through our complete launch process at the client’s preferred time.
Closing Thoughts
We’re currently in the process of continuing down the project roadmap and have been adding to the functionality and features available on the site, which has been met with a positive reaction by users. With a bright future ahead of them, Spexster is more than ready for it’s time in the spotlight.
View Site Download PDFExplore our related expertise
Next up
