Actually, Aprika is a marketplace for clothes and fashion brands which has some features to help these brands find customers and sell their products in a targeted and smart way. Aprika gives the users several new ways to discover and find new items and styles and it gets to know more and more about the users overtime to give the users more personalized and appropriate suggestions.

After checking the competitors I got my primary ideas of how I’m going to give Aprika a better experience and a different position.

Then I surfed several websites like Dribbble, Awwwards, Behance, Niice and etc. for inspirations. I observed other designers’ works and styles. Then I picked some of them which were close to what I was shaping in my mind and I got my mood board.

Based on what I got from the ideation steps (checking the competitors and getting inspirations), I started to design the user journey and the flows. For the home page, I designed it in a way that the user would get more different ways to discover and find styles and items (opposite to the competitors home page structure).  The home page delivers Aprika’s messages and features and helps the user discover more scrolling down the page.
I also designed the users’ journey throughout the website, from the homepage to the product page and the purchasing process.

I also designed the user flow of the SizeBook feature. First, I put it in the users’ profile so they had to go to their profile page and click on the SizeBook tab to fill the body size list. But while testing this (after preparing the prototype) I observed that the users are not comfortable with filling a pretty long list of sizes all at once. So I redesigned the flow and keeping the SizeBook tab in the profile, the users could complete their SizeBook partially overtime. For instance, when the users visit a shoes product page, Aprika asks them to give their feet size to show them appropriate shoes in the future.

After designing the user journey, I started to sketch my ideas and the structure of the pages. I sketched 8 different designs for each one of the pages on a folded paper in a limited time I set for myself (like Crazy 8s step in the Design Sprint method) and selected the best ones to move on with. 

I wire-framed my final sketches with Adobe XD and used the prototyping tool to link and show the transitions. I also printed the wireframes and asked my colleagues to check and tell me what they’re thinking about, what makes them feel confused or uncomfortable or encouraged and happy. I also checked the wireframes with the client and got feedbacks.

After testing the wireframes, with a couple of small changes, I moved to the user interface design process. I started with defining and deciding how I’m going to design the interface.

In order to achieve a completely responsive and mobile friendly result, I interacted with the developers and asked them how to make this happen. Since they were comfortable with the Bootstrap Grid System, I designed the website according to this system with 12 columns for the desktop/tablet and 4 columns for mobile devices.

I decided to work with Atomic Design method for this project; to start with the key elements and progress to the whole final design. The reason why I did it this way was that I wanted to define certain structures and ways to interact with the users and prevent them to struggle with learning too many things to use the product.I designed the user interface elements like buttons and text fields and their states, and also reusable components like product photos, special offers section, banners, cards and etc.

I defined the typography styles and standards. I also designed an extended range of icons using Adobe Illustrator and delivered them to the developer as a font-icon package.

Now that everything about the product has been defined and created, I started to design the user interface with Adobe XD.

I designed it based on the Bootstrap Grid System and set the spaces between the elements and the line heights based on 8px square grid to create an impeccable, clean and pixel perfect design.

I used big images to talk more visual with the users.

I conducted final usability tests with 5 users to double check if anything goes wrong.

I observed them and took notes to apply to the final product or to inform the developers about the errors or any technical problems resulting in bad user experience.

I worked closely with the developers and talked to them about the best ways to deliver designs and assets to them. For some micro-interactions (loadings and some micro-interactions I created with Adobe After Effects) I used Airb&b’s bodymovin extension and delivered .json Lottie files to developers.

I also checked the developed product with the front-end developer throughout the breakpoints and the responsive appearance and fixed some missing details with the developer.