Streetwear Application Design UI/UX

This project was created as part of my University Dissertation, the aim of the study was to create a mobile application that aids users in finding streetwear online. With the increased popularity of streetwear in today’s society, these items are becoming rarer making them harder to locate.
The research methods used as part of this project has indicated both a need for such app and key issues to overcome later in the design phase. With the help of user research it was discovered that there was multiple features that could be added. These features included adding a how to guide, masking instructions and a brand archive.



To begin research was conducted in order to gain initial data before starting to building the prototype. I began by creating a simple 10 question survey that was then sent out to a range of different users within a streetwear group online.  The data collected from this helped define and also highlight the issue's that other users are currently experiencing within the streetwear community. The data found helped to create a mood board that collate's first thoughts on the style, theme and colour for the design.

Brief : Honours Project

Applications Used : 



Once the research was done I started to draft concept sketches, detailing the first the thoughts I had for the prototype. The idea for the application begins with the user uploading or capturing an image of the item they want to locate on their mobile device. The user then needs to select what item in the image they are trying to locate information on. The application then searches for the item and displays all the information that the user now needs to find the item online.


Next a breakdown of what screens and tabs that were needed were created. Initial sketches were created for each screen focusing on the different layouts that could be used for each. Below is some sketches of different ideas I had for the Gallery Page of the prototype.


Wireframes were constructed using illustrator in order to be tested by different users. This included creating the pages and buttons that will be on each page throughout. Conducting  the user testing helped to gain a better idea on what oppertunities the application has. This has also gave further insight into more needs that were initially missed.


Once the wireframes were updated it was time to begin adding the design to each of the pages. Below is an example of the development of the item screen. Adding features and styles that have been influenced from the different research methods found throughout project.


The main issue that user testing discovered was the mask screen. The users were becoming confused/frustrated with what was being asked of them. To fix this issue an overlay animation has been added that teaches the user how to use the feature.


Below is screens that show the movement created using Adobe XD's Auto-animate feature. When the user selects the next square, it adjust's scale between the selection, creating a more dynamic and engaging experience.


The end protype that was created inlcudes an archive allowing users to browse previous collections of their favourite Streetwear brands. The final prortype shows great potential to be developed into a working application and has plenty of room for improvement. Some things that could be added to is more streetwear brands gathering a wider audience and the possibility for the search to take to an external online marketplace such as StockX.


Below is a video playthrough of the final created application.