All Posts By

Marc Hausle

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.


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.


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.


  • 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.

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!


Best Practices: Mobile Apps for Seniors

By MobileNo Comments


Technology is more prominent in our lives today than it has ever been. We might not all have flying cars and jetpacks, but advances in mobile technology have made smartphones so accessible that over 36% of the world is connected through one. As with most technologies, older generations are typically the last to adopt, and this is also true regarding mobile devices.

One of the factors impacting the use of mobile technologies is that other advances are allowing people to live longer. Currently, 5% of the US population is over 65. By 2050 this number is expected to jump to 22%. Current seniors were 45 to 55 when smartphones first came out, so they have had some time to adapt to the technology. The proof of this is that in the past 5 years the number of seniors that own smartphones has doubled and is now at 42%.

Now, as more seniors adopt mobile technology and as the number of seniors continues to grow, the mobile industry has to adapt to fill the needs of those users. In order to fill their needs, it is imperative to focus on their user experience. However, before we can do that, we need to understand the older generation’s motivations, aspirations, and collective personality. What are their frustrations and what are their goals?  For most people in the tech industry, these are our parents and our grandparents. Consider your parents and grandparents. I am certain that at some point in time you have had to help them with some kind of technology issue. Why did they need or want your help? Could they have figured it out on their own?


As you may have discerned, seniors are extremely habit driven. I remember a time when I was still in grade school and a new supermarket opened up down the street from my grandparents’ house. I thought this was great. It was new. It was only 5 minutes away as opposed to 20 minutes away. It was very nice inside and it had everything. I only knew this because my parents took me there.

To my grandparents, the new supermarket might as well have not existed. Both of my grandparents still drove the extra 15 minutes each way to go to their old store. Theoretically, they could have gone to the new store and it would not have taken very long for them to learn the ins and outs of the new store, which would have eventually saved them time and money. They did not care. They had no interest in the new store despite the benefits. It simply did not matter. They wanted to stay with what they knew and what they were comfortable with, regardless of the benefits provided by the new store.

Moving Forward

Why is it that seniors, such as my grandparents, are hesitant to change their patterns and habits even when this change may benefit them? They are not stupid – so why do their priorities align in a way that makes them overlook what seem like obvious benefits. It is a combination of pain points, goals, and established mental models.

Some pain points are obvious and simple to address. As we get older our sight, hearing, touch, and dexterity start to fade. Other pain points require more abstract thinking to address such as memory loss, and lack of energy, and the feelings that come from watching our faculties fade.

The goals of seniors, for the most part, are the same as the goals of a younger audience. They want to be healthy, social, travel, shop, have access to news and finance information, and participate in activities that make them happy. How they go about these is going to be quite different from younger generations. Let’s think back to our earlier story and ask why would the grandparents continue to use the old store despite the benefits offered by the new store?

  1. As senses fade we become uncertain of ourselves and find comfort and security in what we know.
  2. Having to learn new things can be frustrating and can take time.
  3. New experiences mean a lack of control – the person must adapt and learn.
  4. New experiences require being comfortable with unknowns and relying on your senses.

Taking all of this information into account, how do we move forward? What can we do to address the pain points and goals of our audience so that they can have a great experience? The guide below provides some basic rules that any software company can apply to provide a better experience for their senior users.

Best Practices, Rules, and Guidelines


  1. Make everything larger. This includes text (minimum 16 pt font), icons, touchpoints, buttons, and any and all interactive elements. We also need an intuitive way for the user to adjust the size of the text content on their own.
  2. Ensure that all areas have high contrast and that there are no low contrast areas where the user might not be able to identify content.
  3. Be selective with gradients because they can lead to low contrast areas.
  4. Ensure that touch feedback can be seen clearly despite the user’s finger.
  5. Reduce the distance between sequential items such as form fields without making them so close the screen appears cluttered and leads to cognitive overload.


  1. All audio content should have easily accessible volume controls.
  2. Audio content should provide captions.
  3. Interactive audio feedback can be provided as another way of letting the user know that they are progressing. Making positive vs negative sounds can be a clear progress indicator depending on the situation.


  1. Large touch targets are easier for seniors to touch. Even younger audiences get upset when touch targets are too small and they are unable to access the content they want.
  2. Haptic feedback on the downpress also provides an excellent way to let the user know that the software is recognizing their input. The more feedback provided, the better the user knows what is happening as they work their way through the app.


  1. Navigation elements should be easy to find on all pages. The user should never not know where they are within the app.
  2. On mobile, the user should always have access to the main navigation.
  3. The search function should be available on primary navigation pages and should be forgiving of spelling errors and offer suggestions based on the app.
  4. Error Messages instead can be “Helper Messages”. Do not be negative and make sure that wording provides a clear message of what happened and what to do next.
  5. Loading icons should be present for any action that is not immediate. This way the user knows the app is working on that action.
  6. If content does not fit on a single page then the ability to scroll down the page should be made obvious and clear.
  7. Any element represented by an icon should also have tooltips to provide more information to the user in case the icon is not recognized.
  8. A tutorial or help function should be provided and be easily accessible.
  9. Interactive elements should be clearly distinct from non-interactive elements.
  10. Avoid pulldowns and dropdowns as they tend to rely on fine motor skills.


  1. Do not use technical jargon, use clear and simple language.
  2. Do not require downloads. Many seniors feel uncomfortable with downloads.
  3. Important information should be distinct and clear from basic information.
  4. Color use should be conservative and with purpose.
  5. Avoid animations as they can be distracting.
  6. Provide extra spacing between lines of content so it is easy to read.
  7. Do not overlay text on top of imagery.

We can see that many of these rules, guidelines, and suggestions align with good design principles but are slightly exaggerated beyond what would apply to your typical user base. As you move forward with your project, communicate with and observe your users to ensure the software is specific to their needs. And remember that even within the senior user base there will be subgroups and niche groups that have their own needs, desires and goals that need to be catered to in order to provide an optimal user experience.

By: Marc Hausle

Marc Hausle is a UX Designer and Consultant who has made an impact on 100’s of apps in the Google Play Store. Marc approaches projects with a combination of logic and high-energy creativity that generates engaging and effortless experiences for users.