Desktop Redesign for eCommerce

Original photo by Piroshky Piroshky Bakery (Instagram)

Duration: 2-week design sprint

Tools: Sketch App, LucidChart, InVision, NNG Usability Heuristics

QUICK FACTS

↓ THE DETAILS ↓

Piroshky Piroshky Bakery is a Russian-inspired, homegrown Seattle favorite among locals and tourists alike. The aim of this project was to refresh the eCommerce aspects of Piroshky Piroshky Bakery’s website to increase the likelihood of transactions and thus online sales. This was a student project done under the guidance and mentorship of industry experts.

Piroshky Piroshky’s website is almost unnavigable. Measured against usability heuristics from NNG, the desktop website does not allow for users to easily navigate its eCommerce options. With over 100 takeout orders a day, it is surprising that this local favorite has not refreshed its website to allow customers to purchase pastries online.

Although the beloved pastry shop is quite popular, it had much more potential to optimize a customer’s experience online and thus increase online sales through improving its eCommerce process.

By redesigning for a smooth, quick check out process on Piroshky Piroshky’s website, we will enhance the customer’s experience in placing orders for delivery online. We’ll know this to be true when users utilize the website’s ordering process for deliveries and complete the steps to check out.

The Process

(1) Research & Analysis — (2) Define — (3) Design & Test — (4) Deliver

GENERATIVE RESEARCH

Initiating the discovery process as a UX researcher, I explored the business’ priorities and customer attitudes about Piroshky Piroshky.

I also called the business’ Catering Manager to get a better understanding of how their delivery process worked. Their delivery zone is fairly expansive across King County with occasional deliveries to Pierce County, with a minimum of $40 purchase. Shipments going outside the King and Pierce County region and out-of-state were also available.

The insights gleaned from talking with the business and its customers helped identify the overlap between the proto-persona’s needs (presented later in this case study) and the business’ values and needs. The key overlapping themes were convenience, quality, and simplicity. I held these aspects in mind for the interaction and visual design that would follow.

COMPETITIVE & COMPARATIVE ANALYSES

By reviewing other local competitors and comparable bakeshops, I selected Le Panier, Cupcake Royale, and Piroshki on 3rd to get an understanding of how Piroshky Piroshky offers unique value to its consumers:

The biggest takeaways in this matrix is that Piroshky Piroshky has the most expansive set of options for eCommerce. Additionally, they do one thing and they do it well, with a sole focus on piroshkies and almost nothing else.

While analyzing other websites, I drew inspiration on how their home pages and product page stacks were laid out, given that Piroshky similarly had many pick up and delivery options and a big menu to choose from:

HEURISTIC EVALUATION

In exploring the current website on desktop web, I noticed:

• Most of their buttons do not work

• Extensive scrolling on order forms (“scroll fatigue” kicked in)

• Order form is unclear — doesn’t allow much user freedom and relies on staff call-back

• When pulled up on mobile, it was clearly designed for cell phone browser. So, non-responsive web design.

With regards to Common Design Patterns using NNG’s heuristic evaluation, I reviewed:

• Consistency

• Wayfinding

• User freedom and control

• Visibility of progress

In sum, while the visual design was somewhat consistent within the site, there was much room for improvement.

INFO ARCHITECTURE: SITE MAP ANALYSIS & CARD SORTING

The current site lacked structure, so I began explore how information could be laid out. I devised this first draft of a site map as a place to begin, using Lucid Chart for the first time:

Challenge: In soliciting critique among UX design peers, there was some debate on whether or not items could be picked up based on location or specific product. It could go either way, and one possibility was to allow the user to toggle between the two.

Decision Point: I had considered that if the user task flow involved picking up the items, it would be based on location. Within the design, it would signal to the user whether or not the item is out of stock. As I decided to have delivery be the user’s task, the pick up interactions moved down the priority list in the interest of time.

After making this decision, I wanted to test user mental models based on the initial site map and conducted a card sort analysis with three individuals:

Challenge: Among the three card sort users, their mental models had slightly contradicted the proposed site map. Two of the three had collapsed information about delivery and catering into one category, rather than separating the two. Thus, the site map may have needed adjustment to match how users categorize the information on the site.

Decision Point: Before making any changes to align with these users’ mental models on delivery and catering, I verified this with the notes I documented with Piroshky’s catering manager. She had shared that deliveries are just as customizable as catering orders, including the need for any additional utensils and napkins. Thus there is not much distinction between “delivery” and “catering,” therefore CATER was removed from the site map. I revised the site map and cleaned it up for better presentation, which guided the interaction design and visual design moving forward:

Final Site Map:

I defined the user task for ordering a delivery and prepared a usability testing script for the evaluative research phase. With caveats that the site is in a low-fidelity, static form, I had used this script below:

“Please put in an order for delivery for you and your co-workers, for three days from today. You want to have the order arrive by 4:30pm. Your work office is in the zip code 98000. You will order 50 piroshkies total.”

Interaction Design: Low-Fidelity Wireframes

In combining the information gleaned from the discovery phase and findings from evaluating information architecture, I began to draw out low-fidelity wireframes on paper and tested a paper prototype with two users using the script. After collecting their feedback, I promptly digitized them on the Sketch App.

This was my first time using Sketch App ever for digital wire framing:

I tested the digital wireframes with users over three rounds (3, 5, and 3 users respectively) and redesigned iterations based on users’ comments.

I documented brief notes of iterative changes made by each round.

Below is an example of how the checkout page changed between each of the three rounds, with sections circled to show how they were modified. The section that got the most attention was around displaying visibility of progress as well as how key delivery details were laid out for the user to review, rather than skip past them.

I moved the low-fi wireframes to high fidelity, aligning brand colors with Piroshky Piroshky’s current selection of a highly saturated red and yellow. Based on Lauren’s needs and the ways we could serve as shown in the proto-persona description, I ensured that the copy write was clear, added big, bright visuals of the products, and gave Lauren an opportunity to “flaunt” her purchases via social media.

Below is a video demonstration of the latest high-fidelity prototype on desktop web:

If I were to continue with next steps, I would explore usability testing with the hi-fi prototype with survey metrics, include feedback from catering and delivery staff, as well as deploy the hi-fi wireframes to Piroshky Piroshky’s web development team.

By taking a look at the before and after, the main question is: Have we met Lauren’s needs with the redesign?

Though I did not apply survey metrics to measure the site’s usability in its redesigned state, integrating the research findings and usability principles from NNG has brought the site’s usability at least one step higher, especially in the eCommerce process to achieve simplicity, quality, and convenience. Below is a storyboard of Lauren’s journey in ordering delivery for an upcoming work potluck, which I presented to our UX instrutional team posing as Piroshky Piroshky as my client. By the end, you’ll see Lauren is pleased with the new website redesign and gets praise from her co-workers about her unique choice of food contribution:

LESSONS

I gained a wealth of knowledge about the importance of talking with the business to explore their priorities and identity, including upper leadership, middle managers, and frontline staff. Balancing needs of both consumers and the business is critical to design viability.

>>Next project: Sunu Foundation Website Redesign