Fashion eCommerce UX/UI design

Ayan Company.
UI/UX Design


Technological advancements such as AI applications, 5G networks, and shopping through social networks drive users to choose mobile devices to shop online.Therefore, modern customers prefer to buy through online platforms rather than buying in brick-and-mortar stores as evidenced by according to Shopify, in 2022, sales of companies using this technology will mainly come from mobile shopping, accounting for 71% of total online sales.

Immediately, the CEO/Co-founder of Ayan Company - Ayan saw the potential of this market. In the first 2022, he said that he prepared a professional team to do that ambitious projects.

After he found a lot of Capi Product’s digital products via some platforms such as Dribbble, Behance, etc. Realizing that these products satisfied Ayan’s requirements for user experience and user interface, he made the decision to email us.

The story of Ayan

Through email, we know that. He’s a fashion retailer with several small stores in the US. He’s having difficulty with his traditional stores:
- The cost of hiring employees was too high.
- One of his offline stores could only contact people in sales about 10km in diameter.
- Online retailers and well-established fashion labels have consistently competed in the midrange and low-end segments with his stores.

He wanted to develop and succeed in his areas, but chain store management gave him a headache. Unlucky, for nearly 4 months, Ayan had lost a great deal of money continuously.
Apparently, his rivals were faster than him in the online sales race, so, he must act or face bankruptcy. During the process of working on the project Ayan with Capi came up with a lot of flying ideas for a great function that really serves the business well, but it would be too costly or time-consuming, or impossible to do.

Hence, we often had to remind him that a good product is a product that meets all 3 factors: Business, Technology, and User.
To prove this, we constantly surveyed his old customers and said to him: “It’s not the right time to do it”.

The strategy of Capi Creative and Ayan

After meeting with the Account Executive and Design team at Capi Product, we were more understanding of Ayan’s strategy, market, and revenue.He set out a number of goals that we needed to achieve. After discussion, we concluded that there would be 2 types of goals: short-term and long-term goals.

  • Short-term goal: Creating an application or website to support his business could reach potential customers and sell his own products to increase sales at the lowest cost.
  • Long-term goal: He expected Ayan's mobile app and website became a P2P platform connecting non-branding fashion stores like his business with potential buyers.

After receiving Ayan's request and understanding his background. Our team held a meeting to come up with a solution to Ayan's problems.He did not have a lot of capital resources so the business strategy which we recommend for him would be:

1/ By creating new sales channels in available time enterprises can quickly increase their cash flow. We recommend he put his products on e-commerce sites like Amazon, and social networking sites like Facebook, IG, Pinterest, etc. To help Ayan recover from getting out of the loss, the CEO of Capi Creative had a meeting with him to offer some short-term business growth opportunities.

2/ In terms of product strategy, we proposed he create a product MVP (Minimum Viable Product) to market his own product before we could create a whole P2P platform.

In his context, MVP played a vital role in helping him grow his own revenue. This is also evidence of success before he ever considers meeting investors and raising capital. The member of Capi Product and Ayan agreed on these strategies. And then we started.

RESULT OF WORK – Difference with other mobile apps/websites

Market Research

The first thing when starting a project, regardless of whether it is a business or a product, we all need to understand the target customers of a business.

We worked with Ayan on his target customer. He provided us with portraits of customers buying in traditional stores. However, when switching to the online segment via a website or app, the target audience may change.We started by doing a lot of surveys and interviews with existing audience files. Also, survey a few groups of potential customers.A lot of surveys and interviews were conducted, and finally, we came up with the following customer profile.

After we researched the market about the rivals, users’ interviews, and so on to build some personas. In this step, we conceived that customers from 20 to 30 years old prefer spending a great deal of time buying fashion online. Because:

Therefore, in the Ayan project, we decided to focus 100% on behavior-buying users from the age of 20-30 in Fashion eCommerce in the USA. Together we will start building a fashion e-commerce mobile app, a lean product MVP to launch soon, collect feedback, and if successful with this MVP, Ayan could raise capital and develop into a fashion e-commerce platform.

Implementation Process

The first step of building a software application is building a Software Requirements Specification. A detailed specification of what he needs to build.If this system is to be finished, it will require 3 essential components:

- 1 Website and mobile app for end-users/ buyers

- 1 Website or admin app for sellers

- 1 Admin Dashboard for admin to manage the entire system. In expert software development firms, a BA (business analyst) will be hired to write a comprehensive version of the software requirements specification.

If there is a good Software Requirements Specification you can tell the design team, that the developers’ team will do exactly what you want, and each function will be clearly described. However, since it was an MVP product, we decided to keep it simple. The Scrum framework was applied so that everything was done quickly and efficiently while minimizing errors. Each function in the Software Requirements Specification would be evaluated against three criteria: business, user, and technology goals. Surveys were continuously carried out to ensure the information we collected was accurate. After determining Ayan's requirements, we started designing. Customers do come to us with ideas, but they were often very vague.It's our responsibility to make them more concrete so that both the clients and the members of Capi Product were clear on what the customer is what they really want, and what they really need, and we provide them with a path to success. The design part is carried out according to the international standard process.

However, in order to optimize benefits and costs for Ayan’s project, we were building an MVP, and we needed to cut out some steps in the above process.

It’s true that theory is not all, in practice with finite resources, the use of those finite resources to create the highest efficiency is a very important thing. Sometimes our clients lacked the resources to do all the theoretical steps. However, we still maintained important steps such as Side maps, Screens maps, and Wireframes (see more details on Behance) were gradually built. Each ingredient was calculated for maximum efficiency.

User Experience & User Interface (UI&UX) design




According to a survey of a lot of people in the US, Capi Product members set up 3 banners about discounts, give vouchers, and hot deals with a big image to increase users' awareness that if they use the Ayan app they will save money more than other apps.

To check that idea, we interviewed again and explored it as a mental model, nearly 90% of participants would pause when they saw banners that we planned in advance.

Popular Categories

It's a significant idea in our team, and it is true that a number of individuals have not or little sense of style.

When someone clicked on “POPULAR CATEGORIES”, the users could easily mix and match fashion to dress for the occasion following Ayan’s offers.

Your Cart - On Sale

The ON SALE in YOUR CART is a standout feature in that project; users who could wait for discount coupons for pricey items may benefit from this.

This application allows both admin and seller set notifications for users. In addition, encouraging consumers to check Ayan's app more frequently.


Color Theme

The luxury and simplicity created by neutral hues make it simpler to emphasize products from black-and-white apparel to clothing in brilliant colors.

Additionally, our survey found that when Ayan's project's primary colors were black and white, participants between the ages of 20 and 30 felt more at ease focusing on making purchases.

Furthermore, we offer a red color to attract many consumers' attention to our discounted prices. This color also symbolizes a quick-buying stimulus in psychology.



On the one hand, for the title, we used serif – Adobe Caslon Pro that was the signature of fashion branding nowadays. In order to whoever opens Ayan’s app for the first time will make it clear that it is a fashion app, at least at this time.

On the other hand, sans serif - SF Pro was selected for the informational content because it’s especially beneficial for readers' eyesight when they had to read a lot of product information details in a short time.



In Ayan's project, we had 2 innovative ideas.
Firstly, from the users’ habits, we changed some button positions using many times to enhance the user experience whenever they only want to use one hand.

For example, instead of taking a lot of steps to click the “YOUR CART” which would be placed close to the center of the navigation, the users may readily verify their orders and payments.

[Your Cart image]

Second, after user interviews, some logos that many users would find confusing were modified by text or a note for users. During Ayan's project, we did 3 MVPs to connect between user experience and user interface after testing.


It is true that during the initial process, our team encountered a significant problem due to misconceptions about the user interface and user experience.

Because of being a global agency, we have done numerous projects with nations from Asia to the Americas, but mostly Asian. Our team too relied on previous Asia projects, as a consequence, we made a serious mistake when setting up many functions for Asian consumers in place of Americans in our initial step.

We encountered an unnecessary error, but we never gave up on the standard process of project implementation. Despite the fact that it’s going to take a lot of time, we still had to continue exploring the user experience in the USA to keep up with the deadline.Fortunately, we were successful and the CEO of Ayan appreciated our mobile app design.

The most crucial lesson we gained from Ayan's project was to never be subjective and always do user experience research before embarking on the project. Finally, we flexed our skills to fit Ayan's projects and other projects, as well as showed endeavor advances our knowledge of US customers’ insight into the fashion eCommerce.

In Conclusion

Admittedly, we learned a lot from this project, from how effective teamwork, and research information to put strategy consulting for Ayan to compete with online and offline fashion stores.
To continue the project, Ayan has engaged a project manager and an internal team of developers. Due to the fact that each business will have its own unique strategies or technologies, which are the secret of Ayan's business.

You can read the full project on Behance, here

Let's work