Blossr — live plants blogging: case study and showcase
A spot for live plants lovers and thought sharers
About Blossr
Blossr — is a lovely blogging platform for live plants lovers. It is created to gather those who love freshness and are kind to the environment and our green homies. The major feature about Blossr is that anybody is able to create their own channels and start blogging out of the box. But the main goal is to spread knowledge around and share thoughts on anything our users take care of.
🎁 Features
- Interesting yet inspiring feed;
- Ability to view, buy or even suggest your own accessories;
- Members and channels;
- Favorites and recommendations (based on favorites);
- Posting, editing, commenting and appreciating;
- Share and spread (that’s the goal);
- Converse (by commenting, mostly).
My role
I’ve done everything what you are seeing here.
- User experience design
- User interface design/IA
- Logo design
- Content
- Illustrations
- Visual design
🧻 User experience approaches
As any digital product it should and must be user friendly, speak to people and gather the globe or at least specific types of people together.
To make it real, we need to be certain with the idea and the goals.
So the first approach behind the scenes, as we develop any product for human beings is ideation.
Here come 5 UX planes (as of Jesse James Garrett):
- Strategy — Why are you creating this? Who you’re creating it for?
- Scope — What features and/or content will your product include?
- Structure — How will users interact with it?
- Skeleton — How will information be presented?
- Surface — How will the final product look?
Now you can see, that the decoration, visual instance and overall look of the product is the last step of creating the product. It has nothing to deal with design itself, it’s a beautiful package, not more. I’m not saying that it’s least important, but you should always bet on UX in the first place.
Let’s answer those questions right away.
Strategy
I am creating Blossr as a digital product — blogging platform for plants lovers, so they could share, learn and tell about live plants whether they’re house homies or outdoors folks. But it doesn’t end there, we’ve got a pretty spot for those who just like to converse. Blossr — is a cozy and modern warm home for all.
Scope
Yet again, Blossr is gonna include lots of interesting articles, delightful conversations among the people. Let’s put them all in the next string: profile, favorites, comments(as collaborative feature when working with someone on posts etc.), channels (sets of publications of the users and other content).
Structure
Users are going to interact with such product through the website for desktop, tablet and especially for mobile devices, on the go and in bed. That being said, it should be cozy, comfortable to interact with and function as a web/mobile application.
Skeleton
Information will be put as it is on blogs and slightly recall e-stores for ‘Accessories’ page.
Surface
Blossr is gonna look like blog, obviously, and also bring up modern as well as natural sense of feel. The product is packed with natural and organic colors, sophisticated type and pleasant user interface elements.
🔬 Site map (by sections, blocks and pages)
✏️ Sketches
🔌 Home page wireframes
As Wikipedia says — a website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea.
The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.
Why I’ve emphasized that part? Because it is very important to conceptualize the overall functionality and features of any product or website before any visual approaches come in to place. First is strategy, and last is surface.
And of course, don’t forget about grid as it helps in structuring in the first place.
Structured elements and content are helpful in the very beginning, not to only save time and know in what direction we’re exactly moving, but also populate it on other pages of the website.
The final product could look likewise, as it’s unnecessary just throw blocks of elements around pages — the mission of wireframes as a component of design is to build skeleton for future products, and it should be handsome.
But more on that later.
Let’s rethink adventure of users, so they can get what they want, as business will profit from that.
🗺 User journey map
It might seem confusing a bit, since all pieces are connected one to each other, however the exact dependencies are being marked with similar colors.
User Journey mediums are connected as well. The reason for this is that goal, which is painted orange is followed by action colored purple and while action is committed it meets the blue touchpoint, which leads to green experience that user could go through while using the product.
These bad boys are backed up with departments responsibilities in case something goes wrong or pretty well on a path our user walks.
So, now we know how website will work and it’s time to dress it up as a beauty.
🌂 User interface
Styles
For the main theme I chose warm and natural, but also slightly vibrant colors to bring up more life to the website.
Colors
Yeah, there they are — shiny as the nature at dawn.
Curious how to use them? Here’s a usage example of the palette.
Type
It was a simple decision of mine. Solid and sophisticated serif for headlines and titles backed with legible and easily scanable sans.
Here’s an example on how to use them.
Components
How is every product built? Brick by brick. Just like houses. That’s why they last long and keep us from rains and other bad things outside.
It’s important to create these bricks so they can handle any circumstance for users and for our needs.
Buttons (and other additional interactive elements)
Cards
Articles need their home too. Small and big ones.
Article cards (themselves)
Quick remark.
The bigger thumbnail on article card is more legible, than smaller one, and as we wanna make our users’ life easier, we should keep it in mind.
Of course the smaller one goes to the mobile screen, but for desktop you got plenty space to arrange stuff wisely.
It’s easier to recognize the bigger one on larger screen.
Home page
Profile page (kinda dashboard)
Not to offend other pages, but they’re sort of generic and pick their styles from home page.
It’s called ‘home’ for reason:)
But we’ve got here another important interface on a road. It’s profile page, where registered user is able to control own articles, saved articles and create new ones.
This page also allows user to suggest custom accessories for plants and edit plenty of personal information. Securely(obviously).
Wireframes
Simple, legible and easily scanable interface with IA in mind.
All things are seen and available at a glance.
A bit of lovely illustrations and a little of IA approaches did its thing. We came up with intuitive and handsome UX decisions for our user interface of the profile page.
This is what I came up with.
Such a handsome beauty interface you would say 😄. And I would agree!
- Interactions?
- Yeah, we got some!
Well, nothing’s perfect on the first try. I’d create prototype with as few as 4(four) connections using full width and length frames of my home page mockup. And I’m not sure whether it was my computer to take its last breath or Figma(Electron app) wouldn’t stop eating all of the resources of my machine.
Or even both of these options.
This is what I got in the first place.
*wait for it*
😅
But I am not ‘give-upper’, you know..
After making little voodoo stuff here and there, adjusting frames(art boards) and moving prototype to another empty file, I could then finally get what I wanted.
Here’s some little interactions on the Blossr’s home page.
And I got such result on my Elementary OS(Linux) machine. Same voodoo stuff just wouldn’t work on Windows no matter how I tried.
Just saying:)
Conclusion
This blog website is gonna be something new in the world of digital publishing. It was quite a challenge to come up with both intuitive and aesthetically loaded interface for such website. And I think I came up with something like personalized and standing-out product.
Thanks a lot for your time though. Thank you for reading and reviewing my case study. It was a long one!
Cheers.
Created by Daniel Denver — 23 y.o. UX designer from Berdyansk, Ukraine.
Ready for work and open for the new horizons of polished digital experiences.I’m on Twitter: @i_am_denver66
and on Dribbble: iamdenver
