Food Ordering Case Study

Panda Express Online Ordering UX

I wrote up a UX Case Study a couple of years ago on the Panda Express online ordering system, after a frustrating experience with it. You may watch the SlideShare below in full-screen to see all the notes, or just scroll down to see all the slides on one page.

Skip to where I re-imagined the process


Easy Beginnings

The green circles represent where I clicked/interacted on the page.

So far, everything up to this point had been self-explanatory: starting an order, continuing as a “guest,” selecting a location.

Tricky Timing

After choosing a restaurant location to order from, I had to choose what time I wanted my order to be made. The choices were either “As soon as possible,” or a specific date and time in the near future. I selected the “As soon as possible,” which had the estimated order time next to it (in parentheses). However, this estimated time kept becoming longer as I continued my order and was one reason I left the site.

The slide below is part of the same screenshot above, just a close-up of the right-hand side of the page.

Ordering Food – Not So Easy

Now was time to actually start ordering some food. This should have been fun, and at first, it was quite simple.

UX Food Ordering Case Study - Linda Albertini

Here came the frustrating part. I had finished building my first plate and wanted to order a second one. My eyes gravitated towards the “Add More” button. I assumed that this was where I needed to go to order another plate.

So, I was surprised to find that “Add More” was an invitation to make my first plate bigger (by adding a 3rd entree). I fumbled around in frustration for a while before resigning to clicking “Finish Plate.” I thought this meant the same as “Finish Order” and that I was only able to order one plate.

UX Food Ordering Case Study - Linda Albertini UX Food Ordering Case Study - Linda Albertini

Again, I thought for a moment that my order was done with only one plate. This page looked nearly identical to the page I saw when I first started ordering food. A simple heading such as “Continue building your order” could have helped clear things up.

UX Food Ordering Case Study - Linda Albertini

The slide below is part of the same screenshot above, just a close-up of the right-hand side of the page.

When I first saw the “Order Details” area, I thought my order had already been placed. The “Checkout” button wasn’t very prominent. Some people might miss it and leave before submitting their order.

UX Food Ordering Case Study - Linda Albertini

I added another menu item to my order before clicking “Check Out.”

Wrapping Up

When I was done selecting my food, the call-to-action button read “Check Out.” Although, when I clicked it, I was directed to a page to review my order, which also had a “Check Out” button.

I wonder how many people think they’re done and leave after clicking only the first of the two “Check Out” buttons? Clearly, the first button could be renamed something more fitting, such as “Review Order.”

UX Food Ordering Case Study - Linda Albertini UX Food Ordering Case Study - Linda Albertini

I stopped at this point, not wanting to accidentally trigger an order.

Nice touch: the placeholder text under “Order Instructions” reads, “One soy sauce packet…”  I usually forget to ask for sauce at the restaurant, and the cashier is the one who brings it up. This simulates that in-store interaction.

UX Food Ordering Case Study - Linda Albertini


Re-Imagining the Order Process

Here are some changes I would make within the ordering process, starting from the point after a customer has selected a restaurant location.

Building Food Order

First, I would suggest switching steps “2” and “3,” such that a customer can order food items before selecting a pickup time. This is to avoid the distraction of the original pickup time changing as you add more items to the order.

Food Ordering UX Wireframes - Linda Albertini

The “plate building” screen would be similar to the current one, though I might add an expandable “Order Details” icon.

Food Ordering UX Wireframes - Linda Albertini

The screen below simulates the first plate being completed, with options to add a 3rd entree or drink. The “Add to Cart” button is close to the plate icons, instead of the lower right-hand corner of the screen.

Food Ordering UX Wireframes - Linda Albertini

After a customer adds a plate to their cart, they will have the option to add more items if desired. At this point, the “Order Details” sidebar will be populated with the items in their cart so far.

If the customer is done choosing their food items, they will continue to “Select Time.” Again, the call-to-action button is within easy reach, rather than tucked away in a corner.

Food Ordering UX Wireframes - Linda Albertini

Pickup Time & Payment Preference

Now the customer can select a pickup time. If he or she chooses “As soon as possible,” the estimated time will not change due to the order size. This is because the food order step will have already been completed.

Food Ordering UX Wireframes - Linda Albertini

Here, the customer can choose whether to pay in store or online. If he or she selects “Pay now,” a form with billing information will appear below the radio button. The final call-to-action button is clearly labeled “Submit Order.”

Food Ordering UX Wireframes - Linda Albertini

Confirmation

The customer sees a confirmation of his or her order, along with a reminder of the pickup time and location.

Food Ordering UX Wireframes - Linda Albertini


In Conclusion

Although I no longer dine at Panda Express, out of curiosity, I went to their website to see how they have changed their online ordering system since 2014.

Some of the visual elements have been updated, and the process for building a plate is similar. But, when it comes to continuing to add to your order, it’s just as confusing as before. In fact, more confusing. Whereas previously, the appropriate button to click if you wanted to add more plates to your order read “Finish Plate,” now it just reads “Finish.”* That could be misinterpreted to mean “Finish order,” which would be frustrating if you wanted to place a larger order.

*Update 3/23/17: They changed the button text from “Finish” to “Add to Cart;” much clearer!

What did change was the checkout step. Before, clicking on “Checkout” led to a screen to review order details, where you had to click another “Checkout” button. Now, clicking “Checkout” leads to a form that prompts you for your name, email, and optional password and newsletter opt-in. The next call-to-action button is labeled “Continue.” That seems to make more sense. However, that’s as far as I explored the new ordering system, since I didn’t want to accidentally place an order.

I’m curious as to what kind of feedback the folks at Panda Express are getting with regards to their online ordering platform. I would think a company of that size would have the resources to track metrics such as abandoned cart rates and at which step in the ordering process people give up. Hopefully they will use that data to continue improving their website.



View Portfolio to see more, or Contact Me to schedule an interview.

Fashion Website Redesign

Client: Adrienne Borgersen, Editor-in-Chief, LA Fashionista Compassionista

Date: May 2016

Link: lafcnyc.com

Project Overview

Founders Adrienne Borgersen and Lois Eastlund, an image consultant and fashion designer, respectively, started LA Fashionista Compassionista (LAFC) in 2014 when they saw a need for a platform dedicated to vegan, cruelty-free fashion and beauty. Catering to the growing demand for stylish and ethical alternatives, the online magazine is published quarterly and is made possible by a supportive community of writers, models, photographers, designers, and of course – their readers.

The initial LAFC website was built with a standard website builder software, which had limitations. It was plain-looking and didn’t project “style” and “fashion.” The old website was not well-organized and didn’t allow for interactive features, such as reader feedback, a current blog, or social updates. It was also not responsive, making it difficult to navigate and read for mobile visitors.

Adrienne needed the new website to improve the email capture process, be easy to maintain, and look stylish and beautiful. Most of all, she wanted to feel proud to promote her website – one that would match the caliber and aesthetic of the magazine itself.



Process Summary

Technologies Used:

  • WordPress
  • MailChimp
  • Adobe Photoshop
  • Adobe Dreamweaver
  • HTML5/CSS3
  • PHP

Credits:

Adrienne Borgersen: Logo, Photographs, Written Content (Blog posts & pages)

Linda Albertini: WordPress set up, Child Theme design & development, MailChimp integration, Plugin integration, some Photograph editing, some Copywriting 



Process Details

The Kickoff Call

The client and I discussed the issues with original website and her desired outcomes for the website “makeover.” I typed up my notes from our conversation and checked in with Adrienne to make sure we covered everything and were on the same page moving forward.

LAFC’s target audience is comprised of fashion-forward women who are vegan, environmentalists, and/or generally concerned with where their clothes and beauty products come from. Adrienne wanted the new website to match the look of a proper fashion magazine and entice new visitors to subscribe.


Content Inventory

I typed up a content outline to plan out top-level and secondary pages, brainstorm content placement, and identify any new content that would need to be created. I weighed options for which platform to use for the new website. Given the client’s goals, we decided to go with WordPress, which would allow Adrienne and her team to regularly share news and events with their readers.


Research & Brainstorming

Adrienne really liked the look and feel of Vogue, Elle, and other top fashion magazines. I visited their websites and took screenshots, noted any common themes, and thought about how the best features could be incorporated into the LAFC website.

LAFC website process - Linda Albertini Web Design

Some of the main elements that stood out to me while researching websites for fashion magazines included:

  • Large typographic logo in the header with a neutral, contrasting background color
  • Large photos of models or celebrities near the top of the content area / above the fold
  • Easy to find “Subscribe” area

Below are some wireframe sketches for the main page elements (I toyed around with a few variations on the footer):

LAFC website process - Linda Albertini Web Design

LAFC website process - Linda Albertini Web Design


Building in WordPress

Since we didn’t want any downtime on the original website during development, I installed WordPress in a subdirectory for the new site. From there, I created the top-level pages and navigation menu, then added all existing content available.

I browsed and tested different WordPress themes that could be suitable for LAFC. After evaluating the pros and cons of each, I went back to the default TwentySixteen theme, created a child theme, and started customizing it from there. I chose to build under the TwentySixteen theme, because it was responsive, didn’t have any complicated bells and whistles, and had more documentation to help me hack into the code.

Lots of testing, tweaking, and re-testing for this part!

LAFC website process - Linda Albertini Web Design


Adding Plugins

To display our hero (or heroine) images, I found and installed a suitable slideshow plugin for the “Home” page. Here we added fun photos from the most recent magazine shoot, as well as a promo video underneath.

Because LAFC is a small magazine, Adrienne wanted to add a personal touch and help her readers connect with the team behind it. After testing out a few options, I found and installed a suitable plugin for managing team member biographies on the “About” page. I filled in the photos and bios where available and used placeholder content elsewhere. I enlarged the headshot image size by modifying the plugin stylesheet, cropped and enhanced the team members’ profile photos, and re-sized them to the proper dimensions. Pictures that are bigger would just take longer to load and potentially frustrate visitors.

LAFC website process - Linda Albertini Web Design

LAFC website process - Linda Albertini Web Design


MailChimp Customization

Adrienne’s main goal for the website was to acquire new subscribers for her magazine. She was already using MailChimp on her original website, but the signup area was not compelling or attractive. It had 4 form fields, one of which asked visitors to choose between “html” or “text” email formats – confusing for the average gal.

For the new WordPress site, I added a customized Mailchimp signup form to the sidebar, simplified with just 2 form fields. We decided on a catchy name for Adrienne’s signup list (i.e. “Join Club #fashcompash” instead of “Sign up for a free subscription”). I tested it out by attempting to sign up and noted where the user experience could be improved at each stage of the subscription process (including the follow-up emails generated by MailChimp).LAFC website process - Linda Albertini Web Design

I went into Adrienne’s Mailchimp admin panel to customize the emails sent to new subscribers, keeping consistent branding. I then created customized confirmation pages on WordPress to use instead of the default MailChimp pages, keeping visitors on the site for an experience that is more intuitive and less disruptive.

LAFC website process - Linda Albertini Web Design

LAFC website process - Linda Albertini Web Design


More Content

I added a contact form on the “Contact Us” page, as well as secondary pages for “Advertise with Us” and “Work with Us.”

Within the blog section, I organized and added content for “Features” and “Events.” Since fashion websites rely heavily on images, I found and installed a lightbox plugin compatible with WordPress galleries.

LAFC website process - Linda Albertini Web Design


Troubleshooting Galore

Thank goodness for backups! I restored the website after a WordPress update wreaked havoc on the client’s server (one with so-called “free hosting”). After I convinced the client to invest in better hosting with a more reliable company, I migrated the WordPress site to the new server. During the transition process, I worked with the hosting company’s customer support team to fix display problems and redirect issues that surfaced after changing the DNS nameservers. I responded quickly to the problems to minimize any downtime.


Publishing & Off-boarding

After the website was successfully launched and the last-minute content was added, I created an off-boarding process for the client. Since we lived on opposite sides of the country, I recorded screen capture video tutorials to show her how to manage the website from the WordPress dashboard. I sent Adrienne a document with links to the video tutorials and a set of instructions. I offered to set up a free 1-hour call to go over any key processes and questions with the client, but she was happy to find that she was up and running on her own after reviewing the tutorials.



Screenshots Before & After

Before:

After:

 

Fashion Website after - Linda Albertini

LAFC website after - Linda Albertini Web Design

LAFC website after - Linda Albertini Web Design

LAFC website after - Linda Albertini Web Design

LAFC website after - Linda Albertini Web Design



To view the live website, please visit: lafcnyc.com

See Client Testimonial


View Portfolio to see more, or Contact Me to schedule an interview.

Bilingual Artist Website

Client: Miguel A. Chávez, Fine Artist

Date: April 2015

Link: MiguelAChavez.com

Project Overview

Miguel A. Chávez is a San Diego artist, originally from Argentina, who has been painting for over 50 years. His style has evolved over time through a variety of themes, appealing to a wide range of audiences.

Miguel approached me to create a bilingual website that would allow him to share his work and accomplishments with friends and art galleries, both local and abroad. The project resulted in a responsive website that honors the artist’s history and dedication to his craft, while highlighting his most recent masterpieces.

Since launching and sharing his website, Miguel has received positive feedback from friends and colleagues for his paintings, as well as interest from art galleries. The site will evolve as the artist continues to paint and share his gift with the world.



Process Summary

Technologies Used:

  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe Dreamweaver
  • HTML5/CSS3
  • JavaScript
  • Microsoft Word

Credits:

Miguel A. Chávez: Photographs, Spanish content

Linda Albertini: Website design & development, English content (translated), photo editing



Process Details

The Kickoff Meeting

The first meeting with the client is a good opportunity to define the client’s goals and audience, which sets the foundation for the rest of the project. Miguel wanted a website to showcase his artwork and career highlights so that he could:

  • Approach art galleries and increase his chances of getting booked
  • Share his work with friends and former colleagues in Argentina and the U.S.
  • Add the URL to his business cards, which he hands to new contacts and curious onlookers who find him painting outdoors

In summary, the primary purpose of the website would be to serve as a marketing tool for brand awareness, with the secondary goal of generating sales as an indirect result.

The audience of his website would include:

  • Art gallery curators, who are connoisseurs and look for a certain aesthetic caliber. They often serve a particular type of art collector or have a niche in a particular art style or theme. They are busy people who sort through lots of artist samples and portfolios. The want to be impressed and hate having their time wasted.
  • Former artist colleagues, who are knowledgeable about art and can offer constructive feedback and encouragement. They enjoy looking at others’ artwork for inspiration and appreciate the talent and effort it takes to create a great painting. Most of Miguel’s former colleagues are Spanish-speaking senior citizens.
  • Members of the general public, which could include San Diego residents as well as tourists. They may find Miguel painting outdoors and have a conversation about the subject or the artist’s technique. The would leave with one of Miguel’s cards and, if they are intrigued enough, look up his website later that day. They would be considered casual art observers rather than active seekers.


Content Inventory

Miguel provided me several photographs and pages of notes at the start of the project. Below I outlined top-level and sub-level categories of content to help me see what I was working with. This was a first step in eventually grouping and organizing the content in a practical manner.

Artist website content inventory - Linda Albertini

Digitizing Written Content:

  • Photographed 17 pages of artist’s notes handwritten in Spanish
  • Typed them into a Word document
  • Proofread and edited for consistency in formatting
  • Translated into English
  • Sorted digital notes into subcategories in reverse chronological order

Artist website responsive content gathering - Linda Albertini

Digitizing Visual Content:

  • Took digital pictures of the artist’s favorite analog photographs
  • Cropped and edited selected photos to restore color and clarity
  • Sorted photos for use on specific web pages

Artist website content gathering - Linda Albertini

 


Research

I researched other artist websites to gather ideas, inspiration, and best industry practices.

Specific areas I looked for included how other artists:

  • Organize and display CV information (exhibitions, awards, etc.), including navigation design
  • Categorize and display gallery images
  • Design the homepage to entice visitors to explore further

Artist website research - Linda Albertini

Clockwise from top left:

James TurrellAmber JeanZenon ToczekWest Coast Fine Art


Sketching and Ideation

Given that the home page would be the primary landing page for most visitors, it had to make a great first impression. Since we were also creating a bilingual website, I needed to add an option for visitors to proceed in English or Spanish. Sketching was a great way to generate multiple ideas quickly without having to commit to one immediately.

Early Stage Home Page Concepts:

Artist website sketching & ideation - Linda Albertini

The concept here was to simulate a stack of polaroids of the artist and his artwork. Clicking on a “polaroid” in the background would bring it to the forefront. Although this would have been a fun, interactive concept, I didn’t pursue it for the following reasons:

  • Time-consuming to implement (not budget-friendly)
  • Difficult to make feature responsive, if not impractical
  • Potential to distract users and keep them from actually entering the site (users may think the photos on the landing page represent all of the artwork displayed)

Artist website sketching & ideation - Linda Albertini

The idea here was to have two large photographs of the artist painting, with a language option and corresponding tagline over each photo. Initially, I had sketched this as two rectangles side by side, but it made the page look too divided. I re-sketched it to look like interlocking pieces of one larger rectangle, which helped bring some cohesion.

However, in this version, “Español” appears higher on the page than “English,” giving the impression that it is more important. There would also be the issue of making this trapezoidal concept mobile-friendly.

Artist website sketching & ideation - Linda Albertini

I was inspired by another artist who used a full-screen image on their home page. What better way to “sell” Miguel’s website than by letting his artwork take front and center? Plus, I knew this concept could be made responsive relatively easily.

However, I felt that the title of the website (the artist’s name) ought to be higher on the page and larger than the language navigation options. I tweaked the above concept in later drafts to reflect those changes.

Early Stage Gallery Page Concept:

Artist website sketching & ideation - Linda Albertini

Given that Miguel has been painting for nearly 50 years, I had to come up with a way to organize and display all of his images. Placing too many images on a single page would slow the page speed  and potentially overwhelm visitors.

Initially, we envisioned presenting his work in reverse chronological order. I sketched out concepts with buttons labeled by decades, followed by a similar concept with a drop-down menu.

However, given that art gallery curators (a target audience) prefer to see recent work and style continuity, we decided to select about a dozen of Miguel’s best recent paintings corresponding to one particular theme. This eliminated the need for gallery sub-navigation. Instead, we placed all of the selected images on a single gallery page.

Early Stage About Page Concept:

 

Artist website sketching & ideation - Linda Albertini

Over the last 50 years, Miguel has compiled quite a list of career accomplishments. Taking cues from other professional artist websites, we sorted Miguel’s “About” page information into various CV subcategories, namely: Introduction, Education, Employment, Solo Exhibitions, Group Exhibitions, Awards, and Guest Jury.

It would be impractical to place all of these labels in the primary navigation bar; too many choices. Rather, I wanted for visitors who click on the “About” tab to see an introduction of the artist, then have the option to explore specific CV sections.

I toyed with the idea of a drop-down menu (shown above). However, since some of the website’s visitors would be senior citizens, I decided to make all of the secondary navigation options clearly visible from within the About section, rather than hiding them in a drop-down.

Improved Concept Sketches:

I sent these images to the client for approval to proceed with the next step.


Wireframes & Mockups

Based on the approved sketches, I created a wireframe of a sample page using Adobe Fireworks. I then added more detail and color to create a mockup, then sent it to the client to review.

Artist website mockup - Linda Albertini


Coding

Once the mockup was approved, I coded a responsive page template using HTML & CSS. There was lots of testing and tweaking at this stage, before moving on to code each individual page.

Artist website coding - Linda Albertini

Using the template, I filled in the content for each “About” page, keep careful track of each dated entry. I made sure each page has a consistent copy in English and Spanish.

Artist website lightbox - Linda Albertini

I added thumbnails of selected works to the “Gallery” page, which enlarge and provide details for each painting when clicked (using a jQuery lightbox plugin).

Artist website scroll - Linda Albertini

Finally, I added some helpful features, like a “back to top” button that appears when the user scrolls down past a certain point on the page.


Testing

I tested the website on different browsers at various viewport sizes, using my laptop and mobile phone. I made sure all of the images were optimized for speed and quality and could scale well down to mobile screen sizes. I tweaked the code to fix any glaring display issues, followed by more rounds of testing and adjusting. Then came time to publish the website, test again, and verify that everything was working as expected.

Artist website responsive testing - Linda Albertini

 



Screenshots

Artist website screenshots - Linda Albertini

Artist website screenshots - Linda Albertini

Artist website screenshots - Linda Albertini

Artist website screenshots - Linda Albertini

Artist website screenshots - Linda Albertini

Artist website screenshots - Linda Albertini



Reflecting

If I were to do this project over again, I would include a simple contact form on the “Contact” page, in addition to providing the client’s email address and social media links. This would be especially useful for art gallery curators to quickly reach the artist, without having to open their email client and copy the email address. I would add a contact link in the footer, as well.

I would also incorporate user testing in the wireframing and prototyping phase. Although I went straight from mockup to code, I would now consider using a tool such as Adobe XD to add some interactivity to my mockups. This would allow me to create a basic prototype that could be tested with potential users before coding.

I would ask at least five people, preferably representative of the target audience, to attempt to complete specific tasks, such as:  “Find the artist’s email address” or”Locate the artist’s most recent solo exhibition.” Based on their success or difficulty with these tasks, I would tweak the prototype as needed and re-test before developing the website.


To view the live website, please visit: MiguelAChavez.com 

See Client Testimonial


View Portfolio to see more, or Contact Me to schedule an interview.