NoLo
A piece of happiness
Designing process for a local business NoLo - tailor made clothing and accessories for babies and toddlers.
A responsive ecommerce website.
My idea was to concentrate NoLo's concept on customised items that a potential user can create and decide on online. I ran a competitor analysis to see what are the characteristics of other players that use the similar tool. I concentrated mostly of how the process of customising or personalising items looks like.
The websites that I analysed seem “rich” in content and it feels a bit overwhelming. The UIs are rather complex and unappealing. Overall, there seems to be much potential in simplification and guidance to enable a delightful, frictionless user experience. A smooth process from formulating ones own wishes to checkout.
I tried to put myself in the shoes of and interview potential users to discover:
I interviewed 4 female friends. Their age ranged from 39 - 41 years. All participants do regular online shopping especially for clothes and accessories for toddlers. And they do look for original items.
The creation of a persona enabled me to structure, bundle and bring to life the wishes and needs discovered during the user interviews. Because my interviewed group were women between 39-41 years old, I decided to go for a female persona Chloé at the age of 40, who looks for original and personable items.
I loved this stage because almost every new finding and idea could be a game changer and brought me closer to the best solution.
I really enjoyed working on user flow because this part brought a lot of practical aspects to my prototype and helped me smoothly get to sketching first wireframes.
During user interviews I was asking about the device that participants use the most often when it comes to online shopping. It turned out that the result was 50/50 for desktop and mobile. Since my stakeholder in a local Swiss business I was concentrating on this country. I searched on the Internet information and statistic from Switzerland but online research did not give me any relevant and updated data. So I took another step and made a test among my friends living in Switzerland. And again I ended up with 50/50 result. But also a lot of friends wrote me that browsing they might do on their mobile. But for final order they would use desktop. Furthermore, I was thinking that customised experience might be more comfortable to purchase on the desktop, so I decided to prepare low fidelity prototype for desktop.
Wire-framing helped me decide on the landing page. Taking into account my interviewed potential users who gave me a lot of good challenges to face how to design appealing customised process and smooth checkout path, I mostly concentrated on this while designing wireframes. I prepared low fidelity prototype for desktop and 11 responsive wireframes for mobile.
In this exercise I was guided by what the interviewed users had considered most important:
I took NoLo's logo and adjusted the rest of the style tile. During interviews I was asking about participant's favourite colour when it comes to kids' items. It turned out that their favourite ones are pastel colours. While designing style tile I was thinking that I want to go for colours that are gender neutral, that are positive and energetic. I went for different shades of green and yellow.
I also wanted to use hero image on the homepage to show a kid in NoLo's outfit. I used for this a photo of my son Leon who absolutely adored NoLo's hoody.
I filled my wireframes with colours, images and text. Thanks to the fact that I prepared detailed wireframes, the UI work went pretty smooth. I created a high fidelity clickable prototype in InVision that I could test with selected users from the target group. I wanted to see how does customised part work for them with all images and colours, and test if the checkout process is clear.
Usability testing gave a me confidence that I go in the right direction. This part enabled me further interaction with potential users and made me realised that "obvious" design is a hard thing to attain. I enjoyed seeing my work through users eyes and thus continuously improve the workings and seamlessness of the experience.
I was very happy that user flow was very smooth and pleasant for them. They really enjoyed the customised part because you could immediately see the outcome of selected items. And checkout process felt very intuitive and clear for them.
Three potential users tested my website. All of them completed the tasks quickly and error free. All the users loved colour palette and layout. They really enjoyed that the during customised process you can see iteration in the original item. I also collected a couple of comments mostly regarding UI: white space, CTAs' colours and text hierarchy.
UI Kit made it easier for me to continue see if UI elements fit and act well together.
This project gave me additional insight into the UX design process. I have learned how the different steps depend on and interact with each other. I especially liked information architecture (IA). For me IA is like a skeletal system of a human being, we can't see it with our own eyes. We see a face, body and other physical attributes (visuals, design) but without a skeleton we would not be able to move, function and adjust to a new reality. That was a great learning curve. I discovered that checkout process might feel easy to design but in practice it required a lot of thinking and the ability to empathise with the potential user in order to design a pleasant and clear design to handle. I really enjoyed working on this project.
My experience with this e-commerce website was pleasant also because of my stakeholder, Andrea the creator of NoLo brand was very open to different ideas. We created a good team.
.jpg)