joanna-depowska

About The Project
App to rate shisha tobacco, based on multiple parameters. Depending on user input, it creates a ranking of brands and their flavors. Provides an extensive user profile with a smoker calendar and a "favorites" functionality. The application contains a map section that helps to find shops and shisha bars nearby based on the user's location.There is no live project like this existing on the Polish market, this is a brand new initiative.

Background
The idea was taken from everyday life. Many of my friends, including me, are hooked on smoking shisha. Thus, we are constantly looking for new brands, flavors, and ways to prepare the perfect hookah session. Watching my friends struggling with finding any helpful tips out there has triggered my UX instincts. Is it possible to create a space where shisha smokers can effortlessly find a review and a piece of advice that interests them? Let’s find out.

Problem Statement
Lack of current, reliable knowledge about the quality of tobacco flavors.
Difficulty finding a shisha lounge in a new town.
A fact, that users are unable to keep in memory all already tried flavors and recall their conclusions. The largest community exists on Facebook, which is not an independent medium.

Goal
This project aims to design an easy-to-use app that provides shisha tobacco information and its brand ranking. It contains a map with tobacco shops and shisha bars with their current assortment. The app intends to help shisha smokers to have their independent community.

Challenge

Building an easy to scale app in the area of specific expertise. Investigation of shisha smokers' behavioral model and highlighting the most relevant tobacco parameters. Coming up with a design solution for their presentation.

My role

UX and hands-on product design. I was responsible for creating the end-to-end customer experience.

Target group

Shisha smokers and enthusiasts, tobacco shops, and shisha lounges owners.

project plan

Two weeks of discovery and ideation, followed by three weeks of prototyping. Then two weeks for evaluating ideas and improve existing screens. One week for smooth UI finish.

Facebook groups

Strengths

A large and active community
The advice can be obtained quickly

Uncataloged knowledge
Repeatability of content
Difficulty in finding desired opinions as they get lost among all posts and comments

Weakness

Moja-shisha

Strengths

Weakness

Cataloged knowledge base
Possibility to contact other experienced users via private messages
A collection of tried tobacco flavors
Adding a tobacco to favorites
Adding a review for logged in users only

No possibility to check the availability of tobacco in local stores
Messy, overwhelming interface
Lots of redundant, obsolete functionalities
Low-dispersive, only Polish version available
Poor information architecture

Smokedex

Strengths

Weakness

Cataloged knowledge base
Mobile app and website available
Possibility to search by tobacco brand, name, or flavor
Not only flavors but also manufacturers and hookahs are being rated
Map functionality with shisha shops and lounges
Ranking of the top flavors in general and in a given month
Adding a review for logged in users only
Lots of information on tobacco provided
Multilingual
Possibility of creating own shisha mixes

Rating for tobacco is very restrained.
10-star rating system doesn’t provide an honest assessment for interested parties
No overall ranking for brands
Lack of information on how many users added tobacco to favorites
Confusing profile statistics without any tooltips or descriptions
Despite the availability of other languages, some functionalities are only in German
No possibility of chatting and sharing knowledge with other users

Age verification

Because the app is providing information about tobacco shops and can encourage people to smoke by being visually appealing I paid attention to creating a verification page.
‍
Since most users are more open to giving out their age than their full birth date I have decided to go with a one-text field, one-button approach for desktop. However, for mobile devices clicking a button is easier than filling in the field I decided to move with YES/NO options. I included brief text clarifying why the app needs this information.

OnBoarding

First-time use

On the account of app multifunctionality, I have decided to design series of interactions that help the user ease into the experience.

I designed and optimized the registration process for a thriving startup. I have decided to provide users 2 simple ways for joining Shishabase.
‍
One-click sign-in with social media channels or
a 2-step sign-up. To limit the number of fields upfront I decided to move secondary field “Display name” to the next screen.

Home

sort & filter

To avoid visual prioritizing and user confusion
I decided to combine sorting and filtering in one panel. By default results are sorted by popularity.

I picked high - low terminology because it’s straightforward and hence, fastest to interpret.
I hierarchized filters to display the most popular on top of the list. To improve the searching experience number of items in each subcategory is shown.

The user has few ways to adjust filters. He can adjust filtered results by removing his choices one by one. He can remove all filters with a single click from the level of the filter panel and the main view. Thus, the clear option is always on top.

Also, I provided a checkbox excluding flavors from the tasted list. This way users can find new ones in a flash.

Call-to-action

The add button in the left top corner serves as quick action for marking and adding reviews. After clicking it, plus animates into a cross to enable the user to close the modal without any thumb reposition. Clicking any place at overlay would also close it.

Adding tobacco to any list has the effect of filling in the corresponding icon. It provides instant
add-reverse action.

Rankings

I designed a tobacco card to show key elements without clicking into it. To meet business needs and improve conversion for shops and lounges I came up with buy and try call-to-action buttons. They show up only if tobacco is noted as available in any of the company profiles.

This kind of system is self-serving business leverage. If holders care about being well-positioned and gaining visitors they will care about keeping their profiles up to date.

Due to the dynamics of changes in monthly and weekly rankings, I decided to introduce extra labeling. Next to the tobacco position, it is shown whether it has been promoted or demoted in rankings.
The user is informed when the rank gets updated. The information then also appears on the home page.

While designing the home page I focused on personas goals and frustrations. Bearing in mind the main app features I have placed all top priority functionalities on the home page. Thus the user can complete tasks at hand as quickly as possible. If though he encounters problems site search is always visible. To make navigation as intuitive as possible I used recognizable design patterns as well as recognizable icons.

To keep the interface dynamic and engaging I have chosen to show weekly tops and recently added tobaccos. This way I am able to catch the attention of visitors who came without a clarity of purpose.

Top brands

Building on the individual tobacco rankings a collective brand ranking is established. The user can find out the country of origin, the number of ratings, and the total manufacturer rating. All tobaccos available in the base are gathered underneath.

Tobacco tab

In the main view, I put all the information which are of primary importance. Besides, each tobacco tab contains detailed information, spots where it's available at the moment, a Q&A section, and reviews.
I have included all the parameters that turned out to be necessary for users based on the survey in detailed information.
I have provided a clear overview of how many people have added tobacco to their favorites, how many have already smoked it and how many would like to try it. I found that note to be relevant during in-depth interviews.

I came up with the floating
call-to-action button. It sticks to the bottom of the screen and stays with users wherever they scroll. It allows them to take action whenever they’re ready.

When holders note the tobacco as available his shop or lounge is being displayed in the Spots section. The user can check if the place is open and then navigate there via Google Maps.

I decided to create a Q&A section for each tobacco flavor to support scannability. Every logged-in user can mark an answer as helpful. This way best answers are top-positioned.

Also, if the question is particularly interesting for the user he can follow it. Then he gets notified each time a new answer is added.

Adding reviews

When adding a review user is looking for tobacco from the base. If it doesn’t exist he has the option to add one by filling in a form. To facilitate this process in the form will only contain the brand, name, and flavor. App owners will be responsible for completing the rest of the data. After filling up the form user gets information that the crew is working on verification.
‍
When the tobacco is available in the base and ready to be reviewed user gets notified. This way he is engaged in a base
co-creation. The user stays satisfied and well-informed.

Because of the complexity of factors, I divided the process of adding a review into 3 stages. First, the obligatory stage is adjusted to the less experienced users. It contains only basic parameters provided with tooltips.

After analysis, I decided that 5 stars rating system is the best suited here. It makes the consideration process easier and gives a three-dimensional overview of a product. Allows to take an average and pull out the general rate.

The second stage contains key parameters for more advanced shisha smokers.

In the third extra comments and photos can be left. I prompt users with an example comment. It contains all the other aspects indicated as important in the survey but hard to close in a reliable rating system.

Map

To minimize the memory used by app I designed the experience bearing in mind API integration with Google. After entering the map tab the app asks the user for permission to share his location. Then, based on user position, places around him are being displayed.

I provided easy system to distinguish shops and lounges. If the user got lost on the map he can go back to his location with one tap. I decided to put a "relocate" button in bottom right corner because it’s the thumb zone.

To cover the need of checking places somewhere else I did a separate view for searching purposes.

I decided to design an in-between screen with basic information before transferring the user to Google Maps. This way users can filter out places already closed or too far away without the necessity of leaving the application.

Profile

To increase user engagement and add social aspects I decided to implement a followers/following system. This way users can follow other more experienced smokers or other users with similar preferences. They get notified of new reviews and favorites flavors added by followed prfiles.

Age verification

On Boarding

On the account of app multifunctionality, I have decided to design series of interactions that help the user ease into the experience.

First-time use

I designed and optimized the registration process for a thriving startup. I have decided to provide users 2 simple ways for joining Shishabase.
‍
One-click sign-in with social media channels or a 2-step sign-up. To limit the number of fields upfront I decided to move secondary field “Display name” to the next screen.

home

While designing the home page I focused on personas goals and frustrations. Bearing in mind the main app features I have placed all top priority functionalities on the home page. Thus the user can complete tasks at hand as quickly as possible. If though he encounters problems site search is always visible. To make navigation as intuitive as possible I used recognizable design patterns as well as recognizable icons.
To keep the interface dynamic and engaging I have chosen to show weekly tops and recently added tobaccos. This way I am able to catch the attention of visitors who came without a clarity of purpose.

sort & filter

To avoid visual prioritizing and user confusion I decided to combine sorting and filtering in one panel. By default results are sorted by popularity.
‍

I picked high - low terminology because it’s straightforward and hence, fastest to interpret. I hierarchized filters to display the most popular on top of the list. To improve the searching experience number of items in each subcategory is shown.

The user has few ways to adjust filters. He can adjust filtered results by removing his choices one by one. He can remove all filters with a single click from the level of the filter panel and the main view. Thus, the clear option is always on top.`
Also, I provided a checkbox excluding flavors from the tasted list. This way users can find new ones in a flash.

Call-to-action

rankings

The add button in the left top corner serves as quick action for marking and adding reviews. After clicking it, plus animates into a cross to enable the user to close the modal without any thumb reposition. Clicking any place at overlay would also close it.
Adding tobacco to any list has the effect of filling in the corresponding icon. It provides instant add-reverse action.

I designed a tobacco card to show key elements without clicking into it. To meet business needs and improve conversion for shops and lounges I came up with buy and try call-to-action buttons. They show up only if tobacco is noted as available in any of the company profiles.
This kind of system is self-serving business leverage. If holders care about being well-positioned and gaining visitors they will care about keeping their profiles up to date.

tobacco tab

I came up with the floating call-to-action button. It sticks to the bottom of the screen and stays with users wherever they scroll. It allows them to take action whenever they’re ready.

When holders note the tobacco as available his shop or lounge is being displayed in the Spots section. The user can check if the place is open and then navigate there via Google Maps.

I decided to create a Q&A section for each tobacco flavor to support scannability. Every logged-in user can mark an answer as helpful. This way best answers are top-positioned.
Also, if the question is particularly interesting for the user he can follow it. Then he gets notified each time a new answer is added.

adding reviews

When adding a review user is looking for tobacco from the base. If it doesn’t exist he has the option to add one by filling in a form. To facilitate this process in the form will only contain the brand, name, and flavor. App owners will be responsible for completing the rest of the data. After filling up the form user gets information that the crew is working on verification.
When the tobacco is available in the base and ready to be reviewed user gets notified. This way he is engaged in a base
co-creation. The user stays satisfied and well-informed.

Because of the complexity of factors, I divided the process of adding a review into 3 stages. First, the obligatory stage is adjusted to the less experienced users. It contains only basic parameters provided with tooltips.
After analysis, I decided that 5 stars rating system is the best suited here. It makes the consideration process easier and gives a three-dimensional overview of a product. Allows to take an average and pull out the general rate.

The second stage contains key parameters for more advanced shisha smokers.
In the third extra comments and photos can be left. I prompt users with an example comment. It contains all the other aspects indicated as important in the survey but hard to close in a reliable rating system.

map

top brands

To cover the need of checking places somewhere else I did a separate view for searching purposes.
I decided to design an in-between screen with basic information before transferring the user to Google Maps. This way users can filter out places already closed or too far away without the necessity of leaving the application.

profile

Usability testing

I have recruited 5 users in order to test few aspects of my product:
‍
1. Understandability of the concept - is it clear to users what it is for and what actions can be performed with it?
2. Hierarchy of elements - are the most important elements noticeable and easily accessible?
3. Terminology - whether the language and terms used in the system are fully understandable, friendly, concise and informative?

To assure meaningfulness of conclusions and observation I have created a research scenario with tasks to be performed by users. Each task was appointed to motivate the user to use a specific functionality without prompting and facilitating the task at the same time. Based on the results I improved my design and created second prototype version of the application.
‍
Introduced changes:
1. Location of YES / NO buttons such that the most often chosen option (YES) was on the right side on the screen in the thumb zone.
2. Parsing user e-mail to his user name in case he doesn’t provide any in order to prevent repeatable usernames.
3. The list of cool avatars to choose.
4. Infinite scroll of search results to provide more frictionless experience.
5. The distance from the user to different shisha places provided on the map and spots list.
6. The number of results showing in the places search on the top.
7. Increased the size of location icons on the map.
8. Possibility to save a review as draft.
9. Showing new, promoted and demoted position in every ranking.
10. Change the terminology from light / dark to Virginia/ Burley as more informative for smokers.