StreetWare - Application Design

Designing the e-commerce app for the newly rebranded platform.

Introduction

StreetWare is a newfound fashion brand focusing on particular styles that are mostly emo/grunge wear. One of the co-founders of the company is an app developer thus the design will focus on a mobile first app approach. However the created product can be used as the mobile part of a responsive webiste.

In order to develop this particular product, I chose to use the Design Thinking approach to guide me through the process. By following the steps, I was able to research thoroughly about the fashion e-commerce industry before I proceeded to analyse the problem and ultimately come up with a product solution.

Empathise

Because Design Thinking emphasises the importance of human-centred design, the first step of the process is to empathise. This essentially gave me the opportunity to gain some insight into the thoughts, feelings, and needs of the users.

User Interviews

I conducted interviews with users who are familiar with online shopping to identify their needs and pain points. Because a wide range of demographics enjoys online shopping, I interviewed a total of four participants between the ages of 18 and 50. Their professions varied from student, engineer, to homemaker.

Summary of findings from the user interviews:

Three out of four participants stated the importance of knowing the quality of the product.

Three out of four participants stated the importance of knowing the quality of the product.

Three out of four participants stated the importance of knowing the quality of the product.

All of the participants discussed the need for some kind of filters when shopping online.

All of the participants discussed the need for some kind of filters when shopping online.

All of the participants discussed the need for some kind of filters when shopping online.

Two out of four participants were motivated to find and buy clothes in a timely manner.

Two out of four participants were motivated to find and buy clothes in a timely manner.

Two out of four participants were motivated to find and buy clothes in a timely manner.

Three out of four participants were motivated to shop online because of its convenience and wide range of selection.

Three out of four participants were motivated to shop online because of its convenience and wide range of selection.

Three out of four participants were motivated to shop online because of its convenience and wide range of selection.

Three out of four participants said they only use their phone to shop online.

Three out of four participants said they only use their phone to shop online.

Three out of four participants said they only use their phone to shop online.

Some of the participants noted during the interviews,

“Sometimes, it looks good on the model, but that might not be the case for me.”

“I want more than one image of the product to get a better idea of what the product looks like.

"I like the idea of having a shop with out of ordinary style clothes."

Define

The next step in the process is to define. According to the research that was conducted I was able to figure out what kind of application is going to be created and who the target audience might be.

Problem Statement

Now that the persona has been defined, I came up with a problem statement that I could refer back to as I proceed with the design process.

How might we design a fashion e-commerce application for those who shop online so that they can have an efficient experience to find their style.

Ideate

In this stage of the design thinking process I am focusing on taking a creative approach and brainstorming ideas. With the findings I made earlier, I was able to come up with some ideas in my head on how the finished product might look like. I created a number of deliverables that could help me identify and visualize a solution.

Task Flow

I developed a task flow to show the ideal flow that the user would take to complete a task in the StreetWare app. In this particular case, it focused on finding and purchasing a product from the app. Working on this helped me identify the key screens for my design.

User Flow

Once I completed the task flow, I then proceeded to create a detailed user flow. This essentially illustrates the various paths that the user can take to complete a task. Creating this flow allowed me to think from the user’s perspective and consider the different options that the user has while using StreetWare's application.

Wireframing

Because the company is planning on creating an application for the e-commerce shop, I decided to focus on developing the screens for mobile version.

With some ideas in my mind I started to develop some wireframes for the application. With some sketches by my side, I began to develop several mid-fidelity wireframes in Figma.

These wireframes include the Homepage, Category Page, Product Page, Checkout pages.

Mood Board

Because the clothes remind me of the early 2000’s and the emo / grunge aesthetic, I created a mood board to reflect those ideas.

UI Kit

With the inspiration from the mood board, I started creating an UI Kit that aligned with the aesthetics and brand identity that I was aiming for.

The main focus point was the big bold black and white, however when it came to color, the accent had to be a strong pink to match the "emoish" aesthetic.

The models are being photographed in front of various colored backgrounds, these colors go from purple, red, yellow, pink etc. As this is something I do not have control over, I tried to match the color palette with the physical colors.

For instance if the model is standing in front of a purple background, the size indicators are going to match the backround.

Prototype

The next step in the process is to create a clickable prototype so that the users can test it out. Following this step allowed me to gather feedback regarding the product and try to figure out the best possible solution for the problem.

The workable prototype can be accessed here.

Testing

As the final step in the design thinking process, this step focuses on testing out the prototype. This is as close to the final design as it can get, however it still gives me the opportunity to evaluate whether my design solves the problem and redesign any parts of the product if needed.

Usability Testing

I conducted remote usability testing using a high-fidelity desktop prototype. It was conducted to test the flow of design, ease of navigation, and the extent to which the design accurately reflects the brand’s values. The test was also used to see whether the design solves the user’s needs and pain points that were captured during the research phase.

The test was conducted with the same participants.

From the home page, show me how you would find hoodies.

From the home page, show me how you would find hoodies.

From the home page, show me how you would find hoodies.

Find the Nocturne Hoodie and add it to your cart.

Find the Nocturne Hoodie and add it to your cart.

Find the Nocturne Hoodie and add it to your cart.

Purchase a product using the guest checkout.

Purchase a product using the guest checkout.

Purchase a product using the guest checkout.

Here are the key points from the feedback received:

Participants thought that the website could be inclusive by offering more size options.

Participants thought that the website could be inclusive by offering more size options.

Participants thought that the website could be inclusive by offering more size options.

There is a need to include an icon that allows the user to view more products at once on the Category Page.

There is a need to include an icon that allows the user to view more products at once on the Category Page.

There is a need to include an icon that allows the user to view more products at once on the Category Page.

Participants expressed the need to change the input field for Quantity on the Product Page to easily add more products to their purchase.

Participants expressed the need to change the input field for Quantity on the Product Page to easily add more products to their purchase.

Participants expressed the need to change the input field for Quantity on the Product Page to easily add more products to their purchase.

Participants wanted to have a button that show a sizing guide on the product page.

Participants wanted to have a button that show a sizing guide on the product page.

Participants wanted to have a button that show a sizing guide on the product page.

Priority Revisions

With the feedback provided during usability testing, I was ready to make the changes to some of my designs.

As the prototype was lacking a sizing guide, and the testing users were mentioning it, a sizing guide button has been added.

Final product

After going through all the steps of Design Thinking, I now have an application for StreetWare that can be used.

You can view all of the high-fidelity screens here.

Revisiting the problem statement.

How might we design a fashion e-commerce application for those who shop online so that they can have an efficient experience to find their style.

Including numerous images/videos of the product that allow the user to closely examine the quality of the product.

Including numerous images/videos of the product that allow the user to closely examine the quality of the product.

Including numerous images/videos of the product that allow the user to closely examine the quality of the product.

Providing a size guide, specific product details, and information regarding the model to allow the user to determine the sizes more accurately.

Providing a size guide, specific product details, and information regarding the model to allow the user to determine the sizes more accurately.

Providing a size guide, specific product details, and information regarding the model to allow the user to determine the sizes more accurately.

Implementing filters that enable the user to refine searches easily.

Implementing filters that enable the user to refine searches easily.

Implementing filters that enable the user to refine searches easily.

Next Steps

With the priority changes that were made, I can conduct another usability test to see whether the revisions have solved the issues that were previously brought up by the users. If needed, I would have to do another round of iteration and testing. Once these steps are complete, I can hand off the project to the developers.

Learnings

By incorporating the Design Thinking approach, I was able to empathize, define, ideate, prototype, and test. Through this particular process, I was able to understand the ways in which each of the steps could be used to help develop the final product.

By incorporating the Design Thinking approach, I was able to empathize, define, ideate, prototype, and test. Through this particular process, I was able to understand the ways in which each of the steps could be used to help develop the final product.

By incorporating the Design Thinking approach, I was able to empathize, define, ideate, prototype, and test. Through this particular process, I was able to understand the ways in which each of the steps could be used to help develop the final product.

During this project, I found the user interviews to be quite helpful as they provided insight that I originally did not think of. Doing so taught me the importance of removing bias as I conduct research.

During this project, I found the user interviews to be quite helpful as they provided insight that I originally did not think of. Doing so taught me the importance of removing bias as I conduct research.

During this project, I found the user interviews to be quite helpful as they provided insight that I originally did not think of. Doing so taught me the importance of removing bias as I conduct research.

Most importantly, I learned that design is an iterative process that requires much time and effort. Despite the fact that I came up with a product solution, there might be ways in which I can improve user experience with technological advancement over time.

Most importantly, I learned that design is an iterative process that requires much time and effort. Despite the fact that I came up with a product solution, there might be ways in which I can improve user experience with technological advancement over time.

Most importantly, I learned that design is an iterative process that requires much time and effort. Despite the fact that I came up with a product solution, there might be ways in which I can improve user experience with technological advancement over time.

Conclusion

As this was my first clothing application I made it was interesting how I would incorporate some of the fashion aspects into my design thinking. I feel like the product turned out to be user friendly and kept the emo/grunge aesthetic in the design. Even though I am satisfied with the product I made I feel like there can be multiple imrovements in the future in the application, that would make the experience even better.
With my newly attained knowledge and skills, I feel more confident in my ability to tackle new projects.

Home

Introduction

Introduction

Empathise

Empathise

Ideate

Ideate

Prototype

Prototype

Testing

Testing

Final product

Final product