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.

from idea, sketches, flows to wireframes and prototypes

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.

this was a part of our style guide - made by me, the second part was combining these elements in components

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.

The cookie notice was covering the buy button. This was solved by making it transparent.

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.

reorganised shopping cart, less scrolling, easier to purchase

I realized that in some steps of the checkout it was not clear enough where they need to click or check in order to continue so I came up with a way to highlight better those areas using h-over, color and small animation

highlight mandatory boxes using color and animation

Also it was not clear how much you still needed to complete until you finish the order and how to go back if needed so we improved the progress bar by showing percentage and we showed previous/ next steps.

improved progress bar in checkout, showing current status better

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”

no less than 7 steps in our old checkout process, here is mobile version, desktop was too big to present

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.

first we researched and sketched a possible solution to unfiy the flows

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.

then we came up with the concrete solution which contains delivery and billing adress , payment, discounts, delivery options

We were going mobile first but off course we needed also the desktop version , which was one single page with sticky order details.

desktop solution which contains delivery and billing adress , payment, discounts, delivery options in one page

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.

We decided to approach seller rating first so I worked on system with percentages and color codes to show the overall rating to our users.

And a way to integrate it within our product page so that it provides basic information on a first view, like the location of the seller (to take advantage of the increased trust as local market)

Also we were showing a detailed view with data about the seller activity and comments from other users.

Product ratings

Then the next step was the product ratings and reviews, giving our users the possibility to see what other users are thinking about a specific product and to be able to chose easier based on the rating.

And offcourse we were allowing our users to leave a feedback after they purchased a product.

Going even bigger

Then we implemented special campaigns like the “benefits” which had to be developed at a company group level, not just within our marketplace, so it took a lot of communication and synchronization between teams to make them work everywhere. In this case, a part of our users have access to these benefit vouchers (they earn from another company) which they can use on special – benefit deals – in our marketplace and it other places.
Another challenge here was to present this special promotion next to the normal prices everywhere and offcourse to adapt it for mobile screens too.

But the trickiest part was integrating this promotion in the checkout process and to make everything clear for our users – how they can use it, how much they need to pay.

Going mobile

One very extensive project and a real challenge that I had and also as a team (my colleague designer, CTO, product owners, marketing director) was to design a mobile app for our shopping platform. We started with a brainstorm as a team, looked into data from the desktop website made a list of features that we want to have then we started doing sketches and low fidelity prototypes and we met again with the full team in Zurich for 3 days workshop then we looked again at the features that we consider essential and some that could make a difference for us, like gamification and community. We then proceed with the high fidelity mockups and done a plan for usability testing. Next steps is to be to be in contact with the team of developers and support them produce the app.