Website Design

  Website design for townsquare interactive

JUMP TO THE BELOW SECTIONS OF MY WORK:

CLIENT BRIEF

THE CHALLENGE

To create a viable online presence and educate users on what Zentra is and how they can help consumers.

OBJECTIVES

• Carefully consider what role the website plays within the purchase process

• Drive users to book a consultation with Zentra

• Help Zentra to partner with other companies or clients to provide e-commerce solutions

RESEARCH

MARKET RESEARCH

I started my research by collecting information about the e-commerce industry. In particular, I was looking to learn more about the size of the industry and the potential for growth. What entices people to enter the digital marketplace and can they be successful?

STATS

• Amazon is the leading online retailer with net revenue of $232.88 billion

• There is an estimated 12 - 24 million e-commerce sites on the web, but less than 1 million of these sites sell more than $1,000 per year

• The e-commerce industry is growing by 23% every year

DEMOGRAPHICS

• 59% of Millennials will go to Amazon first when online shopping

• 93% of Millennials have compared online deals using a mobile device

• Gen X outspend all other generations when it comes to housing, clothing, and entertainment

• 65% of Gen Z have purchased something based on an influencer’s recommendation

TRENDS

• Online Shopping - 51% of All Americans prefer online to in-store shopping

• Social Media - 30% of shoppers were open to buying products from Twitter, Facebook, or Instagram

• Mobile - 40% of all online purchases are done on smartphones
  

COMPETITOR ANALYSIS

There are not any direct competitors for e-commerce solutions in Matthews, NC. This puts Zentra in an optimal position for the local area. However, there are national companies that are direct competitors.

Shopify

Strengths: 14-day free trial, built-in tools on the platform to manage and grow your business, custom website

Weaknesses: learning curve to learn platform and tools, can be costly

Woo Commerce

Strengths: free plugin for any WordPress website, customizable tools, and features

Weaknesses: limited to a WordPress website, a learning curve to learn how to use the plugin

Amazon

Strengths: #1 retailer, relatively low cost

Weaknesses: competitive marketplace, have to meet amazon’s requirements

TARGET AUDIENCE

After analyzing the research I identified the target audience as people who own an e-commerce store or want to start one and are in need of some support with setting up, marketing, and managing their online store.

DEFINE

PERSONA

After reviewing the research I collected, I created a fictional user persona based on the target audience. This helped me foster empathy with the real users and I can use it as a guide to inform my design decisions.

POV STATEMENTS + HOW MIGHT WE QUESTIONS

Now with a better understanding of the audience I defined the problem space framed in a way that would invoke ideas about how to solve them. This assured me that I was solving the correct problems moving forward in my design.

IDEATE

PROJECT GOALS

Next I outlined both business, user and common goals. This helped me create a successful product for everyone.

PRODUCT ROADMAP

The product roadmap is useful to prioritize design challenges. I utilized 3 of my HMW questions and brainstormed features that could help users and how we could measure the feature’s effect.

SITEMAP

Now with priorities in mind I began working on the information architecture by creating a sitemap. This determined the navigation of the site and the relationship users will have with the website content.

DESIGN

SKETCHES

After defining priorities I sketched out rough designs of the home page and internal pages. Next I had a design review with some of my peers to discuss which sketch would best serve the user and stakeholder goals and requirements. Below are some key points we covered in the design review:

What is zentra?

• content blocks explaining company

• icons and content depicting core services

• visual representation of services and partners via images

how can we drive users to book a consultation?

• call to action buttons

• request consultation page in navigation

• floating button through out website design that leads to contact page to request more information

HOME PAGE

INTERNAL PAGES

WIREFRAMES

I began to build out the decided sketch, version 3 of the homepage and version 1 of the internal page sketches, into a mid-fidelity wireframe which would become the foundation of the website I would build. The mid-fidelity wireframe served as a reference point through the build process.

STYLE GUIDE

Next I created a style guide to serve as a guideline for the user interface. I incorporated the logo, color palette, imagery, forms, icons and actions that would appeal to Zentra’s target audience. Zentra specifically wanted a minimalist look with a pop of an accent color. In any place where the black is the background the color of the text or button would change to white so it is visible.

bUILD

After reviewing the wireframes and style guide I built out the website utilizing my former company’s CMS, which is similar to WordPress, and coded and manipulated the HTML and CSS to create the website as planned. Below are some finalized pages from the site.

REFINE

After the client viewed the website I built and they came back with some revisions. I changed the hero images on the core services pages to black and white and adjusted the layout of the timeline on the about page. Below is the final version of revisions of the website.

REFLECTION

For this site I realized that if you’re going to innovate you have to understand the value of what you’re replacing. Conventions for web designs make life easier for the user because they don’t have to figure out what things are and how they are supposed to use them so it’s best to take advantage of them. Though the site I created is simple, it is still easy to use and eye catching.