UX Case Study

GERMAN

CRYSTAL

The project was part of my full time hire at AHG Industry, a German international company with offices, all around the world. Working there I was in charge of redesigning their main website, as well as offer consultancy on other websites that they were planning on releasing. The project involved redesigning their main website with User Experience , Usability & Conversions in mind.

Client: AHG Industry
Industry: Crystal based Glassware
Workload: 6 Months
Software: Photoshop, Illustrator

Project Assessment and

PREPARATIONS

Part of the redesign process involved getting familiar with what the current state of the product is, thus discussing with the project leads, looking over documentations & files.

The Assessment

The first step was to asses the existing website and a proposal made by another company, which turned out that it specialized in print design, rather then web, thus resulting in a website that wasn’t with any UX, Marketing or Usability, knowledge. This lead to the creation of a 30 pages long document describing the changes, in detail,  to the project manager as well as some quick fixes.

The Requirements

The company wanted to keep an horizontal shopping experience and split the website in two areas, a area for their classic collection and a second one for their modern collection. The website besides the regular eCommerce pages would also include a product customization option where people could customize their products with engravings and other things.
The initial

REDESIGN

Below you can see some of the initial designs that I’ve created for the project, as part of the website redesign.

UX & UI RESEARCH

Building upon the already discovered info , mentioned above, it was time to dive deep into the research by running a pre-launch campaign with the focus on identyfing & refining the targeted audience, and how they interact with social media & other aspects.

Custom In-House Platform

Since there was already a custom e-commerce platform developed on top of  Symfony, selecting another platform wasn’t an option due to it being already in development for a while and thus it would just end up wasting company resources and time, so I made it work.

Some Requirements & Limitations

Since the developers already started implementing the old design, I had to work extra fast to provide them with the redesign as well as the developer notes. Since it was a non Agile based development, they required all the files to be done as fast as possible, this was a serious restriction on what could be done, design wise. Them being based in a different country, made it a little harder to consult on the project,  due to language barriers as well as e-mail response time.

The Targeted Group

Part of designing the User Experience (UX) involves knowing your target audience, with the help of the marketing team we managed to identify them. This helped better understand what they would be interested to see on the page, how they would navigate based on their experience with the web and much more.

User Experience (UX) Goals

After multiple discussions with the project lead. the main goals of the UX design were established. These are:
1. Improve the overall user experience by reducing and rethinking unnecessary features, making it more intuitive and easy for users to navigate and customize products.
2. Redesign with conversions in mind by using clear call to actions, A/B testing, increase trust & urgency.
3. Provide a face lift to the existing design in order to improve the overall user appeal while also retaining compatibility with the existing web platform.
4. Complete user dashboard redesign with gamification principles in mind as a way to give users an incentive for buying the products.

UX Challenges

The projects challenge consisted in designing a user experience and UI that would solve the following key aspects.
1. Help improve the overall brand image by redesigning multiple brand identity elements.
2. Provide UX/UI & Conversions support to other brands that the company held in other market niches.
3. Provide Branding & UX/UI support for upcoming product launches in related niches.
4. Make users come back by encouraging social media interactions and newsletter signups.

The General Shopping User Flow

The general website flow involved creating the overall shopping experience, seeing how users would interact with the website and what their journey would be. This helped establish the core jouney the user would go through, on top of which other functions would be added such as product customization, product & order sharing, gamification ,etc.

Returning User Journey

The most often action performed by users once their order has been placed, is to come to the website and check the order status so they would know it’s been shipped,delayed,processed. Thus I had to create a flow that would not annoy users, once they login, by simply redirecting them to the user dashboard immediately, but instead redirected them to the page they were at, this ensures people who just want to add a product to their favorite or start shopping aren’t redirected immediately to the dashboard, thus making them hit the back button to go to the previous page , waiting again for the website to load or face other issues like clicking multiple times on the back button and arriving at a offsite page they previously visited.

Meet John

Age: 30
Profession: Banker
Children: no
Likes: Collecting
Stable Income: yes
John has a healthy income and usually spends his weekends with his friends in high end locations. He recognizes high quality products and likes flashy things, that will showcase his status. He will use the website as a way to buy modern glassware for his minimalist house, to better fit with the whole theme, further showcasing his status when he has someone over or having a party.

Meet Scarlet

Age: 50
Profession: Beauty Salon Owner
Children: yes
Likes: Fine Dining
Stable Income: yes
Business woman at it’s core, she hosts regular meetups with her friends at her house as a way to network and get together. She likes to impress people and enjoys luxurious stuff for her house, having a unique product from the classic collection to gift her friends will further showcase her love for luxurious products, making her friends join the trend.

Overall Website Map

Overall Diagram showcasing the website flow that users embark on as soon as they arrive on the website. It’s purpose was to visualize the entire shopping process and how each area would interact with each other, helping craft a clutter free & efficient user experience while also helping the developer team, understand how everything should work.

UX & UI DESIGN

After the research and general flows were done, it was time to tackle the UI and wire-framing. Having a clear idea of what the target audience is, what they are looking for and how to ensure an optimal shopping experince, I started wire framing the overall design and creating the visual design.

// Home Page

  1. Main Website Areas
    I deciced to remove the menu and replace it with multiple images directly in the center that would redirect to key areas, ensuring users won’t get confused by all the different designs of the areas.

  2. Special Offers
    It was important to have a easy way to see promotions and drive sales, I wanted to let users have access to it from all the pages, thus they will always be able to see it.

  3. Newsletter
    The placement and decission came as a need to boost newsletter signups, knowing that once a user signs up you would always be in contact with them and make them come back. This way users would see it in a key area on every page, instead of it being hidden.

// Product Category Page

  1. High Quality Images & Best Bought Products
    High quality product images, are a must, this helps users see the product in details without having to go back & forth between pages just so they could see some details, thus spending time shopping not waiting for the page to load. Featuring a Best Buy tag helps users see that the site is active and has a healthy user base, especially if coupled with the sense of urgency, such as "Only 10 left in stock". Also a Popular or Best Buy tag or even a category, helps people make a decision when they are shopping for an item that they will be gifting to someone special by leveraging the existing user base taste.

  2. Intuitive Navigation
    Having navigation placed to the sides, ensured users won't need to search for some small arrows or page numbers, making it intuitive and easy to use, and creating a much better shopping experience.

  3. Clear Call to Actions
    It was important for users to be able to swap between collections easily, by using some clear call to actions in the bottom of the page, users would be reminded constantly of this aspect and encourage exploration of the other areas of the site. The decision to place is at the bottom came as result of knowing users go from top to bottom when viewing a page, allowing them to see the brand logo, browse the products and then move to another area of the site.

// Initial Homepage Proposal with a Heat Map

  1. Clear Call to Action
    The design focused on creating a homepage that would remove the need for a user to make a decision regarding what collection they would like, thus presenting him with an initial one, with the option to switch to the other collection presented on the browse page. This ensures the CTA would be visible and have a high click through rate.

  2. Offers & Sense of Urgency
    Making offers visible on the homepage, with a Limited time tag, encourages users who arrive on the website to buy a product on their visit, thus increasing the marketing effort.

  3. Best Sellers
    By displaying the most popular products on the homepage, users are more likely to buy that certain item, due to it being liked and thus purchases by many users,increasing the chance that the user would also like it, thus driving even more sales.

FINAL UX & VISUAL DESIGN

The overall look at the visual design and the on-page SEO process.

// Home Page

  1. Creating a New Menu
    The initial concept, had navigation elements all over the place, as a way to improve the usability all navigation elements have been grouped into a single menu, this helps improve the UX as well as remove the need to search for navigation elements all over the page.

  2. Hyperlinks Underlines
    As a way to improve usability and make it more intuitive for users, each link contains an underline making it more easy for users to understand that they can click on it.

  3. Clutter-less top navigation
    As a way to improve the overall experience, I’ve re-designed the top bar that was occupying almost 33% of the screen. This way users can enjoy seeing the content better and not see non-essential elements.

  1. Increasing Sales & Click Through
    By providing a Best Buy options users could discover what are the best products that the website offers. Making it in a different color and adding some decorations, helps increase the click through rate & curiosity of the users.

  2. The My Account Button.
    As a way to easily spot where users can login or register, the My Account had to be a different color, this way it removes the need for users to actually search for it, making it more faster and intuitive for users to login and register.

  3. Improving the Collection selection
    In order to make it more intuitive for users to understand that they can choose one of the four options, arrows were used as a basic CTA as well as scaling down the size of the two less critical areas. Also on mouse over the opposite part of the design would get darker, thus making it clear that users could interact with those areas.

// Product Catalog

  1. Switch between collection
    In order to keep the overall navigation experience from the homepage, the switch to the other collection has been placed in a intuitive area, reducing again the need to search for it.

  2. Sorting
    As a way to help users easily find what they are looking for, it was esential to provide a way for users to sort by price, name or color.

  3. Quick Add to Cart
    Making it more easily and fast for users to shop, was critical, by providing a quick add to cart button reduces the need for users to go back & forth between pages , to simply add something to cart. This wasy the shopping experience is streamlined, making it faster & better for users who know exactly what they want.

  1. Popular Products
    Providing a way for users to see which are the most popular products, helped boost brand trust by displaying the fact that the website has orders as well as drive user curiosity & increase sales of that product.

  2. Quick Ratings Preview
    Letting users see how many users left a vote or review, helps them make a better decission regarding what products should they buy, especially if two products are somehow similar.

  3. Better Navigation
    The original design provided a product navigation that was placed at the bottom, making it unituitive and hard for users to see it. By placing it next to the products, users easily identify it, without having to search for the navigation, once again making it more streamlined and faster.

// Product View

  1. Switch between collection
    Similar to the other pages, the collections switch are placed next to the logo, however this time users can switch between the two collections since there was no need for further categories on this page.

  2. Categories
    Keeping the categories present on this page, ensures users could go to the previous page or jump straight to another category thus offering a seamless shopping experience without the need to hit the back button while also potentially reducing the need to go back & forth betwen pages.

  3. Quick Preview
    Having this feature allows users to quickly find out more about the product, as well as generate additional sales all without the need to leave the existing page. This ensures users are encouraged to discover other products as well as visit other pages instead of going back to another page.

  1. More Product Images
    Offering multiple product images helps users better see the product and decide, thus contributing to sale boosts.

  2. Product Ratings & Votes
    Having a product rating that displays votes, ensures the website is healthy and visited thus increasing brand trust.

  3. Confirmation
    Having a confirmation displayed directly on the page, ensures users that their action has been registered which on slow internet or mobile connections helps users understand that they can now browse other products, without having to check the cart to ensure it’s been added, this way the need to visit other pages is removed.

// Product Customization

  1. Clear Call to Action
    Having a clear CTA helps users know exactly where they need to click in order to progress, eliminating confusion or the need to spend time searching where to click.

  2. Save Customization
    By allowing users to save their customization, they can customize their order, showcase it to another person on a different computer or apply it to other products, this way users would likely use this feature more often thus resulting in additional revenues from the customization service.

  3. Gamification Elements
    Part of the strategy to build a loyal user group, the use of a points system makes users come back and shop again, rather then going to a competitor or even invite others friends to shop as points are transferable.

  1. Cross-selling & Product Info
    By providing a list of similar products, it encourages users to test the customization on multiple products that can result in multiple sales. Having a clear title and description, ensures that the user won’t get confused while having all the critical information there, thus not having to leave the page to view the product information or other similar products.

  2. Sharing
    By having a share function, users can seek help with their customization by sharing the link on social media, spreading the excitement.

  3. Blending Non-Essential Elements
    Getting distractions out of the way ensures users don’t get confused or navigate to other websites, thus loosing the lead. By using a more neutral color palette it ensures that brand trust is kept, by having all the critical info still visible, but doesn’t encourage users to go off the beaten path by exploring their social profiles thus ensuring a maximum conversion rate is kept

Thanks for browsing,

VIEW OTHER PROJECTS

or share this project with your friends, it helps