Teeleh application is a place for trading video games and any other related products. The goal of the project was to create a peer-to-peer market without an intermediary third party where individuals can buy and sell their products directly.

Teeleh has been developed by a team of the University of Tabriz's B.Sc., M.Sc., and Ph.D. students for Android devices with the purpose of facilitating buying, selling, and trading video games.

GameStop stores are probably the world’s largest video game retailer that offers the best selection of new and preowned video games in both physical and digital formats. However, they recently announced that they are closing up to 200 stores worldwide. In recent years, people have mostly preferred to buy their video games from digital distribution platforms. This may be due to the reason that it’s easier, more convenient, and even cheaper. Teeleh application is a place for trading video games and any other related products. The goal of the project was to create a peer-to-peer market without an intermediary third party where individuals can buy and sell their products directly. Teeleh means Marble (toy) in Persian.

The first step was to create wireframes in order to clearly demonstrate how the application will function and to define information architecture and content. For this, I decided to draw low-fidelity sketches using pencil and paper. I end up drawing 29 samples of different application pages.

The second step was to visualize wireframes in detail. I chose Adobe Illustrator in order to implement wireframe ideas. Pink (Hollywood Cerise or EC008C) was chosen as the primary color because it represents playfulness and joy. At first, we tried to concentrate on trading video games in physical format. Then, we decided to take it to another level and add some features like trading video games in digital format to the application. During the implementation process, we made a lot of changes to the user interface. For example, in the navigation bar, there was an icon that gave access to the blog page. But since we didn’t have human resources to create exclusive content, we decided to change it to a notification center.

In order to reach a more dynamic user interface, I decided to add some animation to the application. The animation was created using Adobe After Effects and implemented on the android application using Lottie. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real-time, allowing apps to use animations as easily as they use static images. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin. The extension is bundled with a JavaScript player that can render the animations on the web.

During the design process, I have applied huge modifications to certain pages. In fact, the more I learned about material design the more I got excited to put my knowledge to work. One of these pages was Login and Signup. In First Design (wireframe) I designed a tab to switch between login and signup. In the second design, however, I decided to add more motion and switch between these pages vertically. But implementing this idea as an android program take much time and sometimes it was even impossible. Thus, in the final design, I used static but classic visual elements.

Teeleh was the very first project that introduced me to the world of the interface, experience, and interaction design. At the time being, I was working as a full-time network engineer who spent his free time learning graphic design principles and tools. I was trying to change my career and that’s why when I get the offer to work on Teeleh, I immediately said yes. At the beginning of the project, I had the mindset of an artist thinking that the more beautiful the interface is the better. That is why I created designs that were basically useless! Over time, I get to know the importance of accessibility, usability, and desirability of a product. I learned different steps of product development and the role of a designer in each step. I learned how crucial it is to have a clear image of the user’s needs and values. I realized the importance of user research in business value creation. I familiarize myself with various concepts including stakeholders, cognition distribution, affordance, signifier, prototyping techniques, lean UX, mental model, etc.

• Iteration, Iteration, Iteration: at the time, I wasn’t familiar with the agile UX methodologies. Thus, I didn’t quickly iterate my designs. However, I get to realize that the best approach in a startup project is to combine human-centered design with lean UX in order to get the best results.

• Micro-interactions: I have tried choosing sharp colors and using animations in the interface. However, I get to realize that micro-interactions could have also been utilized in the interface design. Since the gaming community was one of our targeted users, they would have loved this feature. It would also help with the enhancement of direct manipulation sense.

• Customer segmentation: We only categorized our users based on their age group which wasn’t clear enough. Our targeted users were primarily teenagers and I have gathered their needs. However, the fact that we didn’t have a clear image of our users group prevent us from knowing who is more profitable for us.

• Minimum viable product: We didn’t take the time to validate our MVP and see what features should be included in the early version of the Teeleh application. This was a huge mistake as we never get any feedback that would help us with the improvement of both design and development.