Hopi Logo
Hopi App
Hopi Logo
  • CLIENT

    Hopi App - BOYNER

  • CATEGORY

    Gift and Shopping

  • ROLE

    UI - UX Designer

  • DATE

    2020

HOPI, owned by one of Turkey's largest retailers in textile goods BOYNER, is an application in which users can earn points by shopping. Earned points can be spent in contracted brands. The application is redesigned based on UI and UX.

PROBLEM

We saw that the target audience of the application wants to shop in a practical way. We understood that they want to view many options practically and quickly, and they even want the application to decide for them. Therefore, we focused on the interface models that users created by themselves. For example, we first showed the campaigns in this category to the users who placed the "Shoes" category in the 1st category field. In this way, we directly showed the users the products and campaigns they are interested in and ensured the application to be used effectively.

Hopi shopping

Design System

I prepared a design language according to the very colorful and fun corporate character of HOPI. Since the users of the application are mostly IOS users, I used IOS Human Interface Design guidelines. It has a lot of content and functionality. However, I still adopted a simple and minimalist style. I have enabled the design to show the user more screen effectively with interactions.

Typography

  • Roboto
  • H1- 36 Bold
  • H2- 20 Bold
  • H3- 16 Bold
  • H4 - 14 Regular
Hopi Teklif
Hopi Kategori
Interface Guidelines

Based by Human Interface Guidelines

Guidelines
Guidelines

Screens

Interface Guidelines
Interface Guidelines
Interface Guidelines
Interface Guidelines
Interface Guidelines
Interface Guidelines
Interface Guidelines
Interface Guidelines
Interface Guidelines
Interface Guidelines
Interface Guidelines

Design Notes

Main Screen

InterMain Screen
Favourite sytemChoose favourite categorySelect promotion easy
Why?

I created areas where the user can customize in the main screens, which is the first screen that meets the users. I also designed FAVORITES system that allows saving campaign products quickly and practically. The order of the categories determined with which campaigns the user can be reached. I also made possible that campaigns that concern all users can be selected by swiping left and right as same with Tinder cards, which I personally like.

Category screen

Category screen
Make aligment
Why?

I made it possible for users to arrange their own screens according to their interests. This also provided data for campaigns targeting users.

Coin screen

Coin screen
Make aligment
Why?

I designed an interaction to allow that users can view information of 3 screens on one single screen instead of viewing 3 screens one by one.