Lesara Website

responsive web design for e-commerce

Lesara is an e-commerce company, founded in 2013. They began as a discount retailer for a range of household, electronic, and fashion products. In 2016 they began to refine their brand and focus on affordable fashion for everyone. I joined the team in the beginning of 2017, right as they were beginning a sitewide redesign.


The Challenge

Lesara was ready for a new look and a completely redesigned website. We wanted to maintain the established brand while giving the site a more modern and fashionable feel and improving the user experience.


Process

We redesigned the website page by page, working with stakeholders and developers to understand the requirements and technical possibilities for each page.

As a design team we really valued process and re-evaluated ours often. Of course, things don’t always happen as planned but when it did, our process looked something like this:

  • Understand requirements from stakeholders and product managers
  • Sketch wireframes and work out user flow and functionality while communicating with development team
  • Create low-fi designs and prototypes
  • Get feedback from team members and stakeholders
  • Create high fidelity designs, taking all feedback into account
  • Send approved designs, with all necessary documentation, assets, and functionality requirements, to development team
  • After feature is developed, monitor the analytics and make improvements


Case Study - Category pages

The category pages were the second page we redesigned after completing the home page. We defined two kinds of shoppers, those who know exactly what they are looking for and those who want to browse and be inspired. Our goal was to create an environment which caters to both types of shoppers.

We usually designed for mobile first but in this case we started with desktop to tackle some complex layout decisions. Technical requirements restricted us from changing the website header and top navigation bar but we wanted to include filters, a sorting option, and an additional navigation tree showing 4th level categories (Women > Clothing > Dresses > Summer Dresses).

We struggled with the placement of the filters, trying first to include them underneath the navigation tree on the left side. We decided against this because they were not always visible below the category tree and opening one filter made it harder to see and access the other filters. We placed the filters as separate dropdowns on the top of the product list, which allowed the user to access all filters, and gave us flexibility to include more filters in the future.

For mobile filters, we designed a full screen layout which allowed us to show all filter options at once. To include the navigation on mobile, we opted for a horizontally scrolling menu above the product list which displayed the next level of categories.


Sketches & Wireframes, Desktop


High Fidelity Designs, Desktop


Sketches & Wireframes, Mobile


High Fidelity Designs, Mobile