myWorld – andreibalint.com

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 small style guide existing, i took a look into it then i looked deeply into the website on production and test environment to bring all the elements in and make the style guide more extensive. Specially I would mention adding parts of CSS code and components to help guide the programmers that i collaborated with.

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.

I continued with mobile screens and realised that our users sometimes have to scroll a lot in order to see product details or buy a product, so I reorganized the product page in order to make this action easier.

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 .

I realized that in some steps of the checkout it was not clear enough where you 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

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.

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.