SustainabiliTee was designed to aid inviduals who wished to decrease their carbon footprint when purchasing and seeking out consumer goods such as clothing, accessories, and cosmetics. This project cross-functionally explored market research, business needs, and product management/industrial management.
Role: UX Research, UX Design
Tools: Figma, Adobe Photoshop
Time: January 2021 - March 2021
We initially performed background research regarding the environmental and ethical implications of the fashion and cosmetics industries in order to establish the issue as significant and concrete. We wanted to focus on the awareness of consumers around these implications to create an informative and consolidated resource built in to accommodate established purchasing habits.
The above goals were responsible for driving the functionalities of the product so that different aspects of it were working towards fulfilling each goal and address the problems delineated prior.
Defining a vision and mission helped guide the design and development of SustainabiliTee’s platform. The vision implies our overall direction while the mission defines our objectives and how we hope to achieve the vision through our product.
A tentative timeline was generated, with time allotted for both Back- and Front-End development. This served to simulate how actual development may have been structured for our product in an industry setting. Understanding the logistics of project management is essential in any UX designer’s experience, and this project aided with my understanding of budgeting different project aspects through a realistic timeline from start to finish, though this project was aimed towards the first two items: Business Analysis and UI/UX Design.
Before ideating, we chose to flesh out a target market to inform the design and content of the product. Market research indicated that our target audience would skew younger, earn a middle to upper-class income, and be majority female. For this version and design, we opted to keep the geographic scope of the products and brands as domestic but would eventually broaden to a global scale.
The last step of our business analysis comprised of tentatively budgeting a Beta version of the product dependent on various facets. From our research on app development, establishing infrastructure, and costs from partnership with companies, APIs, and inventories, the overall cost generated was around $60,000, which was about average app development cost.
The information architecture consisted of four main components. An initial Onboarding would inform the user of how their personal sustainability preferences and purchasing habits would guide their app experience. The generated Home Screen would have different elements based on these inputs to allow the user to peruse products and brands ideal to them, or articles on topics of interest. A Search function would enable browsing beyond this home screen, and the user would have the ability to alter preferences within their Profile, also containing a history of scanned products.
With the target audience established, we wanted to generate an appealing product aesthetic and image. Thus, we played with dynamic triadic color schemes for the younger age group while leaning towards more subtle, neutral tones as per the serious nature of the app content. A split-complementary color scheme was used to create contrast between different atoms/molecules and place emphasis. We also developed a sense of unity within the design by incorporating shades and tints of the base hues that could really polish the screens.
The first aspect of Sustainabilitee is Onboarding. This fully explains the product purpose and functionality as the user can learn about sustainable characteristics through the products they scan or the items they search. Corresponding sketches/graphics were used to both visually supplement the text for each screen as well as enhancing the overall aesthetic of the application. These design motifs can be found on later screens to promote visual cohesion at different points within the app flow.
The personal Profile is where the user can set their overall preferences which guide their Home Screen experience. The preferences, grades, and prices set will be taken into account when filtering the most ideal options for that user and their sustainability goals. The grading system (explained later) will also be applied to the user in terms of how sustainable their behaviors and purchases have been, with a corresponding visual breakdown that provides further detail. This feature is especially useful for users who would like to be cognizant of their personal sustainable practices alongside those of companies and brands.
Companies would be available to the user and categorized on their Home Screen, as shown on the left most screen. The right most screen displays the search function alongside applicable tags to guide the search.
To provide a holistic overview of company and product sustainability, we established a grading system that would give an overall score (A, B, C, D, F) to a company alongside a percentage depending on how it was faring against others. The breakdown would be provided underneath and rely on a variety of factors such as CO2 emissions and waste reduction. The pie chart visual is interactive and the user can select a slice to see the details in an overlay, as seen on the rightmost screens. We wanted to give users a visually pleasing, effectively summarized snapshot that could accurately guide their opinions and decisions of specific brands and their products depending on the user’s sustainability goals.
SustainabiliTee’s main feature is the scanning feature, displays as a hover button in the middle of the navigation bar. Upon selecting it, the user would be able to use their camera to scan the barcode of any product and be led to its corresponding page on the app alongside the product rating and company breakdown. Having this impromptu method of gleaning a products sustainability information as an in-app function is what drives this product’s appeal and selling point. The user would be able to view previously scanned items in their Archive, which acts as a repository.
What comes next?
Upon generating initial screens, we would plan to undergo the following steps of the design and development process:
User Testing. This could be in the form of participatory design or usability testing to understand user behaviors within the current screen flow.
User Journey Mapping. Understanding the user demographics through personas would allow us to identify pain points, potential features, and delighters that could appeal to different types of users and increase customization.
Iteration. From the test analyses, the existing screens would be refined and retested until they satisfied the criteria set through the journey map.
Prototyping. Additional screens and features would be created for various use cases with their corresponding flows mapped out. These screens would be prototyped to allow seamless transition between screens and concurrently engage in front- and back-end development.
Deployment. Prior Beta testing and approval will lead to the eventual release and deployment of the product to the general public.