BitWarped is a fictional small digital design firm that has dabbled in the stock web template field for several years. They have built a solid base of users and clients who have used their services. They are eager to expand on their digital and design offerings.

Client

Student requirement for HNC in Creative Media, Dublin Institute of Design

Learning Objective

After this unit, the student is expected to deliver the following:

  • Discuss the theories that underpin interactive websites, web services and apps, through historic and contemporary precedent research
  • Explain the relationship between design theories and practices in web and app development
  • Analyse a website, web service or app, illustrating the way that it responds to the user, purpose and context
  • Present ideas for a new website, web service or app, which engages users in an interactive experience

Project Brief

BitWarped is a small digital design firm that has dabbled in the stock web template field for several years. They have built a solid base of users and clients who have used their services up to this point. They are eager to expand on their digital and design offerings. Specifically they want to expand their catalogue of resource and services to encompass both web and app design and development resources that can be accessed online. These tools could be similar to existing resources or perhaps something entirely new aimed at emerging technologies and processes.

My Role

Entire product design from research to conception, visualization and testing

Project Duration

3 Weeks (Project finished on 07 April 2020)

Market Research

Introduction

Companies, small businesses and even individuals take advantage of the internet to create a strong impact to their target audiences. Websites, being the most effective way to create online presence, has proven to be one of the most successful marketing or promotion strategy for businesses as it build trust and credibility among its users. Although undeniably useful, hiring someone to create a website, or a digital product, can be expensive. Thankfully, a lot of website building platforms are offering a build-your-own-website scheme so that companies and individuals can create and design their own for free, or with a little payment for premiere features.

The competition for site building websites has become tougher than ever as more and more people see the need for a website to run their businesses and create an online presence. Websites like Wix, Squarespace, Weebly, and WordPress are among the top websites that offer this service. These websites operate as web application programs, which is convenient for users as they do not need to be downloaded since they are accessed through a network. Moreover, they can be accessed through multiple browsers and various platforms such as desktop, laptop, or mobile. For these reasons, many other companies attempt to create and mimic this approach. One of them is BitWarped, a design firm that offers web design services by creating stock web templates. The company is eager to improve their design selection and follow today’s trend in web development by expanding their web design services to include app development.

Goals

The primary goal of BitWarped’s plan for service expansion is for the company to keep up on the current trends on web and app development. Specifically, it aims to:

  1. Include app design and development resources as part of the existing web template catalogue;
  2. Engage the users more in the process and involve them on creating their own website through a web application interface; and
  3. Create an intuitive design experience for all users.

Methods

As more and more companies and individuals desire to create online presence, the number of websites that offer do-it-yourself web and app design service also grow in number, making the competition tougher than ever before. BitWarped seeks to understand this industry better and search for opportunities to get into this trend.

First, an extensive market research will be done to better understand the industry, the competition, and the potential users of the product. A tool called Market Research Kit from HubSpot will be utilized to carry this out. This will include market analysis tools using the Porter’s Five Forces Analysis, SWOT Analysis, and using Personas to better represent the potential users in order to create a product that best suit their wants and needs. Literature will also be done to obtain insights about user centered designs, theory of interaction and historical development of websites.

Once these are established, a site map will be created. A low fidelity prototype will then be produced to test for usability. Once adjustments are finalized, a clickable prototype will be created.

Understanding the industry

It is important to conduct market research in order to understand your potential users and the value of your product. To do this, we must first understand the state of the industry where our product falls into. A tool called the Porter’s Five Forces Analysis will help us understand the competitiveness of the business environment and therefore helps us identify strategies for profitability. As the name implies, it looks into the five factors around a business that affects its productivity. These are: competitive rivalry, supplier power, buyer power, threat of substitution, and threat of new entry.

For this market research, we will focus on the web and app design industry. The current trend allows users to be more involved in the design process by not only working with templates, but by providing them with tools to create web pages from scratch on an intuitive web-app environment.

Competitive Rivalry (Strong)

The industry is already saturated with companies who offer the same service. Companies like Wix, Weebly, Squarespace, Webflow, and Stack are a few of the many companies that, more or less, offer users similar features. Another factor to consider is the size of the market. Many small businesses and individuals desire to create online presence to promote their products and services. This means that there is a large market for this industry. This market also keeps on growing as more and more companies see the need for a website to advertise their products and services.

Threat of New Entrants (Weak)

Creating and maintaining a web application is a tedious job. In addition, the cost of hiring web experts and designers can be expensive. This means that the likelihood of new companies to exist and offer this service is low.

Threat of Substitution (Weak)

Companies choose websites to advertise their services at it is the most effective way of online advertising. Social media, banner advertising, pay-per-click and SEO are the known substitutes, but are not as effective as websites. To create a website, companies can either pay a web developer or create the website on their own through readily available tools online. There are no other alternatives available, therefore, there is a low threat for substitution.

Buyer’s Power (Strong)

As the industry is now saturated with companies competing to provide users with the best service, users have a strong power to choose which interface, price plan and subscription suit them best. This makes the buyer’s power strong.

Supplier’s Power (Weak)

The primary supplier for digital and online products are the developers. There are many skilled web developers here and abroad, therefore, it is easy to hire developers that could build the product.Other tools including hardware and software necessary to create the product are readily available. This means that the bargaining power of the supplier is low.

In summary, the chance of profitability is high. However, possible setbacks should be anticipated to ensure sustainability. Based on the analysis, the potential threat lies on the number of rivals offering the same product. The competition is tough and tight for website builders. For this reason, the product we will build should include features that are unique to our brand, which will highlight tools that the competitors have not conceived of offering to clients. These decisions will also depend on what the competition has on the table. For this reason, an in-depth understanding of the competition is of utmost importance.

Understanding the competition

The web design industry has been growing at a fast rate. With over 260 million people using the internet on everyday basis, companies see websites as a commodity for success. For this reason, companies offering software for website building and hosting increase in number. This research will cover the analysis of these websites, specifically WebFlow and Stack, as part of BitWarped’s plan for expansion. The SWOT analysis will be the tool of choice for this analysis.​

UI Deck (www.uideck.com)

STRENGTHS

UI Deck is unique as it provides editable HTML templates. It offers a range of products, from landing page to different startup kits. It also offers free products and are easily editable. Demos are accessible without hassle which is important for users to see before they download the templates.

The interface is clean and simple. The products are categorized accordingly which allows users to easily browse through and select the template they want. The colour palette used is cool and consistent to the entire website. The typeface is readable and consistent.

Social media buttons are present at the bottom of the page which add reach to different users. The products offered clearly reflects the type of market the website aims to reach. Users can subscribe to a newsletter which is good way for marketing.

A real-time customer chat support is also easily accessible within the website.

WEAKNESSES

Although it offers a range of products, the number of templates per category is limited.

The website is not a web-app. It is only basically a resource and download hub for templates. The interface does not give the users the ability to design their own pages through the website.

Although the simplicity of the website is admirable, the branding is not effective. The overall layout and design can still be improved.

OPPORTUNITIES

Web analytics and SEO are the trends for digital products nowadays. Finding a way to include this as a supplemental service can increase profitability.

THREAT

The number of design libraries can affect customer loyalty and profitability. The changing taste of consumers and design trends requires that the libraries need to be updated all the time. Missing out on these trends can pose a threat for customer loyalty.

Drag and drop web designing online apps and other interface that are easier to use can cause decline in the utilization of web libraries.

WebFlow (www.webflow.com)

STRENGTHS

Webflow features different web page templates that can be edited without worrying about the codes. Its main feature is the browser based visual editing software that allows users to drag and drop elements within the web page and publish the site straight to the web without code input (as the application automatically generates the codes). The codes can also be edited. It also allows users to add custom codes and scripts.

The interface is simple and sophisticated. The landing page visually presents what the website can do and what services it offers. There are few options in the home page which is limited to what is essential for the users. There are no distractions such as unnecessary buttons or images. Call-to-action buttons are clear and direct to the point. The typeface are simple and big enough to read. The colour palette chosen was consistent for the entire web page. The interface for the builder is easy to use, as it is quite similar to Photoshop.

Social media buttons are present at the bottom of the page which adds reach to different users. The products offered clearly reflects the type of market the website aims to reach. The service is mostly free until the website is launched. The plans are also flexible.

WEAKNESSES

The plans can be expensive. There are no live chat option or phone support.

It can only support simple codes and scripts. Custom code customization is not possible.

OPPORTUNITIES

Web analytics and SEO are the trends for digital products nowadays. Finding a way to include this as a supplemental service can increase profitability.

THREAT

The number of design libraries can affect customer loyalty and profitability. The changing taste of consumers and design trends requires that the libraries need to be updated all the time. Missing out on these trends can pose a threat for customer loyalty.

In summary, WebFlow and UI Deck are two web builders that offer different web design solutions. Based on the comparison done, combining both websites’ features in one product can attract more users. Specifically, some recommendations were made:

  • Create a branding strategy that will engage users on information dissemination.
  • Using a design theme will make the website more memorable to the users.
  • Providing users the option to use a visual editing software and/or use codes to build website will make the product flexible and on trend. Doing this will reach more users, expand the market, and increase profitability
  • Provide SEO and web analytic services
  • Make the plans flexible and affordable for all market types
  • Provide a subscription service for users to know new features and templates
  • Provide a live chat, email, and phone support

BitWarped’s target users are small business owners and individuals. The company has solid users who are subscribed to the template resources they have previously offered.

Creating the site layout

After the industry, competition, and users were analysed, the website was then designed. I have created a sitemap to map out the process and proceeded to create a mock up using Adobe XD. Then, a high fidelity prototype was created using Adobe XD, and a landing page was coded to show how the elements will behave in the landing page. The prototype will focus on the process of signing up, how the additional service was incorporated to the previous offerings that BitWarped has from the past. I have provided the link to the low and high fidelity wireframe, as well as the coded prototype on the next page along with the site map.

Site Map

The sitemap provides a guide on how the users will navigate through the website. This sitemap focuses on how the users will go through the signing up process, and how will they select the services that they need to build their own website.

Low fidelity Prototype

The low fidelity prototype was created using Adobe XD. I decided to show the connection of the pages so that the client will have a feel of what the actual website will be. The prototype can be accessed here.

Branding and Design Elements

After the user flow was established, the look of the website was planned out. I decided to go for a simple, clean, and elegant look using an old rose and brown as main colors. The typography was a simple sans serif. White space was utilized for the entire layout to space out contents.

High Fidelity Prototype

After the individual design elements were established, a high fidelity prototype was then created using Adobe XD. You can access the prototype here.

Coded Prototype

The coded prototype features the landing page. The intention of this prototype is to show the client how the elements on the landing page will behave. I used HTML, CSS, Javascript and J-query to create the entire landing page. You can access it here.