HelloShopper is a personal shopping service in which users can talk directly with our real live shoppers for gift recommendations (and other personal items) that fit their specific requirements. Our shoppers come from various retail, fashion and interior decorating backgrounds. In addition to making recommendations our shoppers were charged with researching and building a catalog of items to pull from during these requests. They also broker partnerships with certain vendors. These relationships revolve around the promotion of their goods through our service in exchange for margin on items purchased through our site. This is the core of HS’s business model.

Formerly called Scratch, our shift to focus primarily on gifts rather than any type of item a user requested prompted us to think seriously about changing our name and brand. There had been previous discussions due to concerns that the name Scratch was not easily understood and remembered. Also not owning “scratch.com” proved to be a challenge in discoverability. So when our data started to point to the fact that gifts could be a more profitable focus for our product we decided this shift could be accompanied by a complete brand change. 

The name HelloShopper was chosen after much brainstorming from our CEO, Marketing, Design and Product teams. It was chosen for its memorability and clarity to how it relates to what our product does. From there the logo and new brand colors took shape and that was spread over the entirety of our experience from product to marketing and beyond. 

To the left you can see our chat interface which is the core flow of our product. This interface has gone through many changes based on testing and shifting priorities (and will continue to do so) but the core purpose has remained the same. The shopper and user converse here with the goal of finding the right item. Besides the ability to leave text based chat items the recommendations are also given through this interface. 

Check out more examples from the HelloShopper product:

Mobile Toolbar

Feedback Flow

Checkout Flow

Collections

Problem: For HelloShopper, mobile was the largest percent of traffic. The initial version of our navigation for mobile was a hamburger menu. This design has been proven through several industry studies to decrease engagement within mobile applications.

Solution: Replace our hamburger menu with a toolbar in order to clearly lay out our navigation for users. 

Design: 
(1) Reused the icons and labels in our side navigation for consistency. A separate page for the request list also needed to be implemented since that list currently lived in the nav itself.

(2) The “Account” tab housed both “Invite your friends” and “Settings” since we didn’t feel those needed to be separate tabs

(3) A large yellow [+] button was used to initiate our main request flow. This design gave our core flow the appropriate hierarchical prominence as well as signifying that it launched a separate flow rather than being a static “tab”. This approach was also carried through to our desktop version.

Results: TBD

Problem: The core flow of HelloShopper is a user requesting at certain item and our team of personal shoppers finding recommendations based on that criteria. After sending a set of recommendations, our shoppers needed feedback on those items if continued shopping was required for that request. Our first version of the feedback mechanism was a set of fixed responses (i.e. “Like it, but don't love it. Here's why…”) that users could select and add free text to. We found that mechanism had low engagement which left our shoppers in the dark about how to proceed with the request.

Solution: Create a mechanism that encourages the kind of feedback our shoppers can use to continue shopping.

Design: 
(1) When talking to the shoppers about what kind of feedback would be useful to them, a number of paradigms we’re discussed (thumbs up/down, number ratings, smiley/frown-y faces). In the end we decided that the hot/cold spectrum lent itself well to this problem since the question of “are we getting warmer” inherently helped describe why we needed feedback. 

(2) Our shoppers felt that just a rating would not be enough to help them continue shopping so additional information was required in order to submit feedback. 

(3) Once feedback was submitted, the mechanism turned into a chat feed where shoppers could respond directly to that feedback. These comments would appear in the chat view, tagged with the product picture. 

Results: We found that discovery and use of the feedback mechanism went up, however users were largely unwilling to give additional comments like the shoppers wanted. We also found that most conversions happened within the first set of recommendations sent and dropped off significantly with each additional shop. We decided to hold off iterating on the feedback mechanism and focus on nailing that first round of recommendations. 

Problem: A large percent of users were abandoning our checkout flow after clicking the "Buy now" button on a product. We discovered that our initial inline version caused confusion during usertesting because it did not match user’s expectations and presented certain usability issues. 

Solution: Redesign our checkout flow by researching checkout flow best practices and current examples (Amazon, Zappos, etc.).

Design: 
(1) I decided a tabbed approach would be the most effective because it is not only a widely understood UI pattern but it could also act as a progress bar for users by showing them how many steps they have left.

(2) Users would see the form for both the credit card and shipping sections by default when using our checkout system for the first time. The previous version required clicking into each section to add information, which was especially confusing for users during usertesting. After they had entered this information once, those options would be selected by default the next time. They also had the option to enter new information. 

(3) Added a separate review page so users could feel confident in their purchase when completing the final step of the checkout flow.

Results: Abandonment of the checkout flow process went down. Additionally we received less questions from users about how to complete their purchase.

Problem: Collections were created as a way to curate lists of products from which our users could browse and purchase without requiring any personal shopping time. We often found that users were logged out when we directed them to these pages. The login prompt often turned users away which reduced engagement. 

Solution: Redesign these lists for external use. Optimize for SEO so these pages could rank on search. Showcase our shopper’s expertise and knowledge about the products they were recommending. 

Design: 
(1) To optimize for SEO, I allowed for long, text-rich titles and descriptions. These descriptions were presented as quotes from our shoppers to give them a friendly voice. These quotes also helped showcase our shoppers as experts. 

(2) Left room for a static sign up ad to the right of the collections content. This ad gives context as to what our service is for users coming through organic search. It also gives them a clear way to sign up and see more if they are interested in the service.

(3) Replaced the large “header” image that was originally there with 3 small product images. The header images were hard to source and often looked low-quality and out of context. The product images gave a better preview as to what the list had to offer.

(4) Shopper bios at the bottom of the lists introduced users to the real people that are behind our service.

Results: We started to rank in search results as our shoppers started to build out more collections. Plans to revisit the navigation are still in flight as well as incorporating more search capabilities.

The HelloShopper shopper interface (SI) housed all the internal tools our shoppers needed to do their job effectively. These interfaces were created with heavy input from the shoppers in order to better understand their needs when using these tools. These included the Request List, Product Catalog, Collections List and many more.

Request List: The main goal of the request list screen was to notify our shoppers of new activity from users within our app. This could include new requests, new messages or orders from users. It is vital that our shoppers see these notifications as soon as possible in order to respond to users right away.

Product Catalog: Another important responsibility for our shoppers was to send product recommendations to users based on their request preferences. In order to save, organize and tag products for easy discovery later, we developed the catalog view. This screen was based on a very standard ecommerce interface with browse, search and filter capabilities.

Collections List: A secondary offering within HS were shopper-curated lists of products around a certain theme like "Gifts for Busy Moms". These lists (called Collections) were meant to provide a way for users to buy things without needing to send a request. With this view, shoppers could create, organize and make their collections public on the site.

On Custommade.com, users can write up a request to be submitted to our network of makers around the country. The form failed both sides of our marketplace since users did not know what details to enter and makers weren’t getting the right information to complete the request.

In the first phase of this project, I updated the post flow to give specific visual options for the type of item users were requesting. We would often hear from user testing things like “I’m not a furniture maker, I don’t know what decisions to make to design a table.” The visual options helped users understand and make those decisions.

In the second phase of this design, I also created a suggested listings page to show items that matched the users entered preferences. This page helped users find existing designs from makers on our site, which we found was an overall better experience for users.

After a report from our analytics department revealed that a little thought about page was being visited a surprising amount, it was a no-brainer to give it some UX love. The original design of these pages was so old it was clear a complete redesign was necessary. Scroll down (and down and down) to see the old design.

Three separate portals with three totally different UIs is not a good user experience no matter how you look at it. Goal: create a single portal experience across multiple user types that visually represents the new branding of Carbonite’s recent website design.

So what is the portal? Whether you are a consumer, small business or a partner, you can log into your account through a browser and view and manage your backup. Before your portal experience would be vastly different depending on what type of user you were.

OLD DESIGN (left)
NEW DESIGN (right)