Unit 14:
Web and App
Development in
context
Client
Student requirement for HNC in Creative Media, Dublin Institute of Design
My Role
Entire product design from research to conception, visualization and testing
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.
​
They would like the service to be online only as a web app or web page which engages their users in an improved interactive and user experience and offer downloadable resources to avoid users having to install a native desktop app.
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:
-
Include app design and development resources as part of the existing web template catalogue;
-
Engage the users more in the process and involve them on creating their own website through a web application interface; and
-
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.
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.
The diagram below shows a graphic representation of the forces:
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 Industry
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.​
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.
The Website
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.
​
High fidelity Prototype
The high fidelity prototype was created using Adobe XD. You can access it 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.