Keanestone

Apparel 21

Salesnet

The Problems

A redesign and rebuild of the Salesnet web-based stock ordering solution for fashion trading partners and Sales Agents.

  • Rapid delivery was required to go live before the current licensing expired.
  • Development team had no UI development experience so had to upskill.
  • I was the sole UX and UI designer providing assets for all the development sprints.
  • Wholesale ordering system has complex requirements and the new Salesnet needed to be responsive as a large proportion of use would be on tablets in off-site client-facing meetings and discussions.
  • Specific UX challenges included:
    • Detailed search criteria.
    • Responsive display of bulk ordering on individual items.
    • Clear display of multiple data types on each size such as out of stock, low quantity amount and re-stocking dates.
    • Reviewing large orders in the cart.

The Solutions

  • A front-end framework was required for rapid build with minimal UI dev experience in the team - Bootstrap was chosen.
  • I had to create extremely lean assets (mostly low-fidelity wireframes) to fulfill each sprint requirement
  • Visual design was applied on-the-fly using OOTB styles and providing MVP Apparel 21 Salesnet branding.
  • I paired with UI developers to overcome development questions and challenges.
  • Wireframes were presented during team co-design workshops in InVision.

The Outcomes

  • A semantic design and build is required for optimal responsive UX that also meets accessibility, W3C HTML and SEO standards and requirements - my knowledge of UI semantics enabled me to rapidly choose the best layouts for complex user input e.g. Using lists instead of tables on the product page sizes enabled rapid responsive and semantic development.
  • Scale was a key factor in the design as large amounts of data was to be displayed per screen and users needed to navigate by touch as well as mouse / keyboard. I produced my wireframes at the optimal scale to ensure a clear vision for the design opportunities was kept. This had a great impact on the product page where users needed to select multiple colours and sizes.
  • Tags for each search filter were displayed to allow users to rapidly review and update their search preferences.
  • Multiple product categories were displayed in accordions for ease of visibility and selection.