Website Redesign

Appreciate is a social commerce platform designed to help people curate and showcase their most meaningful possessions, turning the "stuff" we own into a digital portfolio of our unique styles.

After the completion of the appreciate rebranding project, it was important for us to make sure that our website matched the new look and feel of the brand. We started by completely redesigning the layout of the website, taking into account our newly chosen color pairs and patterns that we had created as part of the rebranding process.

---

Quick Summary

︎︎

My Role
Visual Designer

Problem
The Appreciate site experience no longer reflected the brand and provided a confusing product experience to users new and old.

Solution
As part of the team at Appreciate, we redesigned the website to align to the new company branding and bring consistency and clarity to who each page.

Contributions
• Integration of new brand styling to UI
• Creation of brand UI guidelines & governance
• Wireframing
• Component design
• Page layout design

---

Full Breakdown

︎︎

The Foundational Elements

We began this process with defining how the new color palette and typeface would be used in the system.

For the color palette tokens more specifically, this involved defining the user personas the site needed to be tailored to and how they should be distinguished. The question of “how would a user be able to quickly tell if a page was for a brand partner, another user, or a specifically Appreciate branded page?” became a driving point of exploration.

   

After much deliberation, we settled on a distinct color combination for each area. Appreciate brand focused pages would be styled primarily in the hero colors of rich purple and lively green. Owner pages would have a more subtle color style, utilizing relaxing green and soft peach, as to not overpower the products in their digital collection. Partners pages would utilize vibrant purple and yellow tones to highlight our collaboration and pop against the normal site content.

Defining the structure

At the same time as the token exploration we also began to strip back the site to its foundational blocks, focusing on the content needs that would then inform how we incorporate the new brand styles.

Building the blocks

With many of the token styles and content structures defined, we started iterating on component designs. Through this work we explored how the different segment colors would flow into the components them selves, such as branded buttons or general purpose form elements.

One aspect we noticed when iterating on the overall system was that the initial yellow tone used wasn’t meeting AA accessibility requirements when used on interactive elements. We opted to darken it for these use cases limiting the original tone to graphic elements and background colors.

Being web3 based and an emerging technology, it was important to build excitement and drive home key features of the product. This led to a very graphical and photography driven experience. Visually showcasing Appreciate app in bitesized engaging bits of content helped to breakdown a complex product for any user to understand no matter the tech literacy.

Conclusion

︎︎
Through a rapid 2 months of design work, and many more in development, we deployed an enhanced site experience that met accessibility standards, brought clarity to the product offering, and positioned our brand cohesively across our digital landscape.