Spring Store Extension for Paper Presentation
For my 3rd Project for UXDI at General Assembly, I was tasked with designing a spring-themed pop-up store responsive website with 100 curated items, giving special attention to my primary persona.
Contextual Inquiry & Card Sorting
As a first step, I undertook in-store contextual inquiry at Paper Presentation’s physical store to gather insight into their products, with the aim of making sure that those hundred products selected would not only fit in with the theme for spring but also include the most popular products around. Conversations with the in-store manager and glancing across to notice the areas with the most footfall allowed me to gather a pretty solid inventory for the project.
With my inventory in tow, I had 7 recruits ready to help me understand how the users of the website would possibly relate to the inventory on hand. In the first round of card sorting, 4 open card sorts were administered — helping me arrive at the 6 broad categories and multiple subcategories.
This was later used as a guide for the closed card sorting where the recruits were simply asked to place the inventory to these categories and and then suggest changes as well. The second round was particularly important as it helped me nail down the inventory into definite subcategories.
Competitive & Comparative Analysis
To make sure that the e-commerce experience on the pop-up extension was upto the mark, I referred the Baymard Institute’s — a research and usability consultancy specializing in the e-commerce space — rankings for the top e-commerce websites. I identified the most important metrics in this particular context to be product findability & user flow — or in other words, make sure the user is able to find what they need and also ensure that there’s the bare minimum of steps involved to complete the transaction.
My competitive analysis involved going through the user flow for Papyrus, Paper Source & Blick Art to gauge the state of the market that Paper Presentation was involved in and understand what could be improved upon. The importance of having 3rd party payment options stuck out as both Papyrus and Blick Art offered this via PayPal.
Site Map Navigation
Choosing My Primary Persona
With threes persona given — Roland, the 62 year old HR manager with grandchildren; Trung, the 38 year old single dad; Daria, the 28 year old screen-writer — we were given a free-choice to decide our primary persona and make them the focus of our design. Taking into consideration the product inventory and the categories they had been put into, along with the fact that an efficient checkout system with third-party payment options was a trend I had seen in my comparative analysis, there was a compelling case for Daria to be my primary persona. Daria was also deemed to be a digital native and wanted knowledge and authority on the product inventory, fast shipping and the ability to submit product reviews while a lengthy checkout process, poorly written website copy and too little choice of retro stuff were considered to be her pain points.
Addressing Persona’s Needs
The ability to sort the product list on the category page was my way of serving my primary persona’s need for knowledge and authority on the product inventory while ratings and reviews — the ability to both view and submit them addressed another of her needs while this would also serve the secondary persona Trung who wanted ‘social proof from others to know what’s cool’. Furthermore, the category page simply listed the name of the product and it’s brand without including it’s price as I deemed Daria to not be price conscious and be more concerned with authencity of the product.
In the product page, however, I took special care to include minute details regarding the product as she wanted to be sure of even small product details. This was complemented by using large images and also accounting for multiple product images to be shown, if available.
Fast-shipping was also included, complemented by Apple Pay to increase the efficiency of the check-out process. Apple Pay was chosen ahead of PayPal as Daria’s persona was clearly entrenched in the Apple ecosystem, using a MacBook Pro, iPhone and an iPad. Her fondness for Urban Outfitters was also considered when choosing the layout of the Homepage and navigational elements such as the breadcrumbs.
Usability Tests & Changes Made
While all 6 usability test participants were able to move from the homepage till checkout using Apple Pay using the prompt of buying an iPhone Case after reading reviews of the product, changes were made to increase the usability of the Spring Store.
6/6 of users thought the header was probably too big.
2/6 users spoke of their preference for bigger and wider images.
6/6 users did not like the top part of the footer, while they loved the ‘follow us’ area.
2/6 users conveyed their dislike for the font used but appreciated the spacing and general structure of the cells.
1/6 users queried on where they could sign in or view their account if logged on.
Alignment of the breadcrumbs wasn’t deemed to be optimal, hence moved to the left.
Square images were seen to be preferred, with curved edges on interactive areas. This was now being followed globally.
Apple Pay introduced on the product view page, where users can now checkout with a single tap.
Buttons have now been spaced out more and given signifiers. Previous comments included, “This looks like a chart”.
Users would now be allowed to keep browsing after adding an item to their bag, instead of being taken to their bag as in the first iteration.
However, the ‘Add to Bag’ button changes to ‘View Bag’ so that the user does not have to stretch for the top right bag icon to view their bag and checkout.
Look into more 3rd party payment options.
Use prompts tailored to the secondary personas and conduct usability tests on the iPad and Desktop.
Despite focusing on the primary persona, I believe the user experience of the spring store will address most of the needs of the secondary personas as well. The most important requirements of the business have been fulfilled as well, resulting in the successful completion of the project.