FAQ: UX & Design

Question 1

What is information architecture?

Accepted Answer

Information architecture (IA) is about creating and presenting information (textual and graphical) in a way that is readable and intuitive for the audience. Organizing content means grouping it into the right categories and naming them properly, giving them hierarchy, building clear navigation, and placing the right content groups in spots intuitively associated with them. Thanks to a properly designed information architecture, when a customer enters our store, they know how to reach the desired product category, how to filter results e.g. by size, and how to proceed to checkout (looking for the cart icon in the upper right corner). IA also affects SEO: properly planned content makes it easier for indexing bots to rank our store in search engines — e.g. using readable URLs and breadcrumb navigation, which shows users their current location on the site and lets them quickly return to the previous level in the structure.

Question 2

What is a UX audit?

Accepted Answer

A UX audit is a process during which an expert checks whether a service is well-designed for usability: that is, whether users complete their intended goals while using the service. For an online store this means that users for example:
 can find the product they're looking for,
 can comfortably review it, even on a small screen,
 find all needed information not only about products, but also about shipping or returns in a comfortable, effective, and satisfying way.
Through a UX audit, you can verify whether problems or inconveniences appear during use that may confuse users and potentially make them abandon the site. Identifying and fixing weak spots in the shopping experience is one of the ways to lift the conversion rate of the store.
An audit is performed using various methods (e.g. cognitive walkthrough or heuristic analysis) and based on data from tools such as Google Analytics or Hotjar. The analysis and audit usually identify usability issues and test hypotheses split into 3 categories — critical, important, and less important. The report should therefore order priorities and contain specific recommendations that make implementation of fixes easier.

Question 3

What is a packshot?

Accepted Answer

A packshot is a representation of a product as a static or moving (rotating) image. Preparing a packshot requires shooting photos or sequences of photos that show the product precisely from various angles. White backgrounds, a table or shadowless tent, and professional lighting are used for this kind of photography. After post-production, these photos are assembled into a presentation that the customer can manipulate on the screen of their device to inspect the product closely.

Question 4

What is UI?

Accepted Answer

UI is short for User Interface. These are all the elements related to the visual layer through which a site or app exposes its functionalities to the user. When talking about UI design (or the interchangeably used GUI — Graphical User Interface) we mean the process of creating, arranging, and styling (picking the right palette and typography) individual subpages and on-page elements such as menus, the product card, the checkout form, or icons tied to adding a product to the cart. A properly designed UI is responsible for understanding how the various parts of the site work — a well-designed interface is intuitive and readable for the user.
The UI/GUI layer should also be aligned with the brand's visual identity and marketing communication, so that the store is a visually coherent component alongside other channels of customer contact. It's worth bearing in mind, however, that UI design should be grounded in good practice and technical requirements, since at times the designers' creative vision can significantly degrade the UX of the service.

Question 5

What is UX?

Accepted Answer

UX is a term that covers all aspects related to user experience. It is the full set of impressions a user has of a website, e-store, mobile app, or any other product. The work of UX designers and researchers focuses on building positive experiences — the platform should be attractive, functional, and useful, and using it should give the user pleasure and satisfaction; they should be able to reach their own goals through it.For instance, in e-commerce a well-designed UX shows up in comfortable browsing of product content (the user can find product attributes they care about, filter categories) and an intuitive order form: the user is told which step of the process they are in, can comfortably pick from the options offered, and gets full information and help from the system in case of errors.

Question 6

Who should design the GUI of an online store or app?

Accepted Answer

GUI (Graphical User Interface), often used interchangeably with UI, is — simply put — the graphical layer of our online store, application, or service. It's especially critical in industries like beauty or fashion, where not only usability and functionality matter, but also the visual side and conveying the brand's character.

When building an e-store, GUI design can run in different models:

1. The client has designers / graphic artists in-house and designs the visual layer themselves, while a software house handles the rest of the implementation (including UX),
2. The software house owns the entire store creation, including the GUI stage,
3. GUI and implementation are handled by two external companies — for example when the client wants to entrust the visual side to their creative agency, which owns brand communication.

Each option has pros and cons; to make the right choice it's worth answering a few key questions:

1. Are we comfortable with the designer / design team's style? Do they have experience designing for our industry?
2. Do they specialize in interfaces for online stores or apps?
3. Do they know at least the basics of UX, front-end development, and SEO?
4. Do they understand the specifics of designing for a given e-commerce platform or operating system (e.g. a Magento store or apps for iOS and Android)?

From experience we know that the GUI stage can cause many problems, including significant delays to the whole schedule or higher development cost. Most often this stems from focusing on the answer to the first question only, when in fact the next three are critical. If the designer doesn't know the technical aspects of design, the final design often turns out to need many modifications to be implementable, or significantly raises the cost of building the store.

It's of course easiest to manage a project where one party owns the entire process, including the GUI stage. If, however, we deliberately decide to split these competencies among different parties, good cooperation and ongoing communication between them is critical, so that visual designs are continuously consulted with the UX designer or front-end developer.

Question 7

What is the difference between Lo-Fi and High-Fi mockups?

Accepted Answer

Mockups are a graphical representation of how an application will look. The "-fi" ending is short for fidelity. Building Lo-Fi mockups is the first step of the UX design stage — the first arrangement of elements and functionality can be done on a blank piece of paper or with tools such as Axure, Balsamiq, or Adobe XD. With these first sketches we can discuss the basic business requirements that should be agreed with everyone involved in the project. Thanks to Lo-Fi mockups we can quickly check whether users understand how the product works, whether it is intuitive for them, and whether it meets their needs. At this stage it's also worth consulting the developers who will later implement it: this saves time and money — for example by dropping a particular store element that would be time-consuming or impossible to deliver in a given technology. With ready Lo-Fi mockups it's much easier to estimate the implementation cost. 
High-Fi mockups already reflect a more detailed look of the site or app — colors, graphics, content, and interactions are added (e.g. how individual screens should slide in an app). Through high-detail mockups we can see whether the overall vision matches the needs and assumptions of the entire e-commerce team — even before the final product or service is built.
Most often Hi-Fi mockups are not yet the final GUI (or UI) of the service — i.e. the target visual layer. Although they are often very close to it, the final polish, including the designer's vision, is added only at the GUI design stage.

Question 8

How can product design help build an online store?

Accepted Answer

Product design is a very broad and rapidly evolving concept and can apply to many industries. In the e-commerce and technology area it helps, for example, to translate a general idea for an online store or app into a concrete and very detailed plan to build them. During the design process, with tools like Product Canvas or user stories, you'll be able to combine the vision and knowledge of business, marketing, IT, and UX into a concrete digital product. A holistic approach that takes all interested parties into account helps meet the most important expectations of both the company's main stakeholders and target users.

Thanks to such an approach we can significantly ease and accelerate the creation of:
a detailed functional spec of the service or app,
the IT architecture,
the implementation schedule and cost.

Additional benefits of working this way include:
a coherent vision and a sense of shared goal in the team,
(if a software house or other external partner participates) mutual understanding between the two teams and how they work,
(as above) a fresh outside-specialist look at your project and the needs of your business.

And most importantly, by starting the build with the product design stage, you'll be able to:
minimize the risk of unforeseen costs and schedule slip,
move quickly and effectively into next phases of the project, e.g. UX design.

If you want to learn how product design helps avoid unexpected costs and delays when designing an online store or app, read our article.

Question 9

What to watch for when designing a mobile version of a store?

Accepted Answer

When designing the mobile version of an online store remember the much smaller display area — every pixel should be well-used and fonts must be readable. Clickable elements (e.g. the filter or add-to-cart icon) should be sized so that the user can hit them easily with a thumb without tapping neighboring buttons. The most important navigation element, the menu, should always be available to the user — e.g. as a top bar — so that even when browsing a long product list the user can move to another part of the store. To round out the comfortable user experience use gestures that smartphone users apply automatically: allow zooming photos and swiping. Expand tabs or categories smoothly — try not to reload pages without need or open new windows — switching between several browser tabs on a smartphone is especially uncomfortable.

Question 10

What to keep in mind when designing the UX of an online store?

Accepted Answer

The UX design process can be split into a few main stages: defining the business need, user-needs analysis and competitive research, design (UX, UI), implementation, testing, and optimization. To design the most usable online store possible, remember a number of issues, such as: 
 what information will the user be looking for, 
 by what attributes and traits will they want to filter products, 
 should the order process accommodate atypical assumptions (e.g. providing specific data or information for the shipment),
 will every message and icon be intuitive and easy for the user to understand,
 will the service be comfortable to browse on mobile devices.

Depending on the chosen technology, remember the platform's possibilities and limitations — depending on whether it's SaaS, an open-source platform, or a dedicated store, you have to be ready for different levels of flexibility relative to your needs. Changes such as deeper personalization of the order process (e.g. adding an extra step where users can pick a freebie for their order) may require additional developer work and therefore raise the project budget.

Ecommerce, Magento 2 and AI concepts explained