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.
