"Luxury Fashion Line"
Building an e-commerce website
Designing a luxury lingerie brand's responsive website.
Liviara was launching a new line of their lingerie. This new line needed to be showcased online on a new design of their website.
- The website needed to communicate the brand and style.
- The line has 2 major themes (Beloved, Condemned) and the supplemental line (Bridal). They each needed to be represented differently while showing their contrasts to each other.
- It needed to be responsive, from to 1280px and beyond, to as narrow as 320px. The site needed to work in all the sizes in between.
- The timeline for the site would have 3 stages. Stage 1: Lookbook for the 2 main themes, communicating brand messages which would be password protected, with an inquiry form. Stage 2: A full product listing section, with product details. Stage 3: Full ecommerce functionality, shopping cart, and checkout.
Liviara had an audience that the client was very famliar with. Since they interacted with them in the physical store, we used the owners as resource for this information.
The client was the audience whose vision we wanted to understand. They were fashion designers, so they served as a creative resource. Photography had been completed for the lookbooks and lead by them.
We further classified this audience into personas. Because of the item's price range, the age range we learned was about 35-55 years old, mostly women in a higher income bracket.
The team consisted of 1 Project Manager, 1 Business Analyst, 1 Creative Director, 1 Art director, and 1 UX Designer (me).
I was involved on the concept by creating wireframes to show the client. An Art Directer was utilized to create mockups to present a different layout for the client to choose from. My design was chosen, and we moved forward from that.
The 3 stage launch of the site would make the design complicated. This meant keeping 3 sets of wires, impacts on the earlier stages of the wires affected the later stages.
The fact that this site was a luxury brand's site. This means that the design needs to keep to their aesthetic. Concessions had to be made with the creative director when theses concerns arose.
The budget only allowed for 2 breakpoints to be designed for, however they want the widths in between to function.
Not only were there many items, but many items needed to be grouped together as 'silhouettes'. These were a group of items that could be purchased together.
The products needed to be sortable, filterable by specific attributes.
Starting the UX
It had been a while since I had done an ecommerce site. The common thinking is usually to create a list of competitors, look at how they handle their ecommerce websites and assume they're doing it correctly. I do NOT subscribe to this way of thinking.
It can easily lead to everyone thinking that the next person knows what they're doing. This is an incredibly flawed approach. We do not have their analytics, or have any data backing up this approach. If we had more time, I would do user testing on all the major competitor's websites, with users in their demographics, with specific tasks to accomplish and record this data.
However, if you can leverage a existing usability ecommerce research you can save a lot of time, headache, and budgeted hours. I found a great resource for this information. I found out a whole lot more than I had intended. It was a 500 page document, with many many examples.
These were a few of the factors involved in this particular site:
- This site is apparel and accessories. Which is different from say Electronics, which has a lot of attributes that need to be filterable. Electronics has formats, ports, voltages, etc... It is NOT Amazon. So that means that it does not contain products that cannot be compared. Amazon is what is called a 'mass merchant' store. Mass merchants have different items that all need their own unique filters. They may contain results where an attribute may belong to one item, and not another.
- Item photos are very important to users. They also need to be quickly scannable and compared to other items.
- The products have variations. Some of the variations are used in multiple groupings.
Product Listing Layout
These items rely heavily on the photo of the product. Furthermore, the photos are of HIGH importance. They need to be big, and show enough detail in the product listing page for a user to make a decision to look further into the product details. It requires a lot more effort to click on an item, go to the product detail page to see more information. If this item doesn't fit their needs, it is back to the results.
Having additional photos available for the user to see more angles of product. Left, Right, Front, and 'lookbook'. For the larger displays, I wanted to accommodate for touch devices. With that, the product photos still lead to the product detail without needing to show the hover state.
In addition to these factors, there were a number of others that were recommended by research. I utilized the research and other examples to comminicate this to the creative director and other designers so that we put the site in the best position to succeed. While we cant be sure this is the answer, this is an educated, research based approach. Post launch testing would be of great benefit.
The site needed a lot of work to get it where it needed to be. The most complex feature was the filtering toolbar. The functionality of this needed to communicated to the offshore development team.
Well annotated wireframes and flows were a huge help. I mapped out every possible state for the product cards, document the expected outcome for every interaction and even the affect the filter has on the results. Also considered was the naming conventions for the photos. I wanted to be sure that the right images were showing up, and that a simple and logical naming convention was used.
The flows, product matrix, interaction annotations, and considering every possible conflict that could arise is critical to getting a project launched on time. The developers need to know a lot of exact information. Where exactly does the site switch to a different layout. Where do these buttons lead to? What products are shown as related.
The big lessons were the benefits of usability research to build upon with my own research. Assumptions need to originate from somewhere, and from there, testing can begin.
I wish I had more time to go into further details on the design. I would have liked for there to be less spacing between objects. After launch the client has made changes to the design. I'd love to know what their decision making process was.
Applications used on this project
These wires would need to be done quickly and often times needed to be interactive. The wires would need to be exported easily to PDF for offline viewing. Annotations would need to be done on the same wires to be handed off to development.
I used Photoshop for design mockups. For the wireframes, Axure RP 7 was used for the wires and interactive prototype.