Graphics & Icons

Icons are indeed powerful visual cues that can enhance user experience and facilitate navigation within web applications. Users will have quick access to all features from the navigation bar.

We have five icons that will be used for our webapp. They are Home, My Inventory, Plus Icon, Favourite Collection and Community. These icons can be found fromhere.

Clotho Navigation Bar

Icons

Buttons

Quiz's button/ chips

Text button/ Icon button/ Text & Icon button

Graphics

Home

This icon will direct users to the home page and have access to visit their recent posts, outfit cards and community.The home icon is a home with smile.

My Inventory

Users can upload photos of their clothing items, accessories, and shoes to their inventory. Each item can be tagged with relevant information such as type, color, size, and any other details the user want to label.Users can easily browse through their inventory to view their collection. This icon is made with an inventory box and search icon.

Plus Icon

In our design, we feature a plus icon as a button, which allows users to navigate to two main functionalities. Upon tapping the plus icon, a popup window will appear, asking users to take photos or upload photos of their clothing, shoes, and accessories. In most social media apps, designers use the plus icon to enable users to post.

Favourite Collection

All outfit cards will be saved here and also can be edited, delete and create.

They can modify the items included in the outfit, change the description or title, and update any other relevant information as they want. This icon is a list with like.

Community

Users will have options to interact with all people worldwide to share their outfits’ photos or videos. People have chances to discuss the latest trends and fashion combinations or ask for suggestions or advice on pairing and matching pieces together.

This icon represents the worldwide mouse-clicking and conveys the idea of communicating the idea of global interaction or navigating the world wide web with a mouse click.

Icons

Rating App Experience Page

This rating page will show up after the user has completed most actions and tasks (eg, completing an outfit card, or uploading a set of clothing photos) within a few weeks. However, this page won't appear in a non-intrusive manner that the user will be asking if they want to rate their services.

We chose the cat as our app mascot and designed it in 3D modelling. The cat was given a default color and could change color according to the feedback of the user's experience.

Positive & Negative Experience

Our app will allow the user to rate their experience by clicking on the button below the mascot. A green cat represents a happy cat, a positive service experience, while a red cat with an angry face will mean a negative app-using experience.

Inventory Category Page

The Inventory Category Page serves as a central hub within the app, offering users a structured attractive way to browse through their stored products or items based on specific categories.

It provides a visually appealing layout that organizes inventory into distinct groups, streamlining the user's search process and enhancing navigation efficiency. Users can effortlessly explore various categories, ranging from accessories and clothing to household goods and beyond, enabling them to quickly locate desired items with ease.

The inventory icons align with the entire app's styles and use the selected color swatch. We also provide dark mode for different user's preferences.

Home Page

The Home Page serves as the primary gateway to the app, offering users a captivating and informative introduction to its features and content.

All page elements are matched with their color swatches and show different visual feelings and novelty experiences to ensure tailored to each user's preferences and interactions.

For the day mode background image, consider a vibrant sky scene with fluffy clouds drifting gently across a bright blue sky.

In contrast, for the night mode background image, imagine a peaceful nocturnal scene with a dark, star-studded sky.

Rate your app experienceGood experienceBad experience
Inventory category iconsInventory category icons_dark
Home ImageHome Image Dark Mode