Design thinking

Design thinking is a framework used to better understand the audience and to meet the customer’s needs. The design thinking process involves 5 steps which include: empathize, define, ideate, prototype and test. This process leads the design team through a series of steps which are utilized to better understand the audience on a deeper level in order to find solutions to their needs and uncover any problems that the customer might not realize they need assistance with.

“Design-thinking firms stand apart in their willingness to engage in the task of continuously redesigning their business…to create advances in both innovation and efficiency—the combination that produces the most powerful competitive edge.”
—Roger Martin, author of the Design of Business

Human-centered innovation

Human-centered innovation is the deep understanding of the customers’ or users’ needs whether they have been unmet or have not been articulated by the client. If you are able to find solutions to needs that have not been articulated, you are able to far exceed the customers expectations and bring value to their product or service. Design thinking minimizes the uncertainty and risk of innovation by engaging customers’ or users through a series of prototypes in order to learn, test, and refine concepts. Design thinkers rely on customer insights gained from real-world experiments.

Crash Course in Design Thinking

In this week’s assignment we were partnered up with each other and asked to view the Virtual Crash Course Video together as we filled out the corresponding worksheet. During the 90-minute video we participated in the Gift-Giving Project. We were asked to identify the needs and develop a solution to redesign the gift-giving experience for our partner.

The assignment consisted of us asking each other about a recent gift we had given and finding a way to take that gift giving up a notch. In order to find the best gift solution, we had to ask questions, sketch an idea, and design a prototype from craft supplies in just a few minutes. The assignment moved me out of my comfort zone and required me to think outside of the box for a creative solution. I found it exciting and it left me wanting to ask more to better understand the audience. Reflecting back on the assignment, I wish I had asked more questions to understand the audience and gift giver on a deeper level.

Course Reflection – Web Technologies

I am so thankful for this term and Professor Akselsen. I have had years of learning, digital experience in manipulating existing HTML within a CMS or email template – but I have never been able to read the matrix until now. This course content and the style of presenting it have given me the basic HTML knowledge to understand what story the code is going to tell instead of scanning for words like image or color to make a small change. I went from having no idea how to start a page – to building a basic layout and manipulating a template to fit my needs of displaying family photos.

There are many skills that I am able to take away from this course. I had some previous knowledge but learned so many new things along the way to help refine my existing skills. We reviewed several important topics extensively. It is amazing how much we have learned in a short about of time. These topics included:

• Customization
• Establishing online presence
• Color palettes, site maps and wire framing
• Responsive design
• CMS and FTP
• Optimization
• Website traffic
• Cross browser and compatibility testing
• Google analytics
• HTML/CSS templates

Responsive design is the beginning

Whether you are the designer or  “do-it-yourselfer” using a template to create your site, basic understanding of how a site will be built is important. A successful site is the marriage of both design and code, each depending on one another to create a seamless experience. While designing, you have to envision each user experience and how your design/content will be displayed. If you chose to create your site with a template, many hosting sites contain templates which are responsive and easy to use. These pre-programmed templates will help save time and money as you develop your design.

Content is the driver

Content plays an important role in driving traffic to your website. Content has many purposes like describing products on ecommerce sites, educating on sites like Wikipedia, entertaining on sites like YouTube, and socializing on sites like Facebook or Instagram. With millions of sites available today, content creators have to find creative ways to drive traffic to their sites.

Testing can make you unstoppable

There are so many browsers available, which are viewed on all types of devices and on various screen sizes.  It is, therefore, essential that you perform testing on how the user will experience your site in each of these environments. Each browser handles the information it processes from the server in its own unique way. Testing your site on one browser is not enough; you need to view the user experience across several different browsers, devices, and screen sizes. Cross Browser testing involves testing both the client side and server-side behavior of your site, when it is accessed using different browsers. Through this testing you will ensure that your site displays properly regardless of which browser is used.

Cross browser and compatibility testing should be part of the initial site development and be a step that is revisited periodically.

Free tools are at your fingertips

Google Analytics is a free website analytics service offered by Google; it provides data and insight into how users find and use your website. You can also track ROI for your online marketing strategy. This website can help you view your visitors’ behaviors through your account dashboard.

Google Analytics helps you make decisions based on data. You can justify spending more on your advertising; decide where you should be advertising; and what type of content you should be exploring to add to your site. Google Analytics categorizes data into three main buckets Acquisition, Behavior and Conversions.

We are in this together

Designers, coders and savvy internet users will all benefit from the basic understanding of how each phase works together. Both design and code need to build upon each other in order to have a final product that will create a beautifully built user experience. In this new responsive design environment, all sides need to understand each phase of a site’s growth. Together we will create a beautiful internet experience.

Website design using templates

If you possess some basic HTML knowledge, you can easily build a fully functional website by using free templates. Templates expedite setting up a new website, and they do allow some customization to fit your needs. Some templates will be very simple and clean in their design, while other templates will offer advanced design and code options. Using these templates you can save a lot of time; because the creative design, layout and foundation HTML is already in place.

Templates are ready-made, and can be easily edited allowing you to instantly create a website. This saves money since you will not need a designer; and can be completed in a time frame that you decide upon. There are a lot of sites that offer free templates with amazing designs. I used W3 School for a responsive website template. You are able to use their templates without any restrictions and they have a large array of design options to choose from.

How to get started

Once you have picked your template, you can play around with it on W3School to see if it fits your needs. Once you are satisfied, copy the HTML and paste it into your HTML editor of choice. Some common editors are DreamWeaver, FrontPage, or Web Express. The images that you use to replace what is in the template can be edited in a few different image applications such as PaintShop Pro, Gimp, or PhotoShop. I use DreamWeaver for my HTML editing and PhotoShop for my image editing. Some templates will also use CSS (Cascading Style Sheets) to control and standardize things like font sizes and colors across all your pages. These CSS files can also be edited using a CSS editor such as DreamWeaver.

Once your HTML is ready, you can upload it to your server. Congratulations, you now have a fully functional website!

 

Understanding Google Analytics

Google Analytics is a free website analytics service offered by Google; it provides data and insight into how users find and use your website. You can also track ROI for your online marketing strategy. This website can help you view your visitors’ behaviors through your account dashboard.

Another feature is that you are able to add Google analytical tools such as Ads Account and Search Console. You can additionally add tracking codes; which allow you to closely monitor the success of any advertising, social, or PR campaign. To get this started, you need to install “tracking code” on each page of your website.

Tools and features

There are many features you can utilize within Google Analytics such as:

• Data visualization tools including: a dashboard, scorecards and charts to display changes in data.
• Segmentation for analysis, such as conversions.
• Customized reports.
• Email-based sharing.
• Integration with additional Google resources, such as AdWords and Website Optimizer.

Google Analytics helps you make decisions based on data. You can justify spending more on your advertising; decide where you should be advertising; and what type of content you should be exploring to add to your site. Google Analytics categorizes data into three main buckets:

• Acquisition
• Behavior
• Conversions

Acquisition

Acquisition is the website traffic. The acquisition reports show you how traffic is getting to your site. The overview tab provides you a view of acquisition, behavior, and conversion data for your top traffic sources by channel (referral, direct, organic search, and social). This information displays the number of sessions acquired, the bounce rate, and their conversions. The acquisition report is the best tool to use in order to evaluate what is working well in driving traffic to your site, and how best to maximize the traffic.

Behavior

The Behavior reports show the performance of your website, and what your visitors are doing as they move around your site. You are able to assess the performance of your website content and determine if changes need to be made in order to change the behavior of the site’s visitors. Under the overview within the behavior tab, you will see a graph showing the amount of traffic during a specific period of time.

Additionally, you will see page views, unique page views, average time on page, bounce rate metrics, and percent exit metrics. These metrics show how a user interacted with your website page.

Conversions

A conversion takes place when a visitor to your site takes an action that converts them to a customer. Examples of this could be: filling out a form, purchasing, or becoming more involved with your site. You will need to use the Google Analytics URL Builder to tag your URLs with custom campaign tracking parameters, and then set up a goal within Google analytics. Google Analytics can now create easy-to-read reports that reveal your campaign’s performance.

 

 

 

 

Cross Browser and Compatibility Testing

There are so many browsers available, which are viewed on all types of devices and on various screen sizes.  It is, therefore, essential that you perform testing on how the user will experience your site in each of these environments. Each browser handles the information it processes from the server in its own unique way. Testing your site on one browser is not enough; you need to view the user experience across several different browsers, devices, and screen sizes. Cross Browser testing involves testing both the client side and server-side behavior of your site, when it is accessed using different browsers. Through this testing you will ensure that your site displays properly regardless of which browser is used.

Cross browser and compatibility testing should be part of the initial site development and be a step that is revisited periodically. Browsers will change as new versions are implemented, so continuous testing is critical to making sure the user’s experience is flawless.

Increase SEO rating

Google is continuously updating their SEO (search engine optimization) algorithm. A site’s ranking will increase if the site is more responsive and cross-browser compatible. An improved site ranking ensures you are being seen by your audience.

Testing my site

I used Browserling to test my site on Explorer, Google Chrome and Firefox. I also tested it on tablet and mobile sizing. I found all three browsers loaded my site correctly. When it was brought down to tablet and mobile size, the site adjusted layout and content appropriately, resulting in similar user experience.

Explorer experience

Google Chrome experience

Firefox experience

Tablet experience

Mobile experience