Responsive eCommerce How we created the new Briloro online store

Let’s get started

Buying glasses online? Nobody does that. It’s way to complicated. Well, that’s not true and it’s proven by the success of some young start-ups, that pushed the eCommerce for glasses. Briloro is one of them, that score with their unique concept: Glasses are more than just your second pair of eyes. They are fashion statements and express your personality.

The concept works. The implementation could use some work. Briloro’s online store wasn’t flexible and didn’t habe a good usability. Also the shop was pretty much not usable for mobile devices. Time for a change.

Where are we heading

One of the new design’s goals was to communicate the fashion philosophy of Briloro directly to the customer. Our client wished for a straight forward design based on the current logo colors. For us it was obvious that the shop did not need any fancy gimmicks but a clean design, that takes a step back when user interaction is due.

Technically we needed to clean up the shop’s code. We wanted to have a solid base to build the responsive design upon. At the same time this will help creating a more flexible backend.

Concept A blank canvas

Magento was used for the previous shop and we sticked with it. It’s a flexible system, so why change that. But besides having more options in the backend and an optimized usability the core principle of Briloro needed more space to shine.

We sat together with our client and worked out the core values. Affordable glasses with style easy and quick to buy online. Another important aspect was the responsive design. A single shop instance, that adopts to as many screen sizes as possible. Especially mobile eCommerce has huge potential.

Briloro Wireframes

Design Getting in shape

After getting to know the company and collecting data from different sources, we used this knowledge to start with the wireframes, that outlines the layout of the shop’s different pages. This helped us to check, if all necessary elements fit in the right spot, before starting to create complex designs. And how do those elements behave on different screen sizes as on a smartphone or XXL desktop? With Wireframes we quickly communicated different ideas to the client in a visual manner.

Briloro Wireframes

Briloro Wireframes

Development Coding the final steps

Based on the final wireframes we created the designs. We favored a clean and sophisticated look. A combination of serif and non-serif fonts were used to emphasize the fashion values of Briloro. The principle behind the whole redesign was „mobile first“. Which means to work your way up from the smallest possible screen size to the biggest. This helps focussing on the most important parts of the shop and get rid of unnecessary elements, that would only bloat up the site.

Buying glasses online is still a delicate thing to do. That’s why it was important to support the customer as good as we can. We implemented „help elements“, as tooltips and tips whenever the user might encounter a more complex interaction.

 

Briloro mobile