Web User Profiles

UX/UI

Client: Supergreat App
Roles: Designer
Year: 2020

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.

user-profiles-1

The App

The company co-founder, Dan Blackman, led the product design on the mobile app, while I took responsibility as the sole designer updating the web experience.

I took the existing designs on the app and modified the user profile modules so that they would work for the web.

2xiphone-transparent-2

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.

sketch-screenshot
screen06
Full state "videos" section
screen01-1
Full state "shelf" section
screen03-1
Empty State "videos" section
screen02-1
Empty state "shelf" section
Back to top Arrow