The Design Journey

How we came up with Intrigue and the process behind it.

01

Design Concept

Intrigue had numerous changes before its final concept.
Mobirise

Our Early Concept

The concept of Intrigue didn't start off as a clothing application. It started off as a financial bill management application to help users pay various bills from a single location which would also let users manually add statements and send alerts of upcoming bills.

Mobirise
It was designed to save time 

It targeted people who are disorganized or forgetful and people who are too busy. It's goal was to help users stay organized, stay on track and to manage money without spending too much time.

02

Design Change

The concept did not flesh out the motives of our mission statement of trying to help users spend less time on their tasks.   
Concept Change

We changed our concept to help users find a way to be exposed to different types of clothing apparel from various brands. 

Mobirise
03

Initial Prototype

How Intrigue initially looked like.

 

Mobirise

Login 

Intrigue's login screen initially had a vibrant blue colour scheme.

Mobirise

Home 

The home screen lacked clarity for certain visual elements such as the arrow in the top right corner. It created confusion for users on how to utilize the app; there were no tutorials or graphical indicators. Additionally, it did not match with the login screen's colour scheme. 

Mobirise

More Info 

Difficult for users to get to this screen as there were no visuals indicating that they had to tap on the image to view more info about an item. As well, the almost translucent background made it hard for users to read the text that is written.

Mobirise

Filters

The earliest iteration of the filters function involved a mixture of multiple choice options and search settings. The user could add a constraint by searching from a list of options and adding it to the filters, such as specifying which brands they would like to see in their feed.

04

Second Prototype

After receiving feedback on the initial design, we continued to iterate.
Login

We revamped the colour scheme and went for a more neutral aesthetic.

Home

We made the product's image appear more like a button that can be pressed to view more info about it. We added tabs at the top to easily access the featured and discovery tabs. 

More Info

We made the background completely opaque to ensure readability. We also added a carousel to view more images of the product.

Discovery

Originally, the discovery tab was a way to browse the entire clothing catalogues of different brands. From the tab, the user would see a list of brands that Intrigue is partnered with, and by selecting one of the brands the user would then be shown the items they are selling.

Filters

The next prototype changed the filters to be more consistent with each other, as testing and feedback showed that our initial method was overly complex. With this version, the user had a limited number of preset options for each filter they could select or deselect.

Favorites

An important element to the application was a way to track articles of clothing that the user tagged as their favorites. Originally we envisioned this as a shopping cart, but in the end we opted to make it a simple list of favorites. This particular page was simple, and accomplished what it needed to in early iterations and so did not require much revision. The user is able to review favorite clothing, remove it from their favorites list, or look at more detailed information on the clothing and go to the retailer website for it.

05

Final Prototype

This is what we ended up with.
Mobirise

Login

We kept the login screen from our previous iteration as there were no issues with it.

Mobirise

Home

We eliminated the featured tab and kept the home and discovery tabs as we realized we could make the featured tab the home screen instead. We updated the visual look of the tabs to increase clarity for users. Furthermore, we changed the thumbs up/down buttons and added an X and a heart to ensure that the users know it's going to their favourites list. We swapped out the arrow for text that says UNDO. Lastly, we added a mini animation to show how to view more info about a product. 

Mobirise

More Info

We added the X and heart buttons below the product's images for user convenience. We kept everything else the same as it was working well. 

Mobirise

Discover

We quickly found that there was not much point to this tab, especially with the existence of the featured tab (which eventually became the new home page). At the same time, the home page of our original design seemed less useful as a landing page than other alternatives we had found. As a result we decided to shift the original home page to become the discovery page, and did away with the original version of this tab.

Mobirise

Filters

For our final prototype, we found that the new version of the filters was a significant improvement, but found there was still confusion. Specifically, the price filters in the second prototype were too vague, so for the final version we made each option select a range of acceptable prices.

Mobirise

Try the Demo

Our final prototype allows users to explore the application, filter their discovery page, and browse through a variety of apparel, discarding the pieces or adding them to their favorites list as they wish.

© Copyright 2021 Seotatop, All Rights Reserved.