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.

gallery/ai2
gallery/ae

Background

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 : 

gallery/xd

Project

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.

gallery/sw-research

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.

gallery/sw-conc

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.

gallery/sw-sketch

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.

gallery/sw-wire
gallery/sw-fe

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.

gallery/sw-dev

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.

gallery/sw-mask

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.

gallery/sw-arch

Below is a video playthrough of the final created application.

gallery/sw-fin