ASOS: unofficial SITE re-design

TOOLS

Adobe XD & WordPress.

OBJECTIVE

Evaluate the information architecture and site layout for a complex retail website.

PROCESS

1. Re-design site selection. I chose to re-design the Asos Women’s site to challenge myself with something in the retail/e-commerce field and work with a site with a lot of content and navigation elements.

2. Using the expert evaluation method, I created a high fidelity wireframe using Adobe XD. I identified usability or design issues and implemented design solutions using UI standards for the current site in the wireframe:

  • A symmetrical grid in image content.

  • Clear breakpoints between categorical content.

  • Minimal design in busy navigation.

  • Consistent iconography design and color.

  • Salient and wider search bar.

  • Gallery sliders.

  • Re-aligned and clear text hierarchy in footer.

3. Built unofficial re-design site using WordPress plug-ins & front-end development.

High fidelity wireframe