UX UI DESIGN PROJECT

GERMAN CRYSTAL

CUSTOM E-COMMERCE

Find out more about this project

ABOUT:

Custom e-commerce project dealing with luxury glassware products, this being just one of their consumer products that I’ve worked on during my time at AHG Industry, a multinational German company.

REFERENCE: Alexandra Tintoi

ROLE: UX UI Designer / Web Designer / Graphic Designer

TECHNOLOGY: custom in-house platform based on Symphony

TOOLS: Photoshop, Illustrator, Rotring 600 Pen, Dotgrid.co Paper, Koh-I-Noor colored pencils

PROJECT INFORMATION

GOAL:

The goal was to improve the existing website design by tackling UX UI issues, integrating new features and increasing conversion rates

MAIN PROBLEM:

the existing design was made by a company with print experience, this lead to having multiple UX issues such as usability issues, flow problems and visual issues so people with visual disabilities would have a real hard time. The colors were really harsh making it really tiresome and distracting, text was too small, way to complicated flows, too many clicks to perform certain actions, unable to identify which is a link and which is text.

WHAT I DID:

collaborated with the marketing team, development team and stakeholders, wrote developer notes, provided feedback and helped with other company brands, solved usability issues, proposed two new designs, heat map and eye tracking, analyzed and improved the existing shopping flow, integrated new features into the flow, wire-framing, visual design, solved multiple UX issues, tackled other e-commerce projects from other brands held by the company

MY UX APPROACH:

I STARTED BY DOING A HEURISTIC ANALYSIS

I started by doing an analysis of the existing design what I found: the design suffered from usability issues, flow problems and visual issues so people with visual disabilities would have a real hard time. The colors were really harsh making it really tiresome and distracting, text was too small, way to complicated flows, too many clicks to perform certain actions, unable to identify which is a link and which is text and the list can go on.

AND BY COLLABORATING WITH THE MARKETING TEAM I’VE BUILT THE USER PERSONAS

The stakeholder and office manager were impressed by the detail put into it, so they gave me the green flag to get started. We also discussed the company goals, what they want to achieve, delivery time, visual direction, technology and so on which helped organize my approach and identify constraints. By collaborating with the marketing team I was then able to setup the user personas.

I THEN IDENTIFIED THE EXISTING FLOW AND IMPROVE IT WHILE ALSO INTEGRATING NEW FEATURES INTO IT AND SIMPLIFYING THE USER JOURNEY

I started analyzing the existing design to understand the flows and see how I can add the new requested features, this lead to sketching and improving the flows so users will have an easier time by fixing flow problems, redirection issues and inability to switch between collections

PROPOSED TWO NEW DESIGNS AS A WAY TO SOLVE SOME OF THE MORE COMPLEX ISSUES WHILE KEEPING TO THE DESIRED WEBSITE NAVIGATION

These were scrapped due to the development team already building the old website, although the whole office was impressed and as a result I started working on the existing design

EYE TRACKING AND HEAT MAPS WERE USED TO ANALYZE THE USERS INTERACTIONS AND VALIDATE THE DESIGNS

Conducting a user testing session helped validate that the proposed designs were more intuitive and easy to use then the existing one

DUE TO THE DEVELOPMENT TEAM ALREADY BEING ALMOST DONE WITH THE IMPLEMENTATION OF THE OLD DESIGN THESE WERE SCRAPPED AS IT WOULD HAVE REQUIRED SEVERE TWEAKS

since the development team was in a different country I wasn’t aware that they were almost done integrating the old design and thus the proposed designs done in the early stages of the project within 48hours , they were scrapped as it would have required altering what they’ve built and push back the delivery date

DURING THE WHOLE DESIGN I’VE TESTED AND CREATED MULTIPLE ITERATIONS

as a way to come with the best approach, this involved testing menu placement, colors, layouts, UI elements, sizes, flows and so on

SHOWCASING MY SOLUTIONS IN A VISUAL WAY SO STAKEHOLDERS WOULD UNDERSTAND

this made it really easy for them to understand how it works while also helping with writing the developer notes

IN THE END I’VE MET THE CEO AT THE GLOBAL HQ

Tackling both the UX and UI at the same time proved to be efficient since I was able to finish the design in just four months while fixing over 80 issues and creating over 110 iterations while collaborating with all departments and then tackling other e-commerce projects held by the company
Here are some additional

UX EXPLANATIONS

Here’s how I’ve solved some of the

UX PROBLEMS

1. users having problems swapping between the two collections due to them being unintuitive which lead to users having to go back to the home screen to change collection. Solved by incorporating a quick switch option between collections from any area of the site.
2. lack of a way for users to track their orders, payments, etc as the user control panel only had a way to edit their information. Solved by creating a fully fledges user dashboard, offering complete control.
3. users getting redirected to their mini control panel once they logged in instead of the page they were previously leading to website errors. Solved by changing the flow, so they would be redirected to the area they were on.
4. users were encouraged to click on the back button multiple times to navigate between pages, solved by incorporating a slimmer better navigation at key visual location, bread crumbs and the ability to easy switch between collections
5. users could only see products on only 30% of the screen due to the top and bottom taking the additional screen space, solved by redesigning the top bar and the navigation
6. users couldn’t see which is a clickable link, solved by using arrows and underlines for links
7. lack of a visual hierarchy which lead to users having difficulties identifying which is the button for their account, solved by using color to attract users attention to key visual elements
8. users would get redirected to a separate page when pressing the login button, solved by using a quick drop down login form thus reducing extra interactions and the time spent waiting for the page to load
9. users weren’t encouraged to explore other area of the site, affecting sales, solved by displaying a best buy area, suggesting related products and other similar tweaks
10. lack of a product sorting which lead to difficulties when users where browsing products, solved by incorporating a sorting feature
11. users were redirected to the product cart page, once they added a product to the cart, thus having to go back to the previous page, solved by using a quick cart button
12. lack of help with their decisions, using a rating preview system and social sharing of their customized products helped better inform their buying decisions with the help of the community or friends
13. on the product browsing page, the product navigation was placed at the bottom, thus users wouldn’t find it, solved by moving the navigation to the sides and increasing their size thus making it more obvious
14. integrating a visual order confirmation also helped users be informed that their product has been added, without having to then check the cart to see
15. users were required to redo the product customization each time they left the site or switched their pc, solved by having an option to save their customization
16. users were getting distracted by the social platform buttons, which was solved by lowering their opacity and using a more neutral color palette to blend them with the visual design
17. users were presented with the main website navigation only after they choose a collection, solved by using a global menu that was present everywhere
18. users were having a problem understanding that the two areas of the homepage, were actually buttons and the bottom were a second set of buttons. This lead to users not knowing how to access the collection, which was solved by grouping all four above the fold and making the collections bigger

THE IMPACT

Design wise:
  • created over 100 iterations of the visual design and various wireframes as a way to truly refine the user experience and meet the users needs as well as their goal 30 page heuristic analysis that helped identify and fix multiple user experience problems
  • performed heat map and eye tracking analysis to validate my design decisions, proving they were a better approach
  • dramatically improved the flow and user journey, reducing the time to checkout and other user actions performed after login, while also integrating new application features
  • implemented multiple conversions optimization techniques into the wireframes and visual design, generating extra revenue
Product wise:
  • redesigned their main online store in just four months, as a result me and a few colleagues went to the global HQ in Germany and met the CEO
  • collaborated with other departments and regional stakeholders to build a product that is tailored to the user groups while also meeting stakeholder standards
  • proposed two new mockups for the main store which impressed the whole office
  • sought out to handle and provide feedback on other company brands and projects
  • overcame the challenge of working with a development team based in another country by coming up with solutions within platform limitations, reducing the time to market
  • delivered developer notes after each iteration, reducing back and forth communications
Thanks for browsing,

VIEW OTHER UX PROJECTS

or share this project with your friends, it helps