Web Design Creative Brief

Leave a comment

Client: UC Davis Bohart Museum ​of Entomology

 

Project Overview

Summary

Bohart Museum of Entomology is dedicated to teaching, research, and service. They have the seventh largest insect collection in North America, and serves as a storehouse of California insect biodiversity. They need a more up-to-date and professional website to promote their upcoming activities, ongoing exhibits, recent research, and professional insect diagnostic services.

Mission

Their primary mission is understanding, documenting, & communicating terrestrial arthropod diversity. Their secondary missions including providing general public entomology education through activities and exhibits, and offering professional insect diagnostic services to companies and government agencies, etc.

Goals

  1. Provide more information for current exhibits
  2. Update the current event calendar with a contemporary look
  3. Add a Donate button
  4. Redesign navigation menu to allow different user groups to find information faster
  5. Redesign the website in a contemporary, clean, and organized style
  6. Redesign content hierarchy on each web page to improve readability
  7. Redesign homepage to highlight these sections: upcoming events, current exhibits, research, and diagnostic services
  8. Add Social Media buttons

Current Situation

The design of this website is naive and lacking, along with bad content hierarchy and poor navigation. The website has no social media buttons.

Proposal

Create a new website with thoughtfully structured content hierarchy and navigation menu while still using the same content. Restyle the website to deliver an up-to-date and professional look.

 

Audience & Their Needs

  1. Parents from Davis, Sacramento, and other nearby cities, age between 25 to 60 years old, looking for fun activities to do for their children. Insects are fascinating and interesting creatures for their curious children to learn more about.
  2. Biology teachers from Davis, Sacramento, and other nearby cities who are searching for educational materials and education programs to enrich students’ learning experience.
  3. Insect enthusiasts from North America. They are fascinated by everything about insects, and are excited about the exhibits and large insect collection at the museum. They are browsing the website to plan their visit to the museum.
  4. Fellow entomologists from North America visit the website to browse the museum’s insect collection information, latest blog posts, and researching projects. They are entomology students, professors, and scientists who have a high-level education background in biology science.
  5. Product quality supervisors from food, beverage, and other industries on the West Coast seeking professional pest diagnostic help for their pest contaminated products. Their products are suffering from pest contamination, and their quality control departments are anxiously seeking professional assistance to find out what the problems are in order to reduce their financial loss and save their public reputation.
  6. Police officers from West Coast who are seeking professional diagnostic assistance for criminal forensic evidence. They are working on cases in which dead bodies contaminated by carrion-feeding flies were found. They need expert testimony from experienced entomologists for these cases.

 

Competition

Who They Are

Other university entomology museums on the West Coast

  1. University of California-Berkeley, Essig Museum of Entomology
  2. University of California-Riverside, Entomology Research Museum
  3. Washington State University, M.T. James Entomological Collection
  4. Oregon State University, Oregon State Arthropod Collection

How They Compare:

Some competitors have really outdated websites. Some others have a more contemporary website design but still have a poor navigation menu. Overall, they are all as bad as Bohart Museum of Entomology’s website.

 

Requirements

General

  1. The site must be easy to maintain by the client
  2. The site must have good accessibility
  3. The site must have a more clean, contemporary, and professional look
  4. The site must have a more engaging layout that is convenient for all target users to use.

Tone & Image

  1. Professional and contemporary
  2. Family-friendly
  3. Large imagery with short and clear words
  4. University of California, Davis website color scheme

 

Budget & Deadlines

Budget

The website design is a pro bono project.

Deadline

Dec 31, 2018

Week 5 Critical Analysis

Leave a comment

GCOM 360

Week 5 Critical Analysis

 

How does User Experience (UX) Design differ from what we traditionally call Web Design? Why is each important?

 

 

The Differences Between Them Are:

 

  1. Web design is static and product-focused, while UX design is interactive and user-focused.

Web design focuses on the visual appearance of a website. Web designers use content hierarchy, color theory, typography, and diagrams to create appealing web pages. It’s more about the brand and the product itself.

While on the other hand, UX design is beyond web design. Fredheim said, “UX takes other aspects into consideration as well, such as emotional, hedonic, aesthetic, affective and experiential variables.”[1] UX is more like customer service. UX designers take on different methods to create an enjoyable experience for users. It’s user-focused.

 

  1. Web design and UX design require different skills.

Web design requires proficiency and good command of graphic design, HTML, CSS, and JavaScript.

UX design is a design process. It requires a deep understanding of human behavior and psychology. Bowles explained this user-centered design process, “Research. Immerse yourself in your users’ worlds to understand what they do and why they do it. Sketch ideas that address these learned needs. Prototype the most promising ideas to evaluate them more accurately. Iterate through testing, repeating steps as required.”[2]

 

Each of Them Is Important Because:

 

  1. Web design makes the foundation of UX design.

It starts from the client’s need to create a website, a static website which might meet the basic needs of the client. But in order to bring out the best results for the client, UX design comes in and plays an important role in creating a better user experience and customer-business relationship.

 

  1. UX design provides guidelines for web design.

As Weinschenk Ph.D. suggested in her article about UX design, “Make the information easy to scan. Use headers and short blocks of info or text. People can’t multi-task. The research is very clear on this, so don’t expect them to. People prefer short line lengths, but they read better with longer ones!”[3] Good UX design rules like these help web designers create user-friendly layout and content hierarchy for websites.

 

References

  1. “Why User Experience Cannot Be Designed”. Helge Fredheim. Mar 15, 2011.
  2. “Looking Beyond User-Centered Design”. Cennydd Bowles. Feb 1, 2013.
  3. “The Psychologist’s View of UX Design”. Susan Weinschenk, Ph.D. May 19, 2010.

Week 5 Glossary

Leave a comment

GCOM 360

Week 5 Glossary

 

Mind Map

 Mind Map is the diagram of notes and ideas generated from a brainstorming session. A Mind Map shows the relationships between different ideas and how they serve the central concept as a whole. Mind mapping is an efficient way of developing ideas.

 

Style Tile

Style Tile is a visual deliverable of a website design process. It contains fonts, color schemes, icons, and other interface elements to convey the essence of a brand in visual way. Web designers use style tile to demonstrate what the website would look like and to ask feedback from stakeholders before executing the website design plan.

 

Mood Board

Mood Board is a collage of inspirational elements created for the styling purpose of a particular project. It consists of color palette, typography, textures, patterns, and photos gathered to help a web designer create a style tile.

 

Persona

A persona is a fictional character created to describe a user type for a product. Personas are useful in helping designers and stakeholders understand the desires and goals of their target users.

  

A/B Testing

A/B Testing is the process of testing two web elements to find out which one users like more. A web design team shows two similar variants to a group of users, and the variant that gets more likes wins.

 

Case Study

Case Study is a research method that is implemented to make a detailed and in-depth study of a particular project, product, person, etc. In marketing, a case study is used to tell a story about a company and its customer, to capture potential customers’ interest and gain their trust.

 

KISS (not the band or the verb)

KISS is short for “Keep it simple, stupid”. It was a design principle noted in U.S. Navy in 1960. In UI designing, KISS means to create designs that are simple and user-friendly. Without much thinking, any user can figure out how to interact with a website or an app intuitively.

 

Usability

Usability refers to the ease of using a website, an app, or a digital device. For example, a website with good usability would be useful, easy to learn to use, and enjoyable to use from a user’s perspective.

 

Learnability

Learnability refers to the characteristic of a product or an interface that allows users to learn its functions easily. A product with good learnability is intuitive. It is because users immediately understand and know how to interact with the product with ease.

 

Accessibility

Accessibility is the practice of making websites accessible and usable by as many people as possible, including people with disabilities, people with slow connection speed, etc. It is a goal of human rights to have the same and equal accessibility for everyone.

Week 4 Critical Analysis

Leave a comment

GCOM 360

Week 4 Critical Analysis

 

In what ways is design effective in improving the online and mobile experience?

 

  1. Design is effective in helping users find useful information more easily.

Good websites and mobile apps are built with user-centric principles in mind.

Designers arrange the content and layout hierarchy intentionally to properly suit users’ reading habits. Friedman says in his article about design principles of good websites, “Users don’t read, they scan. Analyzing a web page, users search for some fixed points or anchors, which would guide them through the content of the page.”[1] It is because “the human eye is a highly non-linear device and web-users can instantly recognize edges, patterns and motions,”[1]. Good content and layout hierarchy can guide users to grasp useful information more efficiently.

 

  1. Design is effective in making a product easy to understand.

 

Creative Bloq Staff talked about this in their article Dieter Rams’ 10 Principles of Good Web Design: “For example, if you have a web shop, the goal is to sell, so make your design as clear as you can, carefully tailoring the experience of displaying the products and the way the visitor checks out. At its best, a website must be self-explanatory.”[2] Self-explanatory products are the result of good design. Thoughtful and intentional design decisions are made beforehand to make a website or mobile app more easy to understand.

 

  1. Design is effective in creating a both rewarding and fun experience.

Creative Bloq Staff says, “The job of the designer is to hide the fact that it is just a list and make it an interesting experience that is both rewarding and fun.”[3] All websites and mobile apps are basically making lists that help to meet users’ goals. Good designs can add different spices to these lists to make the experiences fun and enjoyable, yet still keep these websites and mobile apps highly usable and accessible to users. Lists are boring. But lists with interactive buttons, eye-catching typography, and decorative elements are fun.

 

  1. Design is effective in meeting users’ needs.

Some websites are now designed with an “approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc.”[1], and as Friedman mentions, “such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.”[1] Websites designed in a simple 1-2-3-done-steps way can effectively reduce users’ cognitive load and anxiety, making it simpler for them to meet their needs.

Before building websites and mobile apps, design teams do an enormous amount of research to create “Personas, User Scenarios, Experience maps”[4] for understanding their users. Besides that, design teams also “conduct usability testing sessions between each major iteration”[4] to see how users interact with the product, and how they can help to improve the experience for their users. This thorough researching and testing makes sure the users are well understood, and the needs will be met in a pleasant way.

 

References

  1. “10 Principles Of Good Website Design”. Vitaly Friedman. Jan 31, 2008.
  2. “Dieter Rams’ 10 principles of good web design”. Creative Bloq Staff. Mar 26, 2014.
  3. “16 killer design tips for creating mobile apps”. Creative Bloq Staff. Jan 08, 2015.
  4. “7 tips to create awesome mobile app designs”. Jerry Cao. Jul 1, 2015.

Week 4 Glossary

Leave a comment

GCOM 360

Week 4 Glossary

 

SEO

SEO is short for Search Engine Optimization. SEO involves designing website content by following the rules of search engine algorithms, in order to improve its website search ranking. This way, the website can gain more visibility and attract more traffic from search engine results.

 

B2B

B2B stands for Business to Business. It means doing business between two companies, in which one company sells products or services to another company.

 

ROI

ROI is short for Return on Investment. ROI is a ratio that helps investors measure how well their investments are doing. ROI = (gain from investment – cost of investment) / cost of investment

 

CPC (Cost Per Click)

CPC is the amount of money a business owner pays the CPC ad platform when someone clicked on his/her advertisement. Some popular platforms that people use for CPC ad campaigns are Facebook, Google, and Bing.

 

Inbound Marketing

Inbound Marketing is a technique for attracting customers to products by creating content that is relevant, useful, and educational to them on the Internet. The content can take many forms, such as blogs, videos, posts, etc. These valuable contents can organically generate traffic over a long period of time.

 

Google Trends

Google Trends is a powerful Google tool that offers comparison charts of keyword search data generated from the Google search engine. Many business use Google Trends to better understand the needs and desires of their target audience. Thus, they can get an insight of how to better improve content marketing and product development.

 

Web Analytics

Web Analytics is the process of analyzing visitors’ behaviors when they are on a website. A web analytics tool collects data of how visitors use a website, and then generates easy-to-understand reports to help website owners make effective adjustments and develop better content.

 

Bounce Rate

Bounce Rate is the percentage of how often visitors leave a web page without going to any other pages. Bounce Rate is a metric that indicates the quality of a webpage.

 

Visitor Conversion

Visitor Conversion is the role conversion of a passive visitor into an active visitor. When a passive visitor (who only reads and then leaves) finds the content of a website to be relevant and valuable, the passive visitor would then be converted into an active visitor who clicks, subscribes to a newsletter, or buys products from a website.

 

AdWords

Google AdWords is a Pay-Per-Click platform where business owners bid on the same keywords. For the business owner who pays the most, Google shows their advertisement at the highest position in the keyword searching results. Google AdWords is a good way to improve traffic within a short period of time.

Sketch, Gestalt & Geons

Leave a comment

Exercise 1: Size and Proximity

Using Move and Scale only, rearrange the provided white squares to create a hierarchy that follows the pink arrow pattern shown here.

You can also change the squares into rectangles of different proportions (click the green Transform icon and use the side handles to change proportions). Objects may overlap also, but they bust stay as white squares and rectangles.

360_Session4_ex1

Exercise 1

Exercise 2: Size and Color

Using Move and Scale only, rearrange the provided squares to create a hierarchy that follows the pink arrow pattern shown here, while factoring in the “weight” that each block’s color introduces to the mix.

Same as before, you can change the squares into rectangles of different proportions, objects may overlap, but they do not change the color of the shapes.

360_Session4_ex2

Exercise 2

Exercise 3: Geons

Using Move and Scale only, create new and recognizable illustrated shapes with the provided geons.

You can copy and repeat existing shapes (hold the option key as you select and move an object to create a duplicate) but do not color these or add new shapes. But you can also use the green Transform icon to distort the shapes if you like. You do not have to use all of the shapes.

360_Session4_ex3

Exercise 3

Week 3 Critical Analysis

Leave a comment

GCOM 360

Week 3 Critical Analysis

 

  • Describe the professional design process (Be sure to mention all major stages, as well as the roles involved).

 In A Model of The Creative Process poster, it says that, “The creative process is classically described (Wallas, 1926) as Preparation Incubation Illumination Verification”. [1]

  1. The first design process stage is Preparation. The role involved in preparation is Explorer.

It is when the explorer of a design team sets a specific objective, takes time to collect relevant information, and looks for ideas to explore the possibilities for project development.

  1. The second design process stage is Incubation. The role involved in incubation is Artist.

Charlie explained, “It’s during this phase that your conscious and subconscious minds are working on the idea, making new connections, separating out unnecessary ideas, and grabbing for other ideas.”[2] Just like he said, in this stage the artist is combing through all the information collected in the earlier stage, linking ideas together, and trying to make sense of it all.

  1. The third design process stage is Illumination. The role involved in illumination is Artist.

The illumination stage is the “Eureka Moment” when a great idea or solution occurs in the artist’s mind that could lead the team to achieving the objective.

  1. The last design process stage is Verification. The role involved in verification is Critic.

It is the stage when the design team reviews all the work they’ve done and uses critical thinking to analyze if anything else can be modified or improved to better suit the target audience’s needs.

 

  • Why is having a process essential?

 Firstly, having a creative process is helpful in executing an idea and bringing it to life. By following a well-documented process, it gives us a sense of order. Therefore, we are more likely to be kept away from the distractions of busy lives, staying focused and on track with our goals.

Secondly, as mentioned in A Model of The Creative Process, “The creative process is not just iterative; it’s also recursive. It plays out ‘in the large’ and ‘in the small’—in defining the broadest goals and concepts and refining the smallest details. It branches like a tree, and each choice has ramifications, which may not be known in advance.”[1] The iterative and recursive properties of the creative process ensure improved and augmented final results. Each successive verification is one step closer to perfection; ultimately it will create a product that satisfies target users and benefits the business client the most.

 

  • Where do you feel you might best fit into the process, i.e., which roles you’re best suited for now, or would like to know more about and grow into?

 I might fit best into the incubation and illumination stages. I’ve been doing designs with Adobe Photoshop and Adobe Illustrator for several years, so I have some experience with implementing ideas and presenting them visually. Along with what I’m learning in the GCOM 360 UI design class, I will be doing well in “Choosing the Style of the Interface”[3] and “Choosing and Creating the Preview Form”[3] if I go into the UI development industry in the future.

I’d like to know more about “Style Validation”[3] so that I can improve my verbal skills when communicating with customers, in order to make modifications and adjustments more efficiently to the UI design, and be a better team player.

 

References

  1. “A Model of The Creative Process”. Dubberly Design Office. Mar 20, 2009.
  2. “The 4 Steps of the Creative Process”. Charlie Gilkey. Sep 29, 2008.
  3. “User Interface Development Flow. 8-step Process”. Django Stars. May 31, 2017.

 

Week 3 Glossary

Leave a comment

GCOM 360

Week 3 Glossary

Information Architecture

Information Architecture is a structure design used for selecting and categorizing information strategically, in order to better covey the information to users. Information Architecture is widely used in website, software, and app developing to optimize user experience.

Wireframe

Wireframe is a graphical sketch framework of a website that displays the layout and content arrangement to help figure out how the website elements work together properly. It is implemented in the early phase of a website design. Wireframe is important in improving communication between the design team and the client, to create an ideal website building scheme.

Site Map

Site Map is the hierarchical menu of contents of a website which consists of its entire webpage links. It helps users find the specific page they are looking for, and allows search engines to discover and better understand the contents of the website.

Web Page Header

Web Page Header runs across the top section of every webpage of a website. It normally contains the company’s logo and main website navigation bar.

Web Page Footer

Web Page Footer runs across the bottom section of every webpage of a website. It normally contains a navigation menu, copyright information, security certificates and badges, and social media follow links.

Web Fonts

Web fonts are custom fonts used on a webpage that are stored on a distant server rather than a user’s local browser. They can be displayed on any browser the exact way that the designer has planned.

Creative Commons

Creative Commons is a non-profit organization that provides several copyright licenses that creators can use for free to license their works. It gives users permission to legally download and use works created by others under the license conditions selected by the creators.

Skeuomorphism

Skeuomorphism is a design principle that the look and use of digital objects are designed to be the same as those of their physical counterparts in real life. For example, the calculator app in my phone is skeuomorphic because it has a similar look and usage as a real calculator.

Web-Safe Color

Web-Safe Colors are a number of 216 colors that appear consistently the same on monitors of different operating systems. In the old days, different operating systems supported different numbers of colors. Most of them supported 256 colors, but only 216 of those colors would be displayed identically between different computers. Those colors are considered web-safe and help web designers to choose colors wisely when designing a webpage.

UI Design Patterns

UI Design Patterns are reusable solutions for commonly occurring problems in website and application UI Design. They are web designers’ standard references for content structures, navigation schemes, etc. For example, many websites have very similar login pages, because they all used the same login page UI design pattern.

Week 2 Critical Analysis

Leave a comment

GCOM 360

Week 2 Critical Analysis

What are some of the Pros and Cons of using a Content Management System (CMS)?

Pros:

  1. CMS is user-friendly.

Saric concludes, “Simple and easy to use with all the basic features and services included for free.”[1] Some CMSs like WordPress.com come with many basic and free features to start, require no coding knowledge, and are easy to set up.

  1. Every user can find a CMS that fits their needs.

There are abundant platforms and plans to choose from in the CMS market. Many popular CMS platforms have their unique target customer groups, like WordPress, Joomla, Drupal, Shopify, etc. In terms of plans, take WordPress.com for example, which offers 4 plans: a free plan, personal plan, premium plan, and business plan. These options give users more flexibility, allowing them to expand and upgrade their websites.

  1. The CMS community support is solid.

CMSs have been around in the market for over 20 years, and there are hundreds of millions of active CMS users around the world. The online and offline resources are so plentiful, that almost anyone can make the most of using CMS.

 Cons:

  1. CMS doesn’t do well with portability.

Butler says, “Two websites built upon the same platform could be speaking very different languages when it comes to their underlying code. From the point of view of one developer trying to make sense of another’s code, true portability is a myth.”[2] There are many different ways to achieve the same results in terms of writing codes. Thus it is not convenient for another developer to take over a job efficiently and simply write over the codes that were originally written by someone else. This could end up wasting the second developer’s time and the website owner’s money.

  1. WYSIWYG Editors on most CMSs are still flawed.

Andrew commented, “In most CMS implementations, you don’t see what you get on the web anyway, what you see is a text area replaced by a box with a bunch of buttons at the top and you can see what your changes will look like in the context of that box – not on the site you are managing.”[3] Users can’t immediately see the final display results while they are editing their posts in WYSIWYG Editors, therefore they cannot adjust the posts accordingly to meet their ideal expectations in real time.

References

  1. “WordPress.com vs WordPress.org: What’s The Difference Between Them?”. Marko Saric. August 27, 2018.
  2. “It’s About the Developer, Not the CMS”. Christopher Butler. August 30, 2011.
  3. “Your WYSIWYG Editor sucks”. Rachel Andrew. July 27, 2011.

 

Week 2 Glossary

Leave a comment

GCOM 360

Week 2 Glossary

Browser

A browser is one of the most important software applications on computers, tablets, and smartphones. It is the tool we use to find all the information we need on the Internet. All websites are accessed and displayed through a browser. For example, Google Chrome is a popular browser.

Hyperlink

All of the information displayed on electronic devices is created in the form of HyperText. When we hover the mouse pointer over a hypertext on a webpage, the mouse pointer turns into a hand pointer to indicate that it is a clickable hypertext, which is inserted with a URL link. So with one click, readers can be taken to another page.

Mobile First Design

Mobile First Design means to design the mobile web user experience first, before designing it for the desktop browser. This is because nowadays people are using smartphones more often than computers to access the Internet. Compared to desktop web design, mobile web design requires prioritizing the most important content for the user and providing the best user experience within a small screen.

User-Centered Design

User-Centered Design is to put user needs and user experiences as the center focus throughout a product designing process, from beginning to end. User-Centered Design creates products that are both useful and delightful for target users.

Responsive Design

Responsive Design or Responsive Web Design is a method for designing a website that fits and adjusts automatically to all electronic device screens of different sizes. Responsive websites adapt to desktop screens, tablet screens, and mobile screens accordingly by using flexible layout elements that can move fluidly. All good websites use responsive design.

UI/UX

UI means User Interface. It is where we interact with machines in order to operate and control them to complete tasks for us. Whether it’s a car, a gasoline pump, a laundry machine or a laptop, they all have user interfaces installed with buttons, knobs, handles, and screens for us to control them with.

UX means User Experience. It is what it feels like when users use a product, service, or system. For instance, the user experience of using a computer mouse includes whether it is comfortable to hold it in hand, if the buttons are comfortable to click, and if the mouse pointer responds well to the movement of the hand, etc. User Experience is sum of these subjective feelings.

Breadcrumb Navigation

Breadcrumb Navigation is a navigation method to help users know where they are within a system. The term comes from the fairy tale Hansel and Gretel, where two children left breadcrumbs behind to form a trail back home. Take Craigslist for example: if I find a nice second-hand camera on Craigslist, I can easily tell where this listing is on the whole website, because there is a path bar on top of the web page that indicates this camera is in the electronics section, within the “For Sale” category.

WYSIWYG (pronounced “wizzywig”)

WYSIWYG is short for “What You See Is What You Get”. It is a system where the content is edited, arranged, and displayed in a way that closely resembles the final printed document. For example, Microsoft Word is a WYSIWYG text editor and Adobe Photoshop is a WYSIWYG photo editor.

Blog

A blog is a website or web page where people share their ideas, thoughts, and experiences to connect with other people. A blog is more casual and personal compared to other formal websites. There are many blog platforms, like WordPress, Tumblr, Blogger, etc.

Open Source

Open Source means the source files of a project are freely accessible to the public. Anyone can use and modify the source files to improve and contribute to the project. This term is commonly used in software and application development, where the source codes are free and open for public collaboration. For example, Mozilla Firefox is an open source web browser.