This project was considerably more intricate, complex and diverse in many aspects. The challenges were very big due to multiple technical and financial constraints.
This clothing eCommerce, was also a startup orchestrated by four stakeholders. Their vision is to be the first clothing line exclusively designing dance wear to the Kizomba, Urban Kiz, Salsa & Bachata markets.
After assembling a small team of three designers, one uiux designer (myself) and a developer the challenges were:
1. Creating an eCommerce capable of offering different pieces of clothing, with different colours, sizes, and dance genres.
2. Featuring a payment system capable of accepting multiple payment methods
3. Creating multiple clothing designs within a strict time frame
4. Finding a way to redirect orders directly to the manufacturer
5. Having the manufacturer print and ship the orders directly to the end users without the business owners getting involved in the process
6. Automatically calculating, allocating and sending the payments and profit margins to the manufacturer and the business owners
7. Achieving all of above with extreme financial constraints.
As I was the first one called to this project, after doing the stakeholder interview, I have started researching ways of achieving this level of functionality and automation without compromising on their budget (once again this deep level of engagement is part of the value added services I offer as a UX consultant).
After a few days researching I came across an add-on product from WIX which allowed to create a “middle man” between the website and the manufacturer. This solution was so effective that allowed the company to save thousands in development work as well as time since this add on required minimal coding to setup. However there was a draw back: the website had to be made in WIX. Although this was possible to be achieved, the level of flexibility within the prototyping and designing phase was seriously compromised.
As such, the prototypes that were made in XD were purely as a reference point and designed taking into consideration WIX’s designing limitations. On the left is the diagram showing how that add-on would be integrating with rest of the solution. The effectiveness of this alternative meant that not only the system could talk to the manufacturer but also allocate the profit margins and send them automatically to both parts of the process. Integrating this was relatively easy from the developer’s standpoint which meant that most of his attention was actually allocated to the end user’s payment system.
After looking into some eCommerce clothing businesses, we have emulated the approach and user flow that River Island has in place (although with a different lay out).
In order to be able to understand if WIX could keep up with the requirements, we have build a basic MVP with four clothing items, and tested them with users and the market for two weeks. Not only this would tell us about the market opportunity but also about the WIX capabilities as well as user experience. These users were a targetted audience (4 dancers per dance genre (3 different dance genres in total)) and recorded footage of their faces as well as the screen to understand if they were responding as expected by the original designs. Surprisingly, most of our assumptions were correct in this case.
Testing was really present and essential throughout the whole process as we have also used the same user panel to chose what pieces of clothing should be featured in the home page and the hero banner.
During this period, we have also included a pop up form in the Shop tab so that users could give us some insights in terms of the usability, ease of payment and navigation as well as the clothing itself.
As we were a much bigger team and in order to ensure that time scales as well as testing and functionality were met, we have organised ourselves in the Agile way.
This would allow us to do little increments of content and treating it as a spring with weekly stand up meetings. Also the constant rethinking of the approach as well as documenting the lessons learned proved quite effective in avoiding mistakes along the way.
Our process was made as it’s shown on the right.
As we have got quite a lot of feedback from users, and due to the WIX limitations, we have ended up creating three versions for the main layout of the website.
Although this was quite time consuming that allowed us to do some A/B testing to make sure that the best and most intuitive version was the one we had adopted. Here is the final sitemap in a low fi wireframe format.
On the right are displayed a few more low fidelity wireframes of some of the different website sections.
1. Testing was particularly important in this project, as it challenged quite a lot of our assumptions. One of the examples was on the home page. We have assumed that the customers would prefer the t-shirt and cap choices that we have placed on the home page. Turns out that their preference was completely different.
Since a lot of websites get less then 15 seconds of user attention, being able to captivate them instantly with the best designs exponentially increases our chances that they will look at other items afterwards.
2. Researching other websites such as ASOS, Dancewearcentral, Dancedirect, River Island and others, also gave us an insight of how the information architecture should be tied up to improve customer engagement.
3. Due to the complexity of the website, the user journeys were particularly effective during payment time as it helped tidying up what it could have easily been a frustrating and tumultuous navigation experience.
All these projects were made taking into consideration the WCAG 2.0 / W3C AA accessibility standards whenever possible. As such, visual hierarchy, typography, font size, spacing, colour contract and descriptions, ARIA labels, etc, were taken into consideration.
Although KF DanceWear is not runnig anymore, for the course of two years they were profiting from their online clothing shop reaching an average of 90 products sold per month.
Website