ABOUT THE PROJECT

Tobi is an online fashion label based in Los Angeles. Since their launch in 2007, the company has mostly focused on dominating the fast-fashion retail scene with popular e-commerce strategies. After making an essential pivot from reselling popular clothing to designing their own products, the next step was to begin further developing Tobi's sense of identity and online brand. Redesigning Tobi.com was crucial to this process.

 

THE CHALLENGE

Tobi's legacy in direct marketing and other hard selling e-commerce methods lead to a site that was static, unemotional, and felt like a relic of the Web 1.0 era.

Users initially landed on a splash page with limited navigation tools. After clicking through to the product list page, they were presented with a bare-bones grid of images showcasing the newest products. Between the splash page, list page, and accessory pages, the user was left with little to no guidance for their shopping. There was simply no real estate for the company to push new promotions or curated features (i.e., product collections based on occasions).

The aspect of the site most in need of an update at the time was the navigation itself. Aesthetically, the links were large and intrusive, and drew away attention from the products. Functionally, there were no drop downs to preview additional pages and subcategories. The user was forced to interrupt their current browsing experience if they wanted to see what other product list pages were available.

My Role: User interface design, user interaction design, assistance in front-end development

 
 
2015_Tobi_UI_ListPage_Redesign_Old.png
 

THE PROCESS

As the company started moving away from direct marketing tactics, it removed its long-running "50% Off First Order" promotion. The campaign previously succeeded in attracting new customers to the site and contributed to the substantial growth that Tobi experienced in its early years.

This was a major change of direction, and new, brand-assertive marketing strategies were in order—specifically, more promotional content, better SEO practices, and exhibiting social proof.

 

Main Slider Image:  The new homepage is similar to the old landing page, with a few key differences. Instead of a single image, a dynamic slider was added, which rotates through multiple promotions. The image still takes up the bulk of the user's initial experience upon arrival on the site, but offers a wider variety of navigation options. The user can also scroll down to view additional content.

Top Navigation:  Hard-coded navigation links are replaced with an interactive, top navigation bar. Users can now hover over each section and preview shopping categories and content before committing to a new page. Another goal of this new format was to assist in SEO linking and strategy.

 
2015_Tobi_UI_ListPage_Redesign_Nav.png

List Page Side Navigation:  In addition to the new top navigation, we added a side navigation on each list page as an alternate way to guide shoppers through different subcategories.

 

 

New Arrivals:  One of Tobi's most distinguishable characteristics is its commitment to publishing new arrivals every day. We added select pieces from the day's new arrivals to the homepage in order to better showcase this feature.

 

Freeform Content:  Featured content and curated product collections, an emerging trend among online retailers, are now live on the site. Each week, we add new ways for costumers to shop.

 

Social Proof:  Tobi's own Instagram hashtag is actively used by both fashion bloggers and everyday shoppers. Demonstrating the popularity and reach of Tobi's brand is one way to convince customers that they're shopping at a top-rated label.

 

THE RESULTS

After months of close collaboration and detailed iteration, the new Tobi site is alive and well. In the first month after launch:

- Pageviews increased by 32.87%, with pages viewed per session increasing by 22.27%

- Average session duration increased by 15.93%

- Bounce rate decreased by 6.3%

 

You can view the current site at Tobi.com.

 
 
 

MOVING FORWARD:

While we are certainly proud of all that we accomplished through this redesign, there are many changes that have yet to come. We approached this project with the mindset to ship fast, evaluate feedback, and iterate further. Our next steps include cleaning up the typographical style of the site and improving aesthetic consistency, adding in a quick view feature and product filters to the list page, and improving our catalogue shots.