A cinematic look and feel conveys the purpose of the site and sets the stage for action.
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.
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.
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.
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.
Keep an eye out for awesome web content heading straight for your inbox!