The simple tool to embed interactive web-stories in a website. Storeez.app is a side project that my friends and I developed. I take on the role of founder and designer.
problem.
90% of the all data was generated over the last 2 years. The development of LLM accelerates this trend to the speed of light. People have information fatigue, fear of missing out, cognitive impairment, loss of focus, stress, etc.
How can businesses keep customers' focus?
research.
Websites, blogs, articles, podcasts are works worse. The business needs a new communication channel: short, concise, and visual. This channel has become stories. Stories usage is growing, replacing other types of content in social networks.
Stories is already a user-friendly format. The business need the tool to use it not only in Instagram or Facebook, but also in the their product communications like onboarding, what’s new, survey.
minimal marketable product.
We limited the MMP (Minimal Marketable Product) to several JTBD.
When a user wants to use the service, he needs a way to sign up or log in.
When a content manager wants to prepare a content, he needs to be able to create a story efficiently.
When multiple stories need arranging or organizing, the user needs a way to manage these stories effortlessly.
When a user wants to make the story visually appealing, they need an easy way to add background images or videos, text to the web story.
When the story is complete and ready to be shared, the user needs a way to publish the web story easily, making it accessible to their audience.
design.
Approaching the design task, two questions arose: how to create a simple, pleasant design? How to save resources on developing the MMP?
The emphasis on simplicity and native approach is not coincidental, during the analysis of competitors and products that use stories in their user communication, the biggest problem was the complexity or lack of well-thought-out UX.
One of the resource-saving solutions was not to adapt the builder for the mobile version, but at the same time, to provide such a possibility in the future. I took this into account when designing.
authorization.
To simplify the user's authorization and save developer resources, I chose the path of authorization through Google Auth. And a backup option for users who do not have a Google account, authorization via email.
For email, I used the password-free auth pattern to reduce the scope of work. The service simply sends you a code on an email or a link for login.
stories manager.
The user can create, rename, delete, and publish stories. In the MMP, we decided against bulk processing to save resources, but I designed this use case for the future.
Also, to cut costs, we decided to display the total number of story views instead of full-fledged analytics.
background selector.
Any story is a concise, eye-catching shot to focus the user on information.
Creating a story begins with choosing or uploading a custom background or color. We supported video uploads, but didn't openly promote it due to some technical restrictions.
For choosing a background, I decided to connect several libraries with to be used freely license. The main one being Unsplash, and a few additional ones.
story builder.
The story builder is the main section of the product. It requires the utmost attention and simplicity of UX. I used skeuomorphism and present the workspace with stories as a table with the story pages laid out in order.
The active page immerses the user in working with the content on it, changing the page's playback time, and title.
The user can create new pages, delete, duplicate, or move existing ones. For the movement, I used an animation effect, as if we lift the page, move the others, and place it between them. This gives a simple understanding of what is happening with the page and creates a wow effect.
As you might have noticed in the video, hotkeys are thought out for most actions in the story builder.
text editor.
The adding an image for background was enough for MVP, but after communicating with the first users, I decided that this wouldn't be enough for the MMP.
Users find it important to be able to edit text not in an external editor, but right in the story builder.
Another insight I gained from communicating with them: Creating content is one of the barriers in using the product. I decided to optimize this process at every step.
I simplified the size scale down to t-shirt sizes: XS, S, M, L, XL. I picked the optimal size for these values. This is enough to build a hierarchy and not wonder whether the font size I use is too small or too large.
Another example of a UX solution to simplify content creation is AI color suggestion. We analyze the colors of the background, and automatically select a suitable tone and contrast color. It's the magic.
publishing stories.
At the start, we limited sharing a link to the story and a QR code. The user can publish a story with one click. Share the link, download, or print the QR code.
The next step in the publishing stories should be an embedded widget editor with a set of stories, like Highlights in Instagram.
And finally, the display of published stories. If everything is familiar and clear in mobile view, for the desktop I added ambient backlighting to immerse the user in the content's atmosphere when viewing the story.
result.
As a result, we obtained a user-friendly product, with minimal effort in development.
The final step for us was launching the product on Product Hunt. We took the second place in the Product of the day, got 324 users, and received a ton of feedback.
