Totspot - From Idea to Product Launch

  • Research
  • Prototype

"Totspot is a mobile marketplace to shop and sell kids' resale fashion. Selling on Totspot is equally simple: it takes less than 60 seconds to post an item, and all transactions are handled in-app."

My Role

I was the only designer in Totspot team and responsible for the design of the iOS and Android apps. I lead the UX work, producing all major deliverables and presenting these to the rest of the team. Later on, I led a team of designers and engineers from Ukraine who we hired to develop a web platform.

Challenge

Because Totspot is a community-based application and not just an e-commerce website, we wanted to enable social interaction among customers and be able to scale to support large real-time in-app events. The biggest challenge I faced was balancing moving forward with designs, whilst collaborating with the small team of non-designers. The team spent a lot of time debating design decisions— when there wasn’t data that could help drive a decision.

New Feature in 1 week

"At that time we already had a lot of competitors and approached ourselves with two primary objectives —to enhance the app's functionality and usability."

However, to differentiate ourselves in a competitive market, we needed to define a desirable role for the app and how it would meet the needs of the users. After a few surveys and interviews, we found out that a lot of mothers don't have time to take pictures of kid’s clothes, don’t know how to do it or simply don’t want to spend their time doing it. This is how Concierge feature was born. We contacted our power users, those who have hundreds of clothes in their closets and asked if they wanna be our concierges. For staying home mothers that might be an extra source of income. Later on, we figure out that some moms already were doing it, selling kids clothes of their close friends and family.

Wireframing

We took a top‐down approach to gain a holistic view and understand who the users are. Sketching helped us to generated stacks of ideas about the arrangement of elements and interactive behaviours. To initiate communication with our customers we generated wireframes and then came up with a final decisions about the exact pieces and parts that will be included in feature.

  • Date:October 2014 - December 2015
  • Client:Totspot
  • RoleUI/UX Designer
  • Websitetotspot.me

Make it simple, but significant.

Because of tight timelines, we chose to develop a high‐fidelity prototype. It allowed us to gain feedback and approval from both our client and the team early on.

After some initial user testing, we realized that the whole process of the concierge feature was confusing since people were not familiar with that and didn't know what to expect. As a result, we decided to redesign status screens to show all the steps at once which helps users to understand the whole process instead of showing them screen by screen.

Bringing It All To Life

After conducting validation tests we found out:

  • Users were able to understand the feature and curious to click and learn more about it.
  • They had no difficulty switching between concierge feature and self-service.
  • Users were able to order Concierge kit and understand rules of the service.

Search

My first design challenge was to propose how search feature should work. Search for Totspot is a critical element of building a good working resale platform. Each piece on Totspot is unique and search facility should help users find what they want quickly and easily. The challenge is to help users find the item they are looking for. After conducting some user testing and a better understanding of user goals and behaviours, I have listed some key concepts to create low-fidelity wireframes.

  • Save the search query. Users might want to search again using a slightly modified query.
  • First results are the most important and must be very accurate, otherwise, they won’t trust the search tool.
  • Autosuggest helps speed up the search process.
  • Correct typos.
  • Store all recent searches.
  • Provide sort and filter options.
  • Avoid creating dead-end pages in the app experience, even when the search produces no matching results.

As a great example of search experience, we tried to think of Pinterest, a site where there are huge amounts of information. The best practice for search so far is on the top of the page, but we decided to take a more experiental approach and make it a part of the main menu.

Sketching

Low-fidelity Mockups

To help our users to find what they are looking for, we decided to introduce Guided Search. It helps users explore, whether you know exactly what they want, or they are just starting to look around. Guides and filters help users get more specific.

Search Option 1

Search Option 2

Filters

Final Decision

That approach was never implemented. We decided to replace Search section in menu panel with Shows, a curated Feed of items based on a specific requirement. The search feature was moved to the top of the page, however, we preserved almost everything that we have learned during initial design project and research stage definitely helped us to resume some of best practices for UX search and filtering.

First Mockup

Introducing … Totspot for Family

With the hopes to capture an even larger share of online fashion resale business Totspot team decided to expand into Women’s and Men’s fashion, making Totspot the premier destination for resale shopping now for the whole family. I was tasked to deliver a full high‐fidelity prototype to our developers within 1 week.

Sketching

First, I did several lo-fi UI sketches. An essential part of Totspot is a personalised feed. With two additional verticals, we need to ask more information upfront. I tried to keep the flow as simple as possible, but at the same time get all the required information (name, size and gender) from a user.

Mockups

Below is the Hi-Fi mockups done in Photoshop.

Prototype

Because of tight timelines, we chose to develop a high‐fidelity prototype. It allowed us to gain feedback and approval from both our client and the team early on.

Visual Design

All team worked together to carefully consider which colors would give Totspot a distinct identity in a crowded market and would work across all areas of the brand. A comprehensive set of brand guidelines was created to ensure that Totspot identity continues to be applied consistently. It was essential that each of the brand elements was documented in a clear & concise manner, from logo usage options, fonts, imagery style, brand color references & tone-of-voice.

Seems like you've reached the end 👏 Hope you enjoyed it!


More Projects