Mar 2016 - Sep 2016

Styberry - blogging platform for fashion bloggers

See live project

Platform

Web (responsive)

Tools

Scope of work

Market research, User Research, Wireframing, User Interface Design, Prototyping, Design Handoff

About the project

Styberry is a personal project. The idea for this startup was created and validated during my participation in a startup accelerator program in Berlin called The Founder Institute.  After that, me and my co-founder decided to pursue the idea and launch it to the public in 2016.

Project 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.

My tasks

  • Market research
  • Conduct and evaluate user interviews
  • Competitive product research
  • Create high-fidelity wireframes
  • Create a Style Guide
  • Create a UI library of components
  • Create responsive UI design mockups for web and mobile
  • User testing and product optimization
  • Documentation and design hand-off

Use Case 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.

User Interviews

We spend 2 months in the user research and testing phase. Multiple user interviews were conducted and transcribed so we can get a better understanding of what the pain points of the bloggers are and what features we can build into our product.

Here are some of the key assumptions we tested:

  • People that read about fashion want to have all the blog posts in one place.

Readers of blogs are having difficulties in following multiple sources about fashion and our product will solve that problem for them. Bloggers are at so many places that you actually can't filter and follow them simultaneously ( you need another tool for that ). People are currently using aggregators to follow bloggers (Instagrammers).

  • People like to buy products while reading a blog post.

It is a common practice that fashion bloggers post pictures of their outfits. They insert affiliate links in their posts to make the outfit buyable. The readers are not annoyed by this practice. More over, they would be if they see a nice product and they don't know where to buy it from.

  • People are annoyed by paid blog posts.

Sometimes fashion bloggers are not motivated to write blog posts for free and they make paid reviews / posts. The problem with fashion bloggers is that there is a certain circle of well-known bloggers that get approached by designers to write about a specific topic / product for money. Thus, their blog posts are not trustworthy.

Each assumption was tested in a set of interviews. We talked to 10 bloggers on average per assumption.

Once we finalized the product features we loved to the design phase. I was responsible for the whole product design.

Ideation phase (wireframing)

Around 2 weeks I spent in drawing wireframes on paper and getting feedback about the technical difficulty from my co-founder. It was quite difficult for me to translate all the date we got from the target users into actual product features. However, I persisted and managed to come up with several initial features as well as the overall design of the homepage, the blog pages and the user profile pages.(as stated in our MVP)

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 Design

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.

The UI Design Library created in Sketch

Back in the summer of 2016, Sketch didn’t have nested Symbols. So, we came up with the idea of creating a library of components, that can be re-used. And then, once a component was created, I would paste it in the relevant screen. Thus, a coherent design system was created.

Project release and design enhancements

All design files were handed over to the development team and 4 months later, the product was finally live! Styberry was officially released in September 2016. After onboarding the first 20 users, I started making small design enhancements based on user's feedback.

Project outcome and lessons learned

Styberry was active for about six months after launch. Even though I kept close contact with the first users and we were constantly trying to improve the product, it was really difficult to secure seed funding as we failed to scale the product.

If I had to validate an idea again, I would probably create a prototype first and use external tools that already provide some functionalities. This would save time and help ideate the initial MVP.

Nevertheless, we had fun creating an entire product from scratch and being able to dedicate an year to just exploring and failing in order to learn what not to do in the future.

Ready to start your project?

Send me a brief project summary and I will get back to you within 48 hours. You can also send me an email directly to : hi@iglika.co

Thank you! Your design inquiry was received, you will hear from me soon :)
Oops! Something went wrong while submitting the form.
"
Iglika is an experienced professional with a rare combination of design, business and collaboration skills. She has extensive knowledge of the market trends and actively develops new design solutions for solving complex business problems.
Johan Engelbrecht
Creative Director (Brand/UX)
"
Iglika was a great addition to two teams with legacy design libraries and new features that required UI design and user research. Highly recommend her UX / UI design skills and understanding of B2B & B2C business processes.
Nakeema Stefflbauer
Senior Product Manager, Ergo Digital IT
"
I not only enjoy working with Iglika because she delivers excellent results, in a short period of time, but she helps me to express my ideas and makes me look great in front of my clients.
Oliver Beyer
Head Of Account Management