SKITS

Skits is a video sharing platform where the post short videos
maximum of 12 seconds and are paid for the videos.

About the project

CLIENT
SKITS .INC

PROJECT
SKITS

YEAR
2017

intro_skits

My Role

I was the product designer and front-end developer for the project, I was responsible for the overall product thinking, UX design, wireframing, UI design, Branding, and prototyping. I also collaborated with the engineering team and developed the front end of the platform.

Project Summary

There are a lot of video creation and sharing platforms available, SKITS was one similar platform with an added benefit, which not only allowed its users to create short videos and share them.

But also provided them an option of earning predefined incentives by doing what they enjoyed doing, provided they create videos for brands strategizing their digital marketing campaigns in form of these promotional short videos created by SKITS users.

It was a win-win situation where brands used SKIT to run their campaigns being aware of the fact that digital marketing is a driving force in the current generation for any business and SKIT Users who created these videos and shared were provided with points, which could be reimbursed in multiple ways. As per the design, A user who could create a 12 Second video with a mixture of the fun elements along with creativity leading brands towards a widespread distribution of their product videos.

skits_intro

The Challenge

This project was built on the belief that the prevailing online interactions between brands and consumers could be made richer with properly aligned incentives.

skits_challenge

At the time of the product design, the major concern the stakeholders expressed was the mobile screen life experience. One of the major challenges of the application was increasing the amount of time the users spend on the application. Special care was taken to keep the business goals to align with the user goals.

Another biggest challenge was the information architecture across the web dashboard, which was designed for the managers to launch the application and was used to launch the ad campaigns. Special care was taken to keep the core features as simple as possible, and yet to create a well-built mobile adaptation of the comprehensive recording platform we also had to keep up fast, nevertheless develop a user-friendly product.

The Solution

SKITS was indeed one of the toughest projects we worked on. The reason being behind is its varied set of audience and the complexity of the application. We worked on the project in different phases right from the inception of the idea to the final delivery of the product; it was one roller coaster ride. We had multiple modules and various screens to work with, We had a mobile application for the user to add videos and we had an enterprise saas web application for the organization who bought the solution from us.

We started out working on the project with the client interview. Client interviews are a big deal in the design of the product. It helped us in establishing the foundations for the product by providing valuable insights that would otherwise be difficult — even impossible — to obtain. We started our UX research by setting goals for the client interview, and we had clear goals on what we wanted to find out from the client. After multiple 1:1 sessions with the client, we proceeded further with our research, we had a vague idea on how we wanted to craft the product, we started our research by answering the questions we are trying to solve, we started with the 1:1 interviews with our potential target audience, we started by asking what are their personal favorite social media websites? what are they looking for in a new product like Skits? and their common issues with the current video sharing platforms. We tried our best to conduct a face-to-face interview but due to the location and time zone constraint, we conducted interviews on zoom calls and ensured we recorded the calls for further reference. After completing the user research we wanted to understand the market gaps and to know the market gaps we made a competitive analysis where we looked into different products from TikTok, Instagram, and dub smash to understand where our product would stand in the market.

skits_challenge – 1
skits_persona

After researching the market space and after getting a clear idea of our competitors, the next big step was to empathize with our users. It enabled us to understand not only our users’ immediate frustrations, but also their hopes, fears, abilities, limitations, reasoning, and goals. We started creating empathy maps for the users. These empathy maps helped us in Understanding what drove our users’ behaviors and also guided us towards meaningful innovation. Once we had adequate data on our users, we built fictional user personas. These acted as stand-ins for our key audience users during the design process, we focused more on the behaviors rather than on demographics. Before getting into the ideation phase of our project we started noting down our user scenarios where we started noting down the scenarios in which our user will be using Skits on mobile and as well the different scenarios where the enterprise organizations use the product. Once the scenarios were intact the next team activity was the user flow, we started outlining the steps that our user had to take in our application to post the video, we also enabled the feature where we wanted to give the user full access to record the video on the platform. This helped us a lot in getting a clear idea of how we can navigate the user in the platform to ensure he achieves his goals.

The next important phase was to put gather all our design documents together and started to ideate the design, we started our design process by classic sketching, this was one of the quickest and easiest ways to get our ideas into one place, sketching also helped our teammates to present their ideas in the easiest way possible as they need not worry about the perfection or pixels or spacing. once we finished the sketching we called for a review meeting where we started presenting our rough sketching using the traditional paper prototyping, this review session helped us in getting a fresh insight on our design ideas, and in some modules, it opened a whole new door towards a new way of looking at the module. The sketches gave us a birds-eye view of the pages and the flow and how to document it in a hierarchical format. We used one of the well-known methods of information architecture – Site maps. We prepared sitemaps and clearly outlined how the pages are connected and this gave an idea to the client on how the application was shaping up.

skits_sketches
skits_moodboard

After sketching down the ideas and once we had the foundations strong we started preparing the wireframes for both mobile and desktop applications. We took our paper sketches and stated used Sketch to convert these low fidelity wireframes into high fidelity wireframes for mobile and as well as for desktop version, We ensured we covered all the pages the sitemap worked like a checklist while designing the overall wireframes. Once the wireframes were ready we started building the mood maps. We built our mood board using Pinterest so that it’s easy for everyone in the team to make their comments and contributions. We took special care in building the color scheme and collected the inspiration on how we want the visual look of the design to be.

Once the mood board was ready the next step was to make the mockups and high fidelity designs, We built the entire mockups using the sketch, we started making pixel-perfect screens to show all the visual and typographic design details of the product, It was a clear replica of the real screen. we designed the skits mobile application keeping iPhone 8 into consideration and scaled for further devices and for the enterprise version we considered the laptop resolution of 1366×768 as the base resolution and then wanted to scale it to further devices, the user research phase helped us in understanding what our key audience would use in real-time. and once we finished the visual design we presented the application and the desktop version to the client and our stakeholders for their initial feedback and iterated the design based on their valuable feedback.

 

skits_styleguide
solution_skits

Testing of the product was very important before we went live, so we started our testing by conducting a usability test for a set of key audience, we initially made a prototype of our application and passed the design to an initial group and interviewed them this helped us in getting the qualitative results that we wanted, but it was time-consuming. Once we iterated the design based on the initial results this time we invited a focus group to the office and used the eyeball tracking mechanism to know what the user liked and what frustrated them while performing the task. Once we have the results ready we prepared a usability report that presented the data and findings of our test in a much comprehensive manner.

Conclusion

We planned to have two different landing pages one for the users and the other for the advertisers. The main concentration was on keeping the website trendy and modern and at the same time, we focused on making it professional for the advertisers who play a major role in the revenue of the application.

Next case study

Previous case study