myWorld Marketplace
The Background
myworld.com was e-commerce website (marketplace) that connected companies and their customers in more than 6 languages and countries in Europe. The company intention was to optimise the current product and extend this reach to additional countries and customers (which we did – after 1 year we managed to expand in more than 10 countries)
The company had offices all over Europe and already had Graphic designers, but they realised they needed now UX designers in order to grow their business. This is when the UX design was created – in Vienna (me), one in Warsaw and our team lead in Zurich.
My Role
My main tasks were related to analyzing and optimizing the e-commerce website and the user flow but also adding new features and even a mobile app that we were asked to design. In many of my projects I collaborated with the colleague UX designer and I worked closely with with the product owners and with the developers team. We were of course working Agile, in Sprints.
An interesting challenge at myWorld marketplace
When I took over and I started analyzing I realised there was a lot to optimise because everything they have done so far was created in “desktop first” concept. Now we had to rethink and optimise for “mobile first” because a considerable amount of our customers were using mobile. There were issues that were making hard for our users to purchase products – they had to scroll to see important information, some buttons were not visible enough, we had too many steps in the checkout process.
The process
When starting a project I used to begin with a brief establishing clearly our targets and purpose, having documentation and use cases, having a preliminary meeting (sometimes a brainstorm) with the team then I went into research and sketches (Miro or paper) low Fi mocks followed by a short discussion with the team to make sure we are on the right track then I went into High Fidelity mocks and clickable prototype that could be used for testing.
When the concept was final it followed an export into Zeplin and indvidual assets and specs for the developers then a period of close collaboration with them and with the product owner to make sure the project is implemented correctly and off course testing at the end.
In the begining
There was a very small style guide available, which I took over from the previous designer, I used it as base. I had talks with the product owners and developers to understand their expectations and to know the platform better then I looked deeply into the website on production and test environment to identify and bring all the elements in and make the style guide comprehensive and turn it into a design system.
After defining the base elements (atoms and molecules) components containing them were also defined and I added CSS code to help guide the programmers that i was collaborating with. This was shared with them in Zeplin platform.
This effort seemed maybe much at the moment but in time it proved it’s effectiveness, specially when creating new features or updating the style of some of our old products, also while doing this UI inventory I already detected together with the team some things that could be improved and we started planning this for future. For example the header navigation trough categories, the footer, the product page, also we detected some accessibility issues.
Also I was collaborating very often with my colleague designer, who was normally working on a different part of the product but I shared this design system with him for common projects also to help him create a design system for his product and to ensure a match between these two.
Then I started looking into the user flows
I looked for issues that our users encounter when accessing the marketplace with a special focus on the purchasing action. Took a look at mobile screens, as in the past focus was on desktop so they were not always very well optimized, and some serious issues came out like for example the cookie notice covering the buy button on small screens. This was solved by making it transparent and showing what is underneath.
Also I took a look at shopping cart on mobile and made some changes here too so that we won’t waste precious space and force scrolling, in the new view the users can see better the order summary and edit their orders if needed.
But it was not enough so we needed to remake the checkout process
All these small tweaks we did for the checkout worked but they were not enough to improve our customer experience and to make buying easier for them because we had no less than 7 steps they needed to go trough: shopping cart, address, delivery address, delivery options, payment, confirmation, succes page.
So we took a radical decision, we looked for a way to move them all into one page. The so called “one page checkout”
Working as a team (with my colleague UX designer, PO’s and CTO) we explored different possibilities and ways to transform the flow, unify and simplify the entire checkout process.
After we agreed on the new flow we came up with the concrete solution which contains delivery and billing adress , payment, discounts, delivery options, all on one page instead of seven.
We were going mobile first but off course we needed also the desktop version , which was one single page with sticky order details.
After improvements, we started adding new features
After we optimised the myworld.com marketplace and we had a more usable product, the most interesting part came – we did a full analysis of our product to see what we could improve and we also looked at our competition (Amazon, Universal, MediaMarkt) and we realized our users could greatly benefit from reviews and ratings, because it would help them chose between products and merchants and gain trust easier, so we started on this path.
Product ratings
Going even bigger
Another challenge here was to present this special promotion next to the normal prices everywhere and offcourse to adapt it for mobile screens too.
Going mobile
