As the Senior UX/UI Product Designer I was tasked with designing the foundation for website and app for Sustain Solutions, a waste and trash management company that provides reporting and analysis services to help companies reduce their environmental impact. My first step was to create a design system that would establish a cohesive visual style for the company and ensure consistency across all touchpoints.
I conducted a thorough content audit of the existing website and used the information gathered to create an information architecture for the new website. This included creating a sitemap to identify the main categories and subcategories of content and their relationships, as well as the main pages of the website. I then used the sitemap to design wireframes, which were simple black and white sketches of the website's layout, to ensure that the website's organization was clear and logical.
I was then able to design the home page of the website, utilizing the design system and brand style guide that I had created, and making sure that the visual style was consistent with the company's brand guidelines.
I handed the project over to a junior-level designer, who was able to use my design system and brand style guide as a foundation to design the remaining web pages and style the app. Throughout the process, I provided guidance and feedback to ensure consistency across all pages of the website and the app.
The launch of the Sustain Solutions website and app was met with positive feedback from the target audience, who were impressed with the easy-to-use interface and visually pleasing design. In addition to the positive feedback from users, the company has also seen tangible benefits from the detailed reporting and analysis provided by the website. The company has been able to identify areas where they can reduce their environmental impact and make more sustainable choices. I am proud of the work that I have done on this project and am thrilled with the positive impact it has had on the company and the environment.
Sustain Solutions is a socially responsible company that specializes in waste and trash management. They provide comprehensive reporting and analysis services to help companies reduce their environmental impact through the efficient management of their waste. They have been in business for several years and have established themselves as a leader in their field. However, their website and app have not kept pace with their growth and are in need of a redesign. The company had decided that it was time to invest in a custom designed website and a UI refresh of their app. The website and app needed to be easy to navigate and provide a seamless user experience for their customers. Additionally, a design system needed to be created and implemented to ensure consistency across all touchpoints.
Sustain Solutions had decided to white label an app for their waste and trash management services. This means that they would be using an existing app platform, rather than developing their own, and rebranding it as their own. While this approach has its benefits in terms of cost and time efficiency, it also means that Sustain Solutions had less control over the app's functionality. However, they could still apply a new user interface to update the look and feel of the app.
Account Manager | Copywriter | jr. Designer | Developer
Designing Sustain Solution's design system was an important step in the design process as it established a cohesive visual style for the company. The design system included elements such as color schemes, typography, imagery, and design elements such as buttons, forms, and icons.
Throughout the process, I ensured that the design system was consistent and cohesive. This helped to establish the company's visual identity across all platforms.
To create the information architecture for Sustain Solutions' website, I first conducted a thorough content audit of the existing website. I evaluated the existing content and organization, and identified areas where improvements could be made. I analyzed the website's current structure, navigation, and labeling to understand how users were currently interacting with the website and where they might be experiencing confusion or frustration. I also looked at the website's analytics data to see which pages were getting the most traffic and which pages were not performing well. With all this information, I was able to identify patterns and trends that helped me to determine the needs and goals of the website's target audience.
I then created a sitemap, which is a visual representation of the website's structure and organization. The sitemap helped me to identify the main categories and subcategories of content, as well as the relationships between them. It also helped me to understand how the different pages and sections of the website were interconnected and how users would navigate through the website. I identified the main pages for the sitemap as: The home page, Solutions page, Industries Page, Resources, and Blog. These pages were intended to provide a comprehensive overview of the company's services and offerings, as well as provide useful information and resources for their target audience. I used the sitemap to create a clear and intuitive structure for the website.
The process of designing wireframes using the sitemap for the Sustain Solutions website began with reviewing the sitemap and identifying the main sections of the website and the relationships between them. This helped to ensure that the website's organization was clear and logical, and that the user's journey through the website was easy to understand.
Next, I created wireframes for each page of the website. Wireframes are simple, black and white sketches of a website's layout, which help to communicate the placement and organization of content on each page. I used the sitemap as a guide to ensure that the wireframes accurately represented the website's structure. I also added notes and annotations to the wireframes, to explain the purpose and functionality of different elements on each page. I also took into consideration the user flow, making sure that the user journey is clear and intuitive, and that the user can easily find what they are looking for, with minimal clicks. I also made sure that the wireframes were responsive and optimized for all devices, so that the website can be accessed from any device and the user experience is consistent.
Once the wireframes were complete, I reviewed them with the rest of the team to gather feedback and make any necessary revisions. I received feedback from the team, including suggestions for improvements, and made revisions accordingly. This collaborative process helped to ensure that the wireframes were well thought-out and that all stakeholders were satisfied with the final product.
Once the wireframes for the Sustain Solutions website were approved, I was able to begin work on the design for the website's home page. Being aware that the home page would receive the most web traffic, I knew that this was the page that would make the brand's first impression to new visitors.
To accomplish this, I utilized the design system that I had previously created, which helped to ensure consistency. This included elements such as typography, color palette, iconography, and layout. I also carefully curated the visual style of photography to ensure that it was in line with the company's brand guidelines and design system.
Once I received approval on the high-fidelity design for the home page of the Sustain Solutions website, I was able to hand the project over to a junior-level designer to see the project through completion. Using the home page as a guide, they were able to take my wireframes and design system to design out the remaining web pages and style the app to match the brand guidelines.
The junior-level designer was able to use the design system and brand style guide that I had created as a foundation for their work, which helped to ensure consistency in the visual elements of the brand across all pages of the website and the app. I provided guidance and feedback throughout the process, ensuring that the design was implemented correctly and that the website's visual elements were consistent across all pages and the app. I also reviewed the work of the junior-level designer to make sure it met the needs and goals of the target audience, and that it was accurate and consistent with the company's brand guidelines and design system.
The Sustain Solutions website and app project was a resounding success. The use of a design system and brand style guide helped to ensure consistency across all pages of the website and the app, and create a cohesive and consistent user experience. The high-fidelity design for the home page served as a guide for the overall visual aesthetic of the website and the app, while the wireframes and the design system helped to ensure that the website's structure and organization was accurate and consistent, and that the user's journey through the website was easy to understand and visually pleasing.
The junior-level designer was able to take all these elements and design out the remaining web pages and style the app to match the brand guidelines, which helped to ensure consistency across all pages of the website and the app. This ensured that the website was easy to navigate, visually pleasing and consistent with the company's brand guidelines and design system.
The launch of the Sustain Solutions website and app was met with overwhelming positive feedback from the target audience. Users were impressed with the easy-to-use interface and visually pleasing design, as well as the clear and concise information provided on the site. As a result, the website and app have seen a significant increase in traffic and user engagement since their launch.
In addition to the positive feedback from users, the company has also seen tangible benefits from the detailed reporting and analysis provided by the website. The company has been able to identify areas where they can reduce their environmental impact and make more sustainable choices. This has resulted in a reduction in their environmental impact, which is a testament to the effectiveness of the detailed reporting and analysis provided by the website.