Cost Plus World Market
Improving existing user flows and providing solutions for a new e-commerce experience for a well-known brand and dedicated customer base on tight restrictions.
Background
In order to keep up with the current web trends and growing e-commerce operations at Cost Plus World Market, I assisted in the redesign of the worldmarket.com site to go responsive. After working with a local design agency for basic concepts, I was brought on to help design and layout several parts of the site, including help merging both accounts for the store's reward program (World Market Explorer) and the worldmarket.com site together. At the start of the project, both accounts were handled separately by different vendors, which I designed flows, wireframes, and of course, visual design for the many scenarios for the merge.
My time working with World Market consisted of competitive research, collaboration between product managers, my art director, and myself, simplifying new user flows for updated functionality around the site, setting up deliverables for engineers (both in-house and outside vendors), and tailoring UI/Visual Design pages for the new site. The site redesign launched phase one at the end of March 2017.
Goals
Increase sales online
Increase use of rewards program
Decrease confusion with customers that have in-store pickup items wanting to pick it up right away by 40%
Constraints & Challenges
A lot of things were already decided when I came onboard. So some things were out of my control
I had to take the little information that was left by the previous designer to come up with (late to the party)
No real user research was done of different prototypes (no time or budget for it)
Working with two different systems to bring online rewards into one account experience
Sign In
The biggest task during my time at Cost Plus World Market, was showing the front facing scenarios for merging two existing account systems that CPWM maintains. The reward program, World Market Explorer and the worldmarket.com site accounts. At the time before the relaunch, both systems are separate and are handled by two different platforms. My goal was to get both of them to connect with each other without the customer noticing the merge of their accounts.
There are four different scenarios within the system, a website account only holder, a rewards program account holder, a customer who signed up in the store (partially enrolled), and a new customer account. My tasks were to work with our project manager (who directly worked with our platform developers), from wireframes we worked on the developers to the visual designs. Because we had to work on a tight schedule on all of our projects, our UX design flow was a bit different. After working out the scenarios off of sketches and discussing the steps, I would then produce the flow with visual designs an a corresponding PDF with detailed interactions for the development team.
Sign In flow for a customer that already has an account with the email address they entered in. They will then be prompted to sign in with their email address. From there they will either finish the enrollment process, retrieve their forgotten password or start all over with a new email address.
Account Dashboard
With the merging of both types of accounts, it also creates the need for a new type of account dashboard. A need to see all of the customer's rewards status, account details, and account settings all in one central place. It also opens up other scenarios that offer other ways to merge the different accounts together.
Part of my other task, also offers another option into logging into the customer's account (or complete the merge) from the rewards page, which follows the same login scenarios like the top down sign in header. The account dashboard also holds some other pages for the customer's preferences.
Rewards
Another part of the merger between both accounts is also another page that goes into further detail about a customer's rewards, coupons, coffee perks, and all the details in-between. Customers can also add coupons and rewards from here to their cart to apply to their order. They can also print off coupons if they choose to hit up the store instead.
Order Confirmation
Since CPWM offers the option on certain products to pick up them up from the store, there are different scenarios an order can have. Order confirmations are also affected by the rewards membership as well. The order confirmation will also show what rewards were earned on the customer's order if they are signed up with the CPWM rewards program or if they are fully merged (both worldmarket.com and the rewards program).
Track Your Order
My other focus for the checkout process was designing a brand new page for the customer to track their order. The mocks here show after the customer has either clicked on their order number after they are signed in (a fully merged customer) and someone who entered their information to track their order off of their order confirmation email. One of the biggest issues before the redesign was that there was a lot of space and disorganization on a customer's order tracking page. Trying to find the tracking number or an estimated arrival date meant to scroll all the way to the bottom of the page instead of having the important information right on the top where the customer can see it.
I redesigned the page to make it easier for the customer to look up their order information. Taking inspiration from what many other e-commerce retailers have with their order information pages, I created a layout that helps summarize the information easier for the customer.
In regards to multiple shipments on an order, the Track Order button will jump to the shipment details to the 1st shipment. The customer can pick which shipment they want to track from the tracking number they click on.
E-Gift Card User Flow
In the old version of the website, anytime a customer would purchase a e-gift card, the page would refresh with information for them to fill out. This as you can imagine was annoying to the customer and would cause a lot of unfinished add to cart orders.
For the new site, we refined the process by simplifying the process into instant actions. With each step of defining the gift card attributes (card amount, name and email of giftee, and buyer's name) the next step would appear within the space. Once the information is complete, the Add to Cart button will activate for the customer to then add to cart.
Since CPWM was looking to increase their e-commerce business, refining the e-gift card flow was an important step to take.
Successes, Learnings, and Next Time
Checking in with former co-workers, I learned that site visits increased within the first month of launch and went further up in the next few months. Since my contract ended right before the site launched, it was hard to get exact data on how things were going such as how well our in-store pickup solution was making things smoother for both the customer, store workers and the customer service team. I did learn that more people have signed up as rewards members since the solution online has made it easier for both online and in-store customers.
What I Learned
Coming away from my time with Cost Plus World Market, I learned that whatever situation I am in to always make sure I ask more questions to get more information, including the easy ones. Considering the situation I was in with coming late to the party, being over prepared is better than under prepared. At times it was challenging with not being able to get all the information I needed in order to make better recommendations (PM not available, minor communication breakdowns with outside technology vendor, etc). I also learned that I should do more research and not to limit myself to just a few examples. Make time to do more examples. This is one way I can learn more about a project’s possibilities and restrictions.
What I Would Do Next Time
Looking back, I would have taking more time to make more connections with other co-workers (such as talking with people that focus on the rewards program) to get more information. Sometimes people will only give you so much information. It’s on you to realize that and reach out in your own ways to get the information you need. Hopefully I can recognize that earlier so I can offer better design directions. Also being in a contractor situation, you are only allowed so much information due to company policies. This can be restricting at times, but I know I am a resourceful person when I need to be. I will find other ways to get the information I need.
Taking time to slow down and digest everything will also help. This helps with seeing the entire picture. Whether that is taking a break for a walk to clear my head or coming back to it later with a clear mind, I think that will help fill in gaps quicker than before.