Yemeksepeti&DeliveryHero

Yemeksepeti&DeliveryHero

Yemeksepeti&DeliveryHero

Chatbot Service Application Design as a web widget and as a mobile application feature

Chatbot Service Application Design as a web widget and as a mobile application feature

Chatbot Service Application Design as a web widget and as a mobile application feature

UI/UX Prototyping

UI/UX Prototyping

UI/UX Prototyping

About Yemeksepeti & DeliveryHero
It was a design pitch project, we wanted users to be able to use the chatbot by either typing nor voicing keywords or direct needs and then get quick results because this company has hundreds of variation restaurants and products on its platform.

Project's Goals & Challenges
Users can chat with an AI bot while shopping on e-commerce websites. According to the chatbot's recommendations, they are able to see on the left side area products, ads, etc. and they can insert some keywords to get the right result when buying products. Also, it provides an understandable and useful order summary. Additionally, I created a showcase for beauty products that are more detailed for instance cosmetics.

Design Process
The first step of the design process focuses on user needs and wireframes to enable me to iterate ideas faster.

For the web version, I used a grid based auto layout, with a chat box area on the right side and an expanding page with an ad banner area on the left side. After that, I agreed with the client on this layout. Once the wireframes have been approved I have started user interface for web cases.

When I finished the web version, I started the mobile version of the chatbot design. In the early stages of the design, I experimented with a few different layouts for the home screens. I wanted to interact with the users with different colored animated circles around the microphone button in the bottom center. I also tried a sound wave animation that moves while recording. Then I settled on a simple and clean circular moving animation around the button.

My Role
As a UI/UX Designer, I was responsible for UI components and their UX functionalities by doing alignment together with developers.

Design Tool Kit
Figma


About Yemeksepeti & DeliveryHero
It was a design pitch project, we wanted users to be able to use the chatbot by either typing nor voicing keywords or direct needs and then get quick results because this company has hundreds of variation restaurants and products on its platform.

Project's Goals & Challenges
Users can chat with an AI bot while shopping on e-commerce websites. According to the chatbot's recommendations, they are able to see on the left side area products, ads, etc. and they can insert some keywords to get the right result when buying products. Also, it provides an understandable and useful order summary. Additionally, I created a showcase for beauty products that are more detailed for instance cosmetics.

Design Process
The first step of the design process focuses on user needs and wireframes to enable me to iterate ideas faster.

For the web version, I used a grid based auto layout, with a chat box area on the right side and an expanding page with an ad banner area on the left side. After that, I agreed with the client on this layout. Once the wireframes have been approved I have started user interface for web cases.

When I finished the web version, I started the mobile version of the chatbot design. In the early stages of the design, I experimented with a few different layouts for the home screens. I wanted to interact with the users with different colored animated circles around the microphone button in the bottom center. I also tried a sound wave animation that moves while recording. Then I settled on a simple and clean circular moving animation around the button.

My Role
As a UI/UX Designer, I was responsible for UI components and their UX functionalities by doing alignment together with developers.

Design Tool Kit
Figma


About Yemeksepeti & DeliveryHero
It was a design pitch project, we wanted users to be able to use the chatbot by either typing nor voicing keywords or direct needs and then get quick results because this company has hundreds of variation restaurants and products on its platform.

Project's Goals & Challenges
Users can chat with an AI bot while shopping on e-commerce websites. According to the chatbot's recommendations, they are able to see on the left side area products, ads, etc. and they can insert some keywords to get the right result when buying products. Also, it provides an understandable and useful order summary. Additionally, I created a showcase for beauty products that are more detailed for instance cosmetics.

Design Process
The first step of the design process focuses on user needs and wireframes to enable me to iterate ideas faster.

For the web version, I used a grid based auto layout, with a chat box area on the right side and an expanding page with an ad banner area on the left side. After that, I agreed with the client on this layout. Once the wireframes have been approved I have started user interface for web cases.

When I finished the web version, I started the mobile version of the chatbot design. In the early stages of the design, I experimented with a few different layouts for the home screens. I wanted to interact with the users with different colored animated circles around the microphone button in the bottom center. I also tried a sound wave animation that moves while recording. Then I settled on a simple and clean circular moving animation around the button.

My Role
As a UI/UX Designer, I was responsible for UI components and their UX functionalities by doing alignment together with developers.

Design Tool Kit
Figma


© Nimet Uzunsoy Kurt 2023