🏗️ Wireframing
To start I created low-fidelity wireframes to map out the structure and layout of the new templates, focusing on key user journeys. This included the homepage, product overviews, product details, cart and checkout.
How I designed a new storefront for MyOnlineStore
Organisation
MyOnlineStore B.V.
Project
New storefront design
Challenge
MyOnlineStore had an outdated look and feel for their storefronts. I redesigned the storefront templates of MyOnlineStore, enhancing the visual appeal and usability while improving the overall customer shopping experience.
My role
UX / UI Designer
Duration
2 months
MyOnlineStore aimed to refresh its storefront templates to better meet the evolving needs of online merchants and their customers. The existing templates, though functional, lacked modern aesthetics and user-centric design principles. The primary challenge was to create visually appealing, highly customizable templates that would improve user engagement and conversion rates across diverse business types.
To start of the project I did desk research and a market analysis to identify industry trends and best practices in ecommerce storefront design.
To start I created low-fidelity wireframes to map out the structure and layout of the new templates, focusing on key user journeys. This included the homepage, product overviews, product details, cart and checkout.
Once I had a basic structure for the most important pages I started with design exploration. I decided that the best way forward would be to analyse the most common branches and product types currently in the platform. Those turned out to be clothing and fashion related. I created several templates for a homepage around this subject.
To test the designed shortlist and pick the style in which to make the rest of the pages I ran a quick preference test (in the form of 'which design do you prefer'). The test was sent out to a 216 customers, of which 53 responded, Design A won with 36 votes (68%) from B and C.
Once I had the preferred style it was time to design the templates for the product overview, product details, cart and checkout pages. Eventually I filled in all the wireframes with the new style and provided our team with a foundation for a new storefront template.
This project underscored the importance of user-centered design in creating effective ecommerce solutions. By focusing on the needs and preferences of both merchants and their customers, I was able to deliver a product that not only looked great but also provided an excellent foundation for future projects around a new store editor. Unfortunately the new templates were not implemented due to a shift in the company's focus. But I have no doubt that they would have performed well compared to the current templates.
