YSKRA

website building application

Some data from the research, analysis, development or tests may be omitted due to NDA with Client Company. For additional details or discussion, feel free to contact me here.
The purpose of the research was to gain actionable insight and learn lessons relevant for solving the problems presented. I am neither proving nor disproving the existence of these problems or the correct solutions, as the proof would require thorough, strict, scientific method and possibility to replicate the test outcome in controlled environment.
Although, solutions to specific problems are founded in data gained from research or tests, they are still subjective and based on my critical thinking, creativity and experience. It is possible that there are numerous solutions, many of which could be potentially more successful in particular product and for particular users.

About YSKRA

YSKRA is a website building application dedicated to Small & Medium-Sized companies. It’s a one-stop shop, which enable SMEs to create a simple, responsive website without any coding or front-end development knowledge. Visual drag & drop editor enables user to paste text, add images or other media and arrange everything in a suitable layout depending on the screen size. User can choose a template and customize it to his needs. Aside from the basic front-end editing abilities, YSKRA also provides presets for applying animations and transitions to elements, integrating social networks feed, embedding content, contact form, interactive tables with basic formulas and more. Company can link created website to domain of their choice or publish it on YSKRA subdomain. Hosting and webmail are part of every package.

The goal

We wanted to create visual website builder with only basic options needed to assure usability, but also give power-users ability to edit code or access advanced options. User interface had to be intuitive so that users would understand advantages of responsive design and easily comprehend what screen size they’re editing. If user had all website material prepared (text, images, media…), he would be able to create and publish website in few minutes. Editing website, changing layout or theme also had to be simple. Key Performance Indicators were Task Completion Rate and errors per task.

My role

Aside from being the UX lead, I was also co-founder of YSKRA. I was making decisions, organizing usability and market research, user testing, analyzing data, business strategy and just solving most of the problems. I initially conducted pain point validation by myself and mid 2015 timing was right to create website builder, because many companies didn’t have responsive websites and Google started penalizing them in search. Beside me, there were 3 people in team, 2 full stack programmers and 1 sales/content/SEO/PR guy. I also created important contacts with local IT companies and media. We followed Lean approach and performed user testing with prototype. Before we started programing, I designed a Minimum Viable Product for final concept validation, based on which we learned the most important lesson.

Branding

I worked on logo concept for about a week, between other obligations. My first association with YSKRA (spark) were some spark shapes and hydrogen atom. I tried out few variations, but they all seemed too generic. I thought about typography or stylizing letter Y as a spark. The inspiration for current logo came while I was working on a custom illustration for an unrelated project and I had to think of a symbol for quality and style. I tried solutions with diamond and then it hit me, I can probably combine spark and diamond to make the logo for YSKRA. After a lot of editing I got a final logo.

YSKRA logo

Research & prototype testing

I started researching on the side, during the span of several months, trying to validate a pain point about website building. Whenever I had an opportunity, I talked to people in China, Germany, Slovenia and Serbia. They all agreed that it would be great to have a tool that allows website building without any knowledge of code. User should be able to drag, drop, resize or change style of text, images and other media on website and rearrange them. Few companies from Germany wanted to preorder app and others from China and Serbia asked me if I could create simple websites for them. The market for these CMS-website building-apps seemed very healthy, so we started to analyze competition in order to identify successful solutions.
We performed competitive audit on 4 website building apps. They had different business approach and functionality. Based on this analysis I was able to pick basic options necessary for creation of a simple website. We used this as a base for use cases. Another thing we learned from competitive audit was market segmentation. We were set to create an app for SMEs, but it turned out many users of website building apps were freelancers and artists like photographers, designers, musicians. We also analyzed the way several shopping apps, CMS, CRM and popular WordPress themes handle content creation, customization and editing.

Competitive audit table

With knowledge about market and competition, it was time to talk to users and discover their attitude towards website building and their understanding of responsive design. We were hoping to identify mental models related to drag and drop option, and editing website layout versus editing single element. We found users for interview (and potential customers) with the help from local Chamber of Commerce. These were people under 40 years old, managing SMEs in non-ICT sector. They were interested in our app and had positive comments. We learned that they would probably delegate this job to their assistant, designer if they had one or some other employee. They were not proficient computer users, but they used internet products, web email, specific apps necessary for their business or MS Office on daily basis. Most of them couldn’t tell what responsive design is, so this meant we needed to explain it in app, probably with simple animation during onboarding process. Without understanding of responsive design, users wouldn’t be able to create suitable layout for different screen sizes. Analyzing data from interviews showed that most users equated creation of website with just writing copy, editing text, adding images and media, or changing colors. That’s why we decided to minimize or even eliminate options related to layout editing and give users layout templates for the whole page or page section.

Create new website storyboard

There was no point in chatting anymore, so we decided to create a prototype and test it. We were not yet sure what we’re doing, what to create and how to do it, but since we already had a solid group of potential customers, we invited them for testing. Basic necessary options for website builder were ability to resize and rearrange elements along responsive grid, adding text, images and media, changing number of columns, embedding code and we included element animation options as something interesting to users. Because we had very demanding custom interactions, we couldn’t use prototype apps, and creating a front-end prototype would require a lot of JS code. We created prototype in Keynote, which allowed users to have necessary interactions and explore the app.

YSKRA prototype

Prototype test went as predicted. Users had trouble with customizing page layout, but tasks related to editing page elements, adding text and images or changing existing template had high completion rate. Number of errors per task was acceptable, since these were not power users and it was their first interaction with this system. We were confident that we’re on the right track to create a successful product, so we started thinking about app requirements and planning development.
The research process, market analysis, interviews, data analysis and prototype testing took about two weeks, excluding initial pain point validation.

Planning and deliverables

In order to create a detailed product backlog I started working on use cases and user stories. Use cases were supposed to help us define app requirements and user stories were a foundation for creating personas. With use cases, I tried to cover all the necessary options of the app, as well as steps following the creation, publishing, editing website or managing drafts. They also helped me define options for dashboard, such as connecting website with a custom domain, browsing themes and uploading website files. Use cases showed that even though most of the interactions were on website building page, there were many important interactions on dashboard, related to hosting management, domain name management and notifications.

YSKRA usecase outline

I was able to create user stories thanks to the detailed insight of our target market and extensive data analysis in competitive audit. We focused on SMEs, but I also kept in mind market segmentation of existing apps. We sorted user stories, picked half-a-dozen and I expanded them into detailed design personas.

User Stories

I use my own template so I don’t forget any detail when creating persona, trying to account for every characteristic that might help me develop empathy and any detail that might make persona more realistic. Since we had real data for SMEs from Chamber of Commerce I could base my personas of it, but when it came to other segments all we had was data off some public pages and we couldn’t verify how accurate it was. I created couple proto personas for these segments and we agreed that later we’ll correct them if necessary, as we get verified data from analytics.

Design persona for YSKRA

I concentrated on sketches, wireframes and mockups while working together with the rest of the team on project backlog and sprint backlogs. Around that time, I had opportunity to meet with guys from 500 Startups and chat a bit about what the team and I were making. They had positive comments about concept and offered few pointers regarding business strategy, but most importantly suggestion was to create Minimum Viable Product and actually make few dollars of it, before we started this complicated and expensive development. That made sense, and even though I was very confident in validation we performed, I talked with the rest of the team and we all agreed we should create MVP just to be sure we didn’t miss out anything.
Creating use cases, user stories and scenarios together with initial sketching and planning took about a week.

Minimum Viable Product

We didn’t want to create just a landing page, or some similar smoke-screen test and it wasn’t easy to come up with a meaningful MVP. I remembered people asking me to create websites for them while I was trying to validate pain-point. At the time, I didn’t accept it because I didn’t have time. Through research, we discovered that these websites were very simple and if we could find a way to create them in an hour or so, we could offer a low price. I already had my framework for creating front-end prototypes, this code was not for production, but we cleaned it up, renamed some styles, implemented normalize.css and added fallback for browsers that didn’t support flex-box. We tested the framework by replicating random websites and tried it across various browsers and devices.
Everything worked nicely.

Then I created a landing page explaining our service and stating that if a company sends us all texts, images or other media, we will build their website in an hour and deploy it to our servers. The price was symbolic because we didn’t have to put much time in development, plus we were part of BizSpark program and had access to Azure servers at no cost. To signup users needed to enter company details, afterwards we would contact them back, explaining thoroughly what they needed to send us so that we could start building their website. After sending us all files, we would create website, deploy it on test domain and request confirmation from client. When client confirms everything is good, we move website to domain name of their choice and send first invoice with payment instructions.

Minimum Viable Product

We started generating buzz, did some social media marketing and commissioned few articles on popular channels. I organized promotional events with the help of Chamber of Commerce and attended IT meetups where I presented our pitch deck. More than 30 companies signed up for our service during the first month. We promptly sent instructions for next step and waited for them to send back their files. After few weeks, none of these companies sent files. We reminded them, offered tips on copywriting, creating images for web and uploading videos, but only several actually followed through. Eventually, companies that didn’t send us files asked if we could write copy for them or make photos and illustrations. This was not our goal, but we wanted to help and offered them a new price list including additional services. Price change was not welcomed and during the third month, we realized based on our MVP that our website building app might have problems, which would change our business model and significantly affect projected timeframe needed to achieve profitable stage.

Conclusion

We had everything figured out, satisfying usability, good number for Serviceable Obtainable Market and unfair advantages. Unfortunately, we didn’t discover the right question to ask at the beginning of our validation. The problem was not how to build website, users had Bootstrap and numerous frameworks available, one-pager templates and services, WordPress or other CMS, they could even hire a freelancer to do it for small fee. Actual problem was the creation of content. It turned out that users were not able to write two sentences about their company or make cover photo, even with tips about image size. We noticed during competitive audit that existing apps had great examples and templates, but when we went through pages created by their users, they were far from visually pleasing. The fact is, not everyone has a sense of aesthetic, same as not everyone can sing, play piano or understand calculus.
We needed to readjust our business model and either get involved as dedicated consultants who would guide customers through website building process or invest more time, money and energy and compete head to head with existing services. For me, neither of the options was viable, both required additional funding and I had other commitments. I also noticed that the team lost their enthusiasm, so we all agreed to put the project on hold. We created a pivot and focused on consulting services instead.

Did you like this article?

Please subscribe if you wish to receive new post updates once in a blue moon