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
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 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.
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)
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.
I was new to the e-commerce industry. Hence, I took the time to study the subject features:
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.
Finally, I combined my UX suggestions in a single layout to polish and visualise suggested optimizations.
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.
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
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).
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.
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.
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.
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.
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.
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
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.
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.
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.”
UX Design Lead, Astound Commerce