UX Designer

System for creating
online stores

Heb / Eng

E-Commerce

advanced eco-techno Store

about E-Commerce project

Project details

This is not just a design project of an online store. I worked on creating a system of components, templates, adaptives and elements for convenient and fast creation of online stores. This helped the outsourcing company to take a large number of orders for the creation of online stores and do them in a very short time.

Designer workplace

my role

User Experience Designer / Visual Designer

“The war in my country had a great impact on many people. I had to work in cafes, co-working spaces, garages and parking lots. It helped to abstract and delve into projects much more strongly.”

DESIGN PROCESS​

The project path included identifying our customers’ business problem, understanding its nuances, defining user problems and needs, translating the design, creating low-quality templates, and creating screens for responsive design. This process was iterative and therefore helped to create more than one structure of online stores and ensure convenient interaction with customers and the development team.

Working on an idea

Repeated interviews with customers and analysis of this data were conducted during daily brainstorms. Creating personas and empathy maps helped to better understand both customers and users of online stores.

Repeated interviews with customers and analysis of this data were conducted during daily brainstorms. Creating personas and empathy maps helped to better understand both customers and users of online stores.

The designers of the team conducted research on competitors and used the best solutions in our project. The first stages were full of meetings with developers and managers, this helped to save valuable time in the future as well.

Research and Visualization

It was a long and interesting way to develop wareframes for various blocks of the online store system. Then the blocks were combined into full-fledged Internet pages. And the last step at this stage is creating screens for responsive design.

Product launch

Front-end developers have made code templates for quick implementation and use for various orders. The manager takes the order from the client, the designer makes a creative visual design, and the developers connect the design by editing the template code.

Alteration

After creating the first version of the online store templates, most of the processes were altered. And as a result, our company had 3 types of E-commerce systems. This helped to expand the customer base and start a very simple but creative process of creating online stores.

Design System
Online Store

The project path included identifying our customers’ business problem, understanding its nuances, defining user problems and needs, translating the design, creating low-quality templates, and creating screens for responsive design. This process was iterative and therefore helped to create more than one structure of online stores and ensure convenient interaction with customers and the development team.

Working on an idea

UX Persona
UX Person Interest
UX Person Reasons

Research and Visualization

Careers
Customers page

Even at the stage of researching competitors, daily meetings with the team and analyzing the structure of online stores, work was underway on building blocks (templates) for future screens.

Projects Page
Product cards
Product page
Responsive design screens were also developed in parallel – for the convenient work of developers. This saved a lot of time for the next steps of the project development.
Shop Cart
Testimonials Page

Product launch

Super fast design steps

Management

Here there is an interaction between the client and the company manager. Elaboration of the technical task and transfer to the designers.

Visual Design

At this stage, the designer gets acquainted with the technical task and makes a visual design of the finished templates. Depending on the client’s wishes, either super creative or strict and restrained design is made

Launching

Developers receive a design and connect it to ready-made code templates. Then there is a comparison of the design and the result of the front end. And finally the launch of the store and a happy customer.

eco-techno store

Colors

Colors

When the client approached our company, he already had a certain branding of his product. If his company did not have an identity, then we conducted a small survey and used his wishes in the selection of colors.

Fonts

Typography

We mostly had clients from Israel, so we used Hebrew-friendly fonts. If the site was in English, then we used a font style that corresponds to the identity and branding of the client’s company.

visual design desktop

Online Shop Products
Blog Page
Shop Home Page
Electronic Shop
E-commerce page

visual design mobile

Blog Mobile
Testimonials Mobile
Blog Page mobile
Cart Mobile
Product Page Mobile
Review mobile
Hero screen mobile
Shop products mobile
Product Characteristics mobile
Product card mobile
Blog menu mobile
About us mobile
Product settings mobile
Contact Us mobile
Blog contacts mobile
Card mobile

Launching

In this case, I will take as an example the visual design of one of the online stores made by me. I will also show the way to build blocks of pages after the competitor research stage, I will show work on different page layouts and the process of creating a responsive design.

Final thoughts

This E-commerce project transcends the mere design of an online store, it represents the creation of a comprehensive system encompassing components, templates, adaptives, and elements. The innovative approach facilitated the outsourcing company in efficiently handling a multitude of online store orders within remarkably short timelines. My dual role as User Experience Designer and Visual Designer played a pivotal part in this success.

Link to the website of the company in which I was able to implement this project: navoto.com.

Thank you!

Thank you for viewing!
And I thank the Armed Forces of Ukraine for the opportunity to work!

We will create a creative design for you and build a website from scratch.

My daughter's design

There is the creative design of my daughter Maria