1. Interactive HTML Prototype

An interactive prototype of Magento Application new user experience works.

Goal: Demo the new design of Magento Application internally to product and engineering teams

Target Audience: Product and Engineering Team

View Prototype http://belbiy.github.io/ux-prototype/

This project is a collaborative effort of the whole team. I worked on the following:

  • Used HTML5, CSS3 and Javascript to create an interactive HTML prototype.
  • Workflows: Installation, Deployment Tool, Search Management and System Configuration
  • UI Components: Wizard, Tile Layout, Button Bar, Tree

2. Design Pattern Library

A design pattern is an agreed-upon guide for creating user interface elements. It also outlines best practices for commonly-used interactive elements.

Goal: Ensure consistency in the user experience within the Magento Admin Application and provide a common language and concrete reference for collaboration across all roles on the product team.

Target Audience: Magento Designers (Internally), Magento’s Extension Developers/Designer

Execution: http://devdocs.magento.com/guides/v2.1/pattern-library/bk-pattern.html

To publish the Pattern Library, I worked on the following:

  • Organized and identified the patterns into one single library that is agreed upon by everyone.
  • Set the guidelines for publishing these patterns.
  • Taught the team these guidelines and how to create the pattern in HTML and publish through Github.
  • Set strategy to keep track of published/unpublished patterns
  • Worked on these patterns: Wizard, Tabs, Accessibility Guidelines, Image Uploader, Date and Time Selector, and Links. Pattern creation and publication is a collaborative effort of the whole team.

3. Information Architecture Improvement & Testing

A study to improve the information architecture of Magento Application.

Goal: Help merchant to have a clear and understandable navigation within Admin Panel so that they can quickly access needed part of the system.

Target Audience: Magento Admin Users


To improve the existing Information Architect, I worked on the following:

  • Proposed a new Information Architect for Magento.
  • Wrote usability tests
  • Execute the A/B treejack tests.
  • Analyze the findings and provide recommended action for following revision of IAs.
The test overview and results can be found in the following PDF: