Shopping Cart & CheckOut Steps

Markafoni is a Turkish shopping portal offering clothing and fashion accessories. The site has six million customers all over the Turkish-speaking regions. Naspers bought it but then in 2017, they closed it completely. It was the very first e-commerce platform in Turkey and was the market leader for a very long time. I was Senior UX and UI Designer at Markafoni; working closely with FrontEnd and Product Teams. My responsibilities were, but were not limited to, improving the cart and checkout screens.

Findings

I did the root case research and group them for platforms such as desktop, mobile, web, IOS, and Android. I presented my finding to the Product Owner and we did our prioritization to start the design process.

Wireframes, heuristic evaluation, and flow charts

I made wireframes for phase 1, which was decided according to the prioritization done with the Product Owner. During the wireframe process, I used the heuristic evaluation method. In the current situation, the company was having problems with delivery information. Users who buy more than one product have multiple different delivery dates. There were no instructions describing this situation on the existing screens. Due to this situation, order cancellations and call center complaints were occurring. 

While preparing the wireframes, I studied scenarios that could be a solution to partial delivery. Another big issue was that the steps to register a credit card were missing. I also worked out scenarios for this. As a result of short meetings with stakeholders, I finalized the wireframe studies.

I visualized the approved wireframes on a flow-chart, as we had difficulty seeing the big picture, for all the problematic areas such as; partial delivery, registered credit card selection, and choosing different delivery addresses e.g. home or work. That presentation enabled the stakeholders to realize with the new design proposal, the process was smooth, and the software developers could have a better understanding of the workload that they would have. As a result of short meetings with stakeholders, I finalized the flow charts.

Prototypes and user testing

In a conclusion, 2 versions of wireframe output were created. I prototyped them with the inVision application and tested them with real users for 1 day in a Markafoni retail store. According to the results, I eliminated one of the wireframe versions.

UI

I started to do the designs on Sketch according to the chosen wireframe. As a result of short meetings with stakeholders, I finalized the designs. I integrated the final designs for the software developers into the Zeplin application. (Only the IOS product is shown below as an example.)