UX Audit, Proto-Personas, Interactive Prototyping — 2018

Product Listing Page Prototyping

The purpose of this project was to conduct a user experience assessment of existing product listing pages for Hugo Boss.

I needed to come up with interactive prototypes for desktop and mobile breakpoints.

Product listing pages are key hub pages in any e-commerce store. They allow users to visually forage a group of products, as well as review additional product details to help them further differentiate products without clicking into the product page for full details.

See interactive prototypes

01 / The introduction

It was an internal project for my employing company. It didn't target for a real client. And it took me about 40 hours during 2-3 week on a part time basis.

The Brief

The brief of this project was to have the necessary information to generate a proposal on how to increase conversion of existing apparel store: defining which areas and features are causing headaches for users and providing suggestions to fix detected issues.

  • Industry / Webstore: E-Commerce / Hugo Boss.
  • Scope: Product Listing Pages (PLP).
  • Services: UX Assessment and Prototyping.
  • Deliverables: UX Audit Report and Interactive Prototypes.
  • Target Screens: Desktop and Mobile.

Why Is Product Lists Usability So Important?

Their main goal is to funnel visitors to the right product page and thereby it should include the essential information to help visitors find the right product for their needs. Any element that distracts the visitor from that goal should be removed.

If users can't easily browse through product lists, they can't simply find what they are searching for – and if they can't find it they can't buy it.

“During the study, sites with mediocre product list usability saw abandonment rates of 67-90%, whereas sites with just a slightly optimized toolset saw only 17-33% abandonment for users trying to find the exact same types of product. This translates into as much as a 4-fold increase in leads.” (from: Baymard Product Lists Report)

What Is UX Prototyping and Why Is It Important?

User eXperience prototyping gives everyone in a team a single idea to work from and is a far more effective way to communicate a designer’s intent than a group of static wireframes or UI mockups. Interactive prototypes aim to show an entire team exactly how the system should react on a user's actions, rather than leaving this open to interpretation by the rest of the team.

02 / The approach

1. Research and Discovery

I was new to the e-commerce industry. Hence, I took the time to study the subject features:

  • I investigated a user needs and mapping of key e-commerce components to conversion funnel.
  • I explored competitors taking notes about good solutions and inspirational layouts.
  • I studied applicable researches and best practices.

2. User Experience Audit

Solo heuristic evaluation was my point-of-departure and source of valuable information for the next steps.

To present the audit report to external stakeholders, I sent some time to develop an UX Audit Template that helped me to communicate the findings in a more clear and comprehensive manner.

3. Interactive Prototyping

Finally, I combined my UX suggestions in a single layout to polish and visualise suggested optimizations.

03 / The process

1. Research and Discovery

Brand overview

I began the case study phase from the investigation of public information: the brand history, product lines segments, target markets, and strategic goals.

Through a quick review of published information, I got an initial understanding of the brand, market segments, and target audience.

Figure 3-1: The brand overview summary.
Figure 3-2: Target audience overview. Hugo Boss offers its products in luxury (1) and premium (2) segments.

User Personas

As it often happens with short-term projects, I was very limited in time and resources. I had no possibility to collect and appropriately analyze first-hand data about the website users. I, therefore, created ‘provisional personas’ based on target audience understanding and common shopper types defined by the NNGroup researches

Figure 3-3: I created provisional personas for the defined segments (1-4).

Competitive Research and Analysis

I used information collected during the brand overview, to define its close competitors. I ranged the rivals based on the available website performance metrics (Traffic, Bounce Rate, Avr. Visit Duration, Page Views per Visit).

Figure 3-4: Hugo Boss close competitors (1) and target market trends overview (2)

Layout Overview and Decomposition

Finally, I needed to clarify the audit scope and to figure out the layout levels and product specific features.

To improve my knowledge about Product Listing Pages and to be aware of the subject-specific UX problems, I studied database of best practices from recognized user researchers (Salesforce Commerce Cloud, Baymard Institute, Nielsen Norman Group)

Then I conducted layout investigation, its decomposition and mapping to typical Work Breakdown Structure (WBS) codes.

Figure 3-6: Existed layout study (1) and decomposition (2)

2. User Experience Audit

What Is It

User experience audit (UX Audit) is a diagnostic tool to pinpoint less-than-great areas of a site, revealing which areas and features cause headaches for customers and reduce conversion.

The result of the analysis is the basement for making decisions and recommendation on how to enhance the site that accomplishes both user and business objectives.

Formalised studying of web interfaces allows us to find opportunities for improvements: identify existing and potential issues, find bottlenecks that prevent customers from successful goals achievement.

Hence, UX Designers consider a UX Audit as a point-of-departure and source of valuable information for the next steps of the process: prototyping, development, testing.

What Did I Do

To evaluate the audit subject from different perspectives, I used the provisional personas. I tried to test each journey that I think real users may take while trying to accomplish their specific tasks.

As evaluation criteria, I used Information Architecture Heuristics Checklist designed by Abby Covert. To be more specific I combined them with applicable design guidelines from recognized user researchers: Baymard Product Lists and Filtering Report, NNGroup Report.

I took some time to design the audit report template. That helped me to communicate the findings in a robust and comprehensive manner.

Figure 3-7: UX Audit Report: structure of evaluation and recommendations

I created the UX Audit Report that includes lots of UX recommendations on how to improve user experience through existing layouts optimizations. To reach a common understanding with stakeholders in next stages, I evaluated UX issues’ severity and grouped all findings by priority.

Figure 3-8: UX Audit Report: finding examples.

I listed in the report Issues and UX Recommendations, and also I highlighted positive things that I considered during the audit. I included illustrations, where possible and reasonable. For consistency, I was trying to use references on rivals websites selected during the case study stage.

3. Interactive Prototyping

To validate, polish and visualize suggested UX improvements I created Interactive Prototypes, based on the existing layout. In order to provide a responsive solution, the prototypes were created for desktop and mobile breakpoints.

For creating, reviewing, and refining the interactive prototypes I used ProtoShare tool. I chosen that tool for the project because it used to be a main prototyping tool in my employing company.

Figure 3-9: Prototyping process

Prototyping Fidelity and Target Screens

A prototype fidelity level depends on what we are trying to find out. There is no right or wrong answer to the level of detail you need to add to your prototype. A quick paper sketch can be far more effective than a highly polished mockup in the right circumstance.

For this project, I decided to create a medium-fidelity interactive prototype because it provides enough details to communicate a design solution to internal stakeholders and also it can be presented to customers for review and approval.

In order to provide the responsive solution the interactive prototypes were created for desktop and mobile breakpoints

See interactive prototypes



Figure 3-10: Final prototypes for desktop (1) and mobile (2) breakpoints


Lessons Learned and Takeaway

1. Provisional Personas Are Better Than Nothing

It was a tradeoff between UX research best practices (that I know, support and would like to meet) and project restrictions limitation (that so often happens on short-term projects). I recognize that an artificial persona mainly based on assumptions isn’t ideal. Even though provisional personas can be a helpful tool, they still have their share of potential issues. They are not completely reliable, don’t have opinions and can’t talk back, answer questions, or give feedback

Related: Due to detected gaps in our web analysis process and lack of useful historical data, it was impossible to measure the real impact of implemented changes. (For example, was a blog traffic spike because of extra promotion or design improvements? Or, whether conversions increased due to performance speedup or because of other reasons).

Despite initial skepticism, I found that provisional personas are useful. They helped me to summarize the case study findings: info about Hugo Boss user that I figured out from the public sources and results of e-commerce shoppers analysis conducted by NNGroup.

During the user experience assessment, they allowed me to feel empathy and focus users primary needs.

2. Solo Heuristic Evaluation Is A Feasible Solution For Some Projects

Heuristic evaluation is a way to check the site against a predetermined set of usability guidelines thereby affording users a better experience. It should typically be conducted by at least three usability experts. (The benefit of having multiple reviewers is that despite they will likely catch a lot of the same mistakes, each of them will probably find something the others have missed.)

If 3 usability experts can't be allocated to the project (freelance, nonprofit or small start-up) , the Heuristic Markup methodology can be handy. I learned about this approach in Leah Buley's book 'The User Experience Team of One' and I tested how it works during the project. I am satisfied with the results.

3. UX Audit Report Should Be Understandable Without An Oral Explanation

Before this project, I didn't draw so much attention to an audit report layout. About 5 years I was working directly with the product owners, designers, and developers on the same project. Hence, all stakeholders had a deep understanding of the project. When it was necessary, we could discuss and clarify audit findings and suggestions.

Therefore, initially I created the audit report in Google Docs. It became a very long document. Based on my mentor suggestions, it was restructured and reworked in presentation form. I think that the updated version represents findings in a clear, comprehensible manner. So, results can be shared with internal and external stakeholders without additional explanations.

I started use the developed template for client projects and received positive feedback from reviewers. It also was shared within the team as a good practice.

“Svitlana has worked in Astound Commerce as a UX designer for several projects launches. She was responsible for resolving usability problems detected by UX audit... During the review sessions with a client, she was able to provide a strong rationale for suggested design solutions. At the same time, she was open to feedback and effectively handled changes requests. It is a pleasure to work with people like Svitlana because they are so self-motivated, focused and ever willing to learn.”

Oleh Syvukha
UX Design Lead, Astound Commerce

See more feedback at LinkedIn