Levi Strauss & Co.
UX Case Study
Course User Experience Design I, UC San Diego Extension
Made with Axure, Adobe InDesign, Illustrator, Photoshop
The Brand
Clothing brands evolve or whither and die. Levi Strauss & Co. is an iconic brand best known for their blue jeans. They got their start in San Francisco, CA in 1853, and have thus far stood the test of time.
For the second time in their history, the Haas family (descendants of the founder’s family), went public with stock offerings in 2019. This dramatically changes the scale and direction of the company. According to an article by CNBC, the decision to go public was to boost the financial investment in a company who’s industry is currently experiencing a slow growth rate.
Process
The way this case study unfolded was like this – a small group of participants with knowledge and interest in investing were observed while attempting to navigate levistrauss.com. This is Levi’s gateway to their investor information, details about their brand, their business model, and their values. From this, several user experience issues became readily apparent. Those issues were broken down, analyzed, and potential solutions were developed
The first problem: What the format?
At first glance, the menu structure seems clean and succinct. However, note the major difference between the menu bar as formatted on the desktop version with the Investors link clearly visible, versus the mobile menu on the right. In fact, the only way to link to information for investors on the mobile app is through a link in the third slide of a slideshow at the bottom of the home page.
Why this is a problem
When asked to use their preferred device, all of the users tested chose either a tablet or mobile phone. Having content formatted for multi-platform use isn’t an option anymore. It’s essential. It’s widely known that our society suffers from a short attention span. In an era when users often spend less than 10 seconds on a website before clicking out of it, the pertinent information needs to be as readily available as possible. In fact, levistrauss.com has a high bounce rate.
How we fix it
When asked to use their preferred device, all of the users tested chose either a tablet or mobile phone. Having content formatted for multi-platform use isn’t an option anymore. It’s essential. It’s widely known that our society suffers from a short attention span. In an era when users often spend less than 10 seconds on a website before clicking out of it, the pertinent information needs to be as readily available as possible. In fact, levistrauss.com has a high bounce rate.
Why this solves it
Time is of the essence. A menu located in the top corner of the screen is something users expect. Analytics show nearly all of the traffic to this site is either direct or by search, which means the users aren’t showing up here by accident. This means an intuitively placed link to the information they are searching for should be placed in an immediately accessible location once landing on the site.
The second problem: Hierarchy
A landing or home page is the window into a website. It’s a first impression. It sets the stage for what comes next. Visual hierarchy matters. If it’s assumed that the content blocks are categorized in order of descending importance, it would appear that the investor content is of little importance. This is similar to the previous problem, though it merits it’s own analysis and solution.
Why this is a problem
Of the users observed, all of them initiated their exploration of the site by scrolling down. Several made entire trips up and down the length of the page without ever finding the investor info. Half of them eventually left the page out of stated frustration and performed a Google search to get to the specific information they were seeking.
How we fix it
A reorganization of the content blocks is necessary. It would look something like the image below, with a clear organization of prioritized clickable content blocks, leading the user directly to the information they seek.
Why this solves it
There is a common theme in this: time and attention. Prioritizing information and access to it by how long a user has to search for it can make a massive difference in the bounce rate of the site. This revised hierarchy puts the vision, brand and values as top priority, as this is the information most relevant to the users. Directly below it are the two links for the two user groups: investors and job seekers. The third priority, news and everything else, leads directly to the next problem.
The third problem: Look over there!
One of the users observed put it perfectly:
“There’s so much stuff and it’s not saying anything.”
Initially it would seem Levi Strauss has very clean layout. The on-trend cover image is minimal, impactful, and concise. But don’t be fooled. Users experienced considerable difficulty navigating the site and sorting out the wheat from the chaff. The example below shows the task structure of a user searching for sustainability information on the mobile app.
While information is good, there is such a thing as over-communicating. Much of the links route to lengthy copy in small font sizes broken up by large images and info graphics that don’t contribute much.
Why this is a problem
The number one thing observed users asked for was brevity. This site has a number of different types of content blocks – slide shows, embedded PowerPoint presentations, pdf links, dynamic images, and so on. And as demonstrated above, they all look different. Users found this distracting and often would spend time on a feature (like a slide show) only to realize it didn’t contain the content they were looking for. Ultimately, this can lead to search fatigue and once again, users bounce.
How we fix it
What is needed here, is a bit of editing. It can be hard to pare down 167 years of brand information, but it is completely possible. Besides the breadth of information, by simply narrowing the task structure to focus on the most intuitive way the known users will search, a lot can be accomplished. Incorporating both the revised menu and landing page hierarchy, the slimmed task structure could look something like this:
Why this solves it
By narrowing the ability link to new pages, the amount of accessible information actually increased. Whereas before, there was an excess of information, it was separated into distinct pages, intertwined with a number of other links to sometimes unnecessary information. Here the information is condensed and clearly labeled for the user. Even the simple addition of a keyword search feature to the menu bar can save users valuable time.
In conclusion
Most of problems with Levi Strauss & Co.’s website are navigational, but not incurable. It suffers from an excess of information that isn’t organized with the user in mind. By re-focusing on the potential investor as the main user, and paring down and cleaning up the menu, home page, and task structure, a lot of the user confusion can be alleviated.
Also important is the investment in preparing content for mobile platforms. The compatibility issues were numerous, with many links not working at all. Success in the future greatly depends on this.
More information on what kind of user Levi Strauss hopes to capture with this site would help narrow the focus further. A working prototype of the suggested changes and broader scope user testing would also inform further development.
All photos and screen capture imagery copyright of Levi Strauss & Co.