As the Supergreat app developed more features, the team considered ways to update the web experience so that it could develop parallel to the app. At the time, it was only possible to log in to your profile and use video tools on the mobile app. The website only served as another viewing option for users to read articles or watch product reviews. To develop the web platform experience in tandem with the app, one of the first design steps was to create user profile pages accessible on the web.
The main components of a Supergreat user profile are uploaded video reviews, “shelf” items (products that a user can choose to feature), a “holy grail” product which can be highlighted as a user’s favorite product, and a personal bio section. This bio also includes information on a user’s hair color, hair texture, skin tone, skin type, eye color, and horoscope — these details are included so that other users with similar features can have a reference for how different beauty products might perform as they watch reviews.
I designed in Sketch and used Zeplin to allow engineers to inspect the HTML and CSS seamlessly. Responsive mobile and tablet designs were also included in the process using a 12-column grid breakdown.