Category

User Experience

How to Run a Remote Design Workshop

By User ExperienceNo Comments

Last week, Bytelion had the opportunity to participate in MICA’s UX Design MPS Virtual Residency. This interactive workshop was held for over 50 graduate students across the world looking to transition into or jumpstart their careers in UX design. After speaking with Daniel Sipzner regarding possible topics for workshops during the event, Bytelion decided to focus on “UX design within project constraints” as a topic. Below we will go over how we approached the workshop,  some of our successes, and what we could do better next time.

Goals

During our planning, we approached this workshop with the following goals in mind for the students:

  • Ensure students understand the value of UX processes in terms of what is providing value to the project as opposed to set deliverables
  • Relay the importance of time-boxing activities
  • Provide students with a base template for an ‘ideal’ project and answers to their questions to help them develop their own UX process
  • Have students work in a group and effectively communicate how they think the UX process should be customized to provide the most value for an example project
  • Help students actively think about project planning by having them allocate percentages of their allotted time to their planned activities and thinking critically about their deliverables
  • Students will have a UX process personalized to their strengths that can work as a template for future project planning
  • Each student will gain experience planning out UX projects down to the number of hours per day in addition to which steps are needed or not needed depending on project specifications.

Planning

The workshop was held twice in back to back sessions, with each session lasting 2.5 hours.

Here is a break down of our agenda:

Part 1 – Introduction (30 minutes)

  • Introductions (5 minutes)
    • Marc
    • Stefanie
  • Marc’s Presentation: Why are we here designing things and how do we do it? (15 minutes)
  • Stefanie’s Presentation: Insight from a MICA Alum  (5-10 minutes)

Break (5 minutes)

Part 2 – Solo and Team Exercises (45 minutes)

  • Solo Exercise:  Fill out UX Process Details (10 minutes)
  • Solo Exercise: Fill out UX Process Percentages (5 minutes)
  • Marc’s Presentation: Sample Project Breakdown Explanation (5 minutes)
  • Getting into Teams!!! (5 minutes)
  • Team Exercise: Fill out Team UX Process Details (5 minutes)
  • Team Exercise: Read Mock Project Description (5 minutes)
  • Team Exercise: Discuss the Mock Project (5 minutes)
  • Team Exercise: Fill out Team Process Percentages (5 Minutes)

Break (5 minutes)

Part 3 – Team Exercises and Follow Up (45 minutes)

  • Team Exercise: Project Estimation (30 minutes) [Marc joined rooms to answer questions]
    • Team Reassessment of Project Steps and Percentages (10 minutes)
    • Organize Steps into a Project Plan and Assign Hours (10 minutes)
    • Review & Refine Plan (10 minutes)
  • Team Presentations  (10 minutes; 2 minutes per team)
  • Solo Exercise: Students Vote for Best Solution (5 minutes)
  • Marc: Explanation and Questions (remaining time)

Logistics & Materials

  • Presentation material communicated via a slide deck.
  • A UX process template provided to all participants.
  • Directions for team activities provided to all participants.
  • Miro board with templates for each group and their activities provided to all participants.

Tools

  • Google Slides
  • Google Drive
  • Zoom
  • Miro
  • Webcam
  • Computer
  • Beanie

MICA students collaborated in teams and worked on a virtual artboard created by Bytelion in Miro.

Where We Could Have Done Better!

Timing –  We allotted for 20 minutes of extra time or 20 minutes of questions. This was not enough time. We did not account properly for needing to communicate directions multiple times regardless of documentation provided. Due to some students having no experience with project planning or working in Miro, additional clarity was necessary. On the plus side, participants were willing to stay 15 minutes late after each workshop to ask questions.

Providing More Documentation – Despite providing multiple documents in addition to having the Miro board set up prior to the workshop starting, we feel we could have provided more for participants to reference when they missed certain concepts. We should have provided the itinerary above so students could better understand how the various exercises worked together from the start.

Things to Consider for Future Workshops

Questions During or Afterward – We allowed participants to ask questions during the workshop as a way of keeping them more engaged and excited about the work they were doing. We also wanted to make sure that they understood exactly what there were doing, as this was a fairly new concept for most of them. This also added to our time but seemed to result in people being more comfortable with the process and understanding its value.

What Went Well!

Establishing Trust – We were fortunate to have a recent graduate of the program as a new hire at Bytelion. Stefanie had the opportunity to speak about some of the things she had learned as she transitioned from an academic setting to working in the private sector, which resonated with what current students were experiencing.

Connectivity and Audio/Visual Quality – We had few connectivity issues during the 5 hours of the workshop. Both video and sound quality were generally good. Prior planning and testing technology in advance helped a lot here.

Providing Value – Students said that they had not been so excited to work so hard all week and learn about real world UX constraints. Multiple students also expressed that if given the option they would love to take a class on the topic.

Illustration of a person shopping on a mobile device.

6 Key Ways to Improve Your eCommerce User Experience

By User ExperienceNo Comments

When customers shop online, it is similar to shopping in a brick and mortar store. They have a goal in mind– whether to buy a specific item or to browse your inventory– and they want to make their purchase as seamlessly as possible. To customers, your website’s homepage is your storefront. Your category pages allow your customers to walk through your product aisles. Your product detail pages provide shoppers the information they would expect from holding an item and reading the packaging.

In the eCommerce world, competition is more fierce. If customers cannot easily find what they need on your website, they are only a few clicks away from your competitors.

Providing a compelling user experience (UX) is critical to your company’s eCommerce success to increase conversions and boost other KPIs. The goal is to transition curious visitors to loyal customers. And when a website is designed with the customer in mind, it creates a user-friendly shopping experience that builds trust in your brand.

Here are Bytelion’s top tips to instantly improve your eCommerce website’s user experience:

1.  Think mobile-first

Experts project that 45% of the total eCommerce revenue in the US will come from mobile purchases in 2020, and these numbers are expected to keep growing in coming years. Your website’s homepage is your first impression to visitors, which will often determine if they continue engaging with or leave your site. Websites that are not optimized for smaller devices can make it tricky for visitors to navigate, especially if buttons are too small to tap or the layout does not change to fit the new size. Usability testing, a research method in which UX designers observe and understand how people interact with interfaces, is a great way to ensure that designs are easy to use on different platforms. eCommerce websites that think ‘mobile-first’ save a lot of money during the design and development process by strategically building for both a mobile and desktop audience.

Screenshot of B&H's homepage on a desktop.

B&H’s website adapts to a user’s screen size. While product details and changing images are displayed to the user on the desktop website (shown above), the mobile-optimized website (shown right) is more intuitive for scrolling and tapping behaviors, which makes it user-friendly for small screens.

The navigation bar is consolidated into a menu to save screen size, and large buttons replace text, which makes tapping easier. Product category tiles stack to prevent crowding on the page, which lets visitors easily scroll through their options to find what they need.

Screenshot of B&H's homepage seen on a mobile view.

2. Make sure your calls-to-action (CTAs) are crystal clear to shoppers

Your goal is to help visitors find what they need and complete their purchase. By keeping the visitor’s next steps clear, you help reduce user confusion and potential frustration. CTAs such as “Add to Cart” or “Check Out” should be clear, large, and easily visible to your shoppers. 

This is a great opportunity to use some of your brand colors too, but make sure that your font size and colors make your buttons legible. UX designers regularly conduct user interviews to help inform site design decisions that keep the customer in mind. The effectiveness of website CTAs can often fall on labeling, color and other visual indicators. For example, buttons labeled “Submit” vs. “Cancel” should be easily distinguishable from one another by utilizing different colors, icons, text and formatting.

Screenshot of a product detail page on Etsy.

The CTAs on Etsy’s website are large and emphasized by bold outlines or filled in with black to make it stand out on the page. The button text is legible to shoppers, and by using different designs for each of the buttons, it is clear to users that the buttons complete different actions. Additionally, the site utilizes icons that help to show shoppers what they can expect to come next.

3. The checkout process should be effortless

The checkout process is often a website’s make-it-or-break-it point. Once shoppers have their credit cards ready, they will be the most critical about their confidence in you as a company. A well-designed checkout process should be simple and transparent to keep online shoppers at ease.

Keep the checkout process short and straightforward. Only ask for information you actually need to complete the purchase. Visualizing the shopper’s progress with a completion bar, for example, also helps set their expectations of how close they are to finalizing their purchase. Visitors should also have the option to check out as a guest, especially since some shoppers will be hesitant to provide more information than necessary. You can recommend making an account to make future checkouts easier, but forcing visitors is a guaranteed way to lose potential sales.

Transparency is key when it comes to building trust. Shoppers will not share sensitive information if they think a website is sketchy or unsafe. To build trust, provide transparency in pricing, including the breakdown of taxes and shipping costs. Apart from sheer convenience, accepting payment methods such as PayPal and Apple Pay can also help provide a sense of security to the customer by allowing them to pay through a linked trusted account.

FREE AUDIT
Screenshot of Amazon's checkout process.

The reason why Amazon comes up often in eCommerce examples is due to the thought they put behind their online shopping UX. In a single page, shoppers can review their default shipping and payment information while still having the option to make any changes. By providing transparency in shipping options, cost breakdown, and only showing the last four digits of the credit card number, Amazon builds user trust and credibility. It does not get much easier than placing an order with one click.

4. Visitors should easily find what they are looking for

Simply put, users should know where they are on your site at all times and should be able to easily move through the pages to find what they are looking for. Information on the page should be clear, whether the customer is looking at details for a specific product or browsing through a category of related items. How your website pages are structured is incredibly important, balancing the defined user needs on your website, while also considering search engine optimization (SEO). A well-designed eCommerce site will provide easy navigation for new customers as well as specificity that helps returning customers find exactly what they need. Providing a search bar is a great example of a website feature used to help customers quickly find specific items they have in mind.

Screenshot of Nike's navigation bar and categories as seen from the homepage.

Nike provides very simple navigation for its shoppers. With only a few main categories, visitors are not overwhelmed and can easily find relevant subcategories when hovering over the navigation bar. A search bar is also available for shoppers who know what they want and can be used by entering specific keywords to return results.

5. Product details should communicate information the shopper needs

Unlike shopping in a store, eCommerce shoppers are dependent on your product detail pages to understand the product they are considering purchasing. An effective product page is designed around the information that is most important to your visitor. 

Product names should be clear and descriptions be concise and include all the necessary details. Additionally, product images are also critical since this will be one of the first ways shoppers identify both the item and its quality. Having high-resolution photos and multiple angles help build customer trust that they will be getting what they purchase. The contents of your descriptions and product details will differ from product to product; however including a few sentences and dimensions or sizes are a good start.

As you learn about your users’ needs and habits, the next step to creating a delightful shopping experience is by personalizing content. Perhaps your user seems to like a specific item or style based on previous purchase or browsing information? When viewing a product page, offering suggested items that align with the user’s interests presents them valuable information and can help increase sales.

Screenshot of ModCloth's product detail page.

ModCloth, a women’s clothing retailer, provides a clear product page and helps visitors easily find the information they need about an item. Multiple images are provided to show the product from different angles, with added personality to make the visitor’s experience more delightful. The title and pricing are very clear, as are potential discounts and ratings. Visitors can see all available sizes and colors, and the product descriptions and details are all available on the same page, separated by clickable tabs to prevent overwhelming amounts of information from appearing all at once.

6. eCommerce websites should cater to different shopping styles

A successful eCommerce website is designed for the needs of various shopper types, including visitors who are browsing as well as buyers that know exactly what they want. When a visitor is not sure what they are looking for, category pages are important. Understanding what types of products your website offers and being able to compare individual items within those categories helps visitors evaluate their options before making their selection. On the other hand, when a visitor knows what they are looking for, a combination of search and filters will help them find their product quickly. Filters are ideal for buyers who know what they want, since they display specific results that fit the shopper’s exact needs.

Screenshot of Airbnb's filter options when booking accomodations.

Airbnb’s website allows visitors to view all available accommodations for their location and timeframe on a map, organized in a list on the left side of the initial search. This helps guide browsers who want to view all their available options. For buyers with intent, the filter menu allows them to select exactly what they want from their stay, ranging from facilities to house rules to the language the host speaks.

Bytelion’s Process

Providing a positive eCommerce experience begins with the consumer and understanding how people shop online. The tips above are useful for optimizing your website, but it is also important to remember that there is no one-size-fits-all model for all eCommerce websites. The needs of someone looking for a specific cleaning product differs vastly from someone browsing for shoes to match an outfit. It’s also important to note that no website is able to do everything perfectly (even eCommerce giants like Amazon have received a lot of critique), so it is important to understand your target customers. 

To achieve an eCommerce website optimized for your customers, it requires a dedicated team of professionals to learn about customers’ needs through research, adapt website designs to fit those needs, and continue to follow customer and industry changes. UX work is not a one-time task but a dynamic process that evolves with your business. All eCommerce websites are different and approaches need to be personalized for each site and its customers. To learn more about our team and unique UX processes, click here. To see if your eCommerce site could use some outside feedback, sign up for a free audit here!

FREE AUDIT