Background

STYBERRY is an online publishing platform that allows fashion bloggers to create their fashion blog with no technical skills and monetize it. It is also a source of inspiration for fashion lovers, as they can follow their favorite bloggers in one place.

It is a personal project of mine and it was created from scratch: from idea to development.

Goal

Design a mobile-optimized website that is easy to navigate and appeals to fashion and lifestyle bloggers as well as people who like fashion. Make it easy for non tech-savvy users to create a blog, write blog posts on the platform and share them on social media.

Scenarios

In designing the product it helps to imagine a few real life stories of how actual users will use the product.

Scenario 1 – Mike – Anonymous Blog Reader 
Mike is a fashion-addict. He likes reading blog posts. He opens STYBERRY ’s homepage and clicks on a blog post that he finds interesting. After reading the blog post he shares the blog post on twitter via the share button in the post and later clicks on a product that he found in the blog post, which redirects him to a merchant’s website.

Scenario 2 – Stacy – Blog Reader
Stacy has read a couple of articles on STYBERRY and likes some of the bloggers there. She really likes one of the bloggers, and she decides to create an account on the platform, so she can save all her favorite articles to her profile and read them later.

Scenario 3 – Macy – Blog Publisher 
Macy signs up for STYBERRY and followers a couple of bloggers. She comments on a lot on articles and gains confidence in using the website. One day, she decides to write her own blog post. She can also choose to link products (using Styberry) inside the blog post, so her readers can shop what she recommends. By publishing the post she starts receiving notifications about other users that comment on her post and starts earning money by people that clicked on the affiliate products from her post.

Color Palette and Typography

Choosing the fonts and the colors was an essential part of the design process. I chose purple as the main (accent) color, as it not only gives a sense wealth and luxury, but as it is also associated with creativity, I thought it would be a perfect fit for a blogging website.

Regarding the fonts, I thought that the combination between Abril fatface and Roboto Light was in the art direction I wanted- bold and fashionable.

UI Elements

STYBERRY was carefully designed, following the Atomic design principles.
For example, before creating the homepage or the profile page, which are the most important pages on the platform, I took the time to design the main navigation header, the sidebar, the profile page header, the blogpost cards, as well as the blog cards as separate entities. See some examples below.

Final Design

Homepage

Blog Post Page

Blogger Profile Page

Blog Post Editor feat. Product tool

Statistics Page

See it live: www.styberry.com