AspxCommerce - Product Design

An Open Source eCommerce that is the highly customizable solution for merchants with regards to the higher growth of their business needs.

Challenge

The objective was to design Open source .NET e-commerce platform to build the product called SAGEFRAME. The product was targeted millions of customers who what to use AspxCommerce to set up their online store with minimum knowledge of programming. The product was developed since 2010 and going to its version 2 with a lot of new features. The focus was improving UX of the product with minimum steps and process to setup complete online store.

Objective

Coming Soon.

Approach

Product Review, Product Design, Visual Design, Workshops, Product Testing

The process started with insights and existing test cases of AspxCommerce users. Workshops, user testing for products were the methords used for the user feedback.

Design Details
  • Date: September 2016
  • Platform: Desktop, tablet and mobile (Responsive Design) + Mobile App (Prototype)
  • Technology: Adobe Creative Cloud, Jira, Visual Studio
Design Process
  • Understand
  • Sketch
  • Decide
  • Prototype
  • Validate
What did I do?
  • Leading more than 30+ people from design, development, marketing, content and support departments.
  • Setting up goals and objectives for the team to do task analysis.
  • Documenting interaction and visual design requirements.
  • Sketching information architecture and sitemap of the product.
  • Visual design for the component library and interaction guidelines.
  • Conduct user testing, workshops, and focus groups.
  • Building personas, creating scenarios and user journey
  • The final decision for product design and its branding.
REVIEW EXISTING VERSION & FOCUS GROUPS

The Design process started with a goal to create version 2 for the product, which will be able to do 70% additional features more than in version 1 with latest trends and technologies using Microsoft technologies.

The business requirements and goals were clear, but the analysis of version 1 required user testing. There were more than 50 technology colleges in the city. Every colleges and university allowed doing campaigns, interviews, and workshops for the product reviews. The product was targeted a large number of users around the world, so the user requirements were vital for the start. More than 2000 small business owners, students, teachers, and technologies provided the feedback on the product, which was an excessive response to the product research.

TASK MANAGEMENT, IA & SITEMAP

After the system planning and requirements are refined, it started with creating user personas, journeys and scenarios through the system while any user using the system to create the website or any application possible to build with it.

SCREEN FLOW & NAVIGATION MODEL

The product had a complex structure in itself. It had more than 30+ screens and panels, and architecture to create navigation models. As most of the features were dynamic in nature, the screens were locked with primary requirements.

WIREFRAMES & PROTOTYPING

The sketches for Admin panel started with dashboard panel, followed by each feature available in the application. Drag and drop features, settings, user authentications and root users were clearly sketched. Then the prototyping was done on paper and posted on board to draw the interactions among them. This show the clear view of the whole system flow, where the user can go end-to-end.

FUNCTIONAL SPECIFICATION & USABILITY TESTING

After the wireframe was done, the product functional specification was matched and refined for usability testing among the developers only. This process was done in iteration process with improvement in each section, screens, and features.

VISUAL & INTERACTION DESIGN

This part includes the pure design, visual art of each wireframe and prototype to convert them to the actual design. The fonts, colors, layouts, icons, labels, and spacing were defined properly to create the final User interface for the application.

PRODUCT DESIGN & BRANDING

After the complete development, the product design was extended to create its different theme for the users which need another process of high-end design and followed by the precise branding of the product.