1

Running Head: EPORTFOLIO DESIGN STRATEGY

ePortfolio Design Strategy

Teesha Miller, Jennie Reck, Ziang Wang

Baker University

IDT9001 Design Principles for IDT

Dr. Wendy Gentry August 4, 2019

EPORTFOLIO DESIGN STRATEGY 2

Part 1: Overview

Portfolios provide examples of artifacts documenting the achievement, experience, and

expertise of the author. A portfolio includes documented professional experience, personal and

professional accomplishments to date, pertinent knowledge, skills, abilities, education, interests,

professional goals, and objectives. A well-produced portfolio showcases work to potential

employers and represent evidence of mature competencies. Portfolios provide a platform for

independent contractors, consultants, or business owners to provide work samples to potential

clients. Additionally, portfolios provide potential employers with a snapshot of academic and

design abilities.

Students can create an academic portfolio: an academic portfolio is comprised of

academic work and educational evidence. This evidence was originally gathered for professors to

evaluate coursework quality, the student’s academic progress, and achievement. Portfolios are

also helpful in determining if students have met learning goals or grade-level academic

requirements. It can be a gauge of growth and improvement of a student’s learning.

Portfolios offer an opportunity for us to reflect and assess continuously on our

achievements and growth. They are individualized and reflect priorities, interests, and skills.

Effective use of portfolios promotes accountability and interdisciplinary communication. The

portfolio audience leaves feeling better acquainted with the author and intimately familiar with

their work style and product.

The five key design principles we will use to guide the creation of the portfolio are;

legibility, coherence, hierarchy, recognition over recall, and priming. The team utilized Wix to

create a clean and user-friendly portfolio. “The visual clarity of the text, typeface, font, contrast,
EPORTFOLIO DESIGN STRATEGY 3

and spacing of the characters used to create an aesthetically pleasing platform from which to

build” (Lidwell, Holden & Butler, 2010).

The portfolio is organized in segments highlighting the visual channel and omitting

narration, which is processed in the auditory channel using the coherence theory. “When

auditory information is presented in conjunction with information in the visual channel, the

auditory information competes with the visual information for the limited processing capacity of

the learner in the auditory channel. Moreno & Mayer (2000) contend that when processing

capacity is used to process the music and sounds, there is less capacity available for processing

the narration, disrupting the learning process. As a result, the portfolio utilizes visual stimulus”

(Moreno & Mayer, 2000).

The layout of an ePortfolio in an aesthetically pleasing, simple structure, is intentional.

Utilizing the nest structure in our design hierarchy assists users understanding complex

information, quickly and succinctly.

According to Lidwell, Holden & Butler (2010), “memory for recognizing things is better

than memory for recalling things.” In other words, people fare better at recognizing things

previously experienced than recalling data from memory. A result of using recognition over

recall, our portfolio contains standard toolbars, widgets, and commonly used navigational

tools. Users can recall using the toolbar in computer programs for personal and professional

environments.

Part 2: Audience

The ePortfolio audience is comprised of, but not limited to, fellow IDPT cohort

colleagues, prospective employers, headhunters, major advisor, portfolio committee, future IDPT

students, field professionals, leaders in the community, friends, family, casual viewers, and
EPORTFOLIO DESIGN STRATEGY 4

readers. Characteristics of the portfolio content and design decisions are driven by the author as

well as the potential audience. The vast majority of the audience has prior knowledge of us as

students, colleagues, or professionals. Baker advisors, teachers, and colleagues will know where

we have come from and where we are going. They will interact with the portfolio to provide

instruction, guidance, critique, or offers of employment.

The ePortfolio for the academic world will provide a window into the student’s reflection

process, a “comprehensive picture of learners achievement and growth” (Barett, 2019). This

picture will contain “deeper levels of understanding and improved outcomes” (O’Brien, 2006).

It will show our growth applied to the theories and knowledge of Instructional Design and

Performance Technologies. Academically the portfolio can also be used by demonstrating

critical thinking, decision making, problem-solving skills, as well as a formative and summative

assessment. The ePortfolio is today’s, “Show-and-tell of the millennium” (McWhorter, R. R.,

Delello, J. A., Roberts, P. B., Raisor, C. M., & Fowler, D. A. (2013).

Possible employers may access the portfolio to obtain information on us. Questions they

might be asking themselves as they interact online would be, “How does this person fit into our

need of an employee?” The ePortfolio “allows students to construct professional identities and

to display narrative significant to potential employers (Graves and Epstein, 2011). It also

provides the ability to “brand” ourselves professionally by providing personal attributes, values,

strengths, and passions. With a few short ‘clicks,’ the end-user travels through pieces of work,

peruses a resume, and makes a decision on the employability and enjoyability of the designer.

For our purposes, the data on our ePortfolio is presented in photographs (graphics

interchange format-gif, joint photographic experts group-jpeg, portable network graphics -png,

or scalable vector graphic-SVG), clip art, type as images, video and multimedia
EPORTFOLIO DESIGN STRATEGY 5

components. Our audience will discern the intentionality in creating a quality portfolio. Much

like a poor quality photograph, poorly selected images and typeface can negatively impact a

finished product. Adding widgets to solicit feedback from the audience is essential. Visitors can

use the ‘thumbs up’ or ‘thumbs down’ concepts or ‘comment’ with more detailed feedback.

Due to the diverse perspectives of the audience, we have incorporated

infographics. Infographics (Figure 1) are easily accessible via multiple technology mediums.

They provide our audience of 21st Century viewers with quick, handy chunks of visual

communication easily accessible on portable devices, full-size computer screens, and in print.

Figure 1

Part 3: Content Strategy

Structure and content for the portfolio were chosen to support the needs of our potential

audience. Based on LinkedIn expanded content structure, the team’s portfolios include the

following content:

 About (brief introduction of self including a belief or mission statement)

 Latest Activities
EPORTFOLIO DESIGN STRATEGY 6

 Working Experience

 Educational Background

 Licenses and Certifications

 Skills

 Blog for Testimonial

 Accomplishments

o Courses

o Projects

o Honors and Awards

o Languages

o Organizations

 Contact Us

Content for the portfolio will come from IDPT coursework as well as other academic

work. Artifacts from personal ventures, employment activities, and social media feeds will be

present to bring the portfolio alive in the eyes, hearts, and minds of the audience.

Part 4: Design Strategy

Our team has chosen five design principles to guide the design of each portfolio. The

principles are listed in priority order, legibility, coherence, hierarchy, priming, and recognition

over recall principles.

The most important design principle is legibility. The legibility principle is a clear visual

of the text based on font, typeface, lighting contrast, text blocks, and spacing. This first principle

was selected to ensure a clear reading. Therefore a better understanding of the text provided. It

will also add to the visual cohesiveness and beauty of the text.
EPORTFOLIO DESIGN STRATEGY 7

The second principle is the coherence principle. It focuses on instruction presented

through audio and video messages, multimedia. The principle stresses that when creating

instruction, it is important not to use extraneous elements, whether it be illustrations, text, or

audio. Too much information can essentially hinder learning. Therefore, the coherence principle

states only use information that is directly related to the subject. It is said when applying the

coherence principle, less is more. The coherence principle is important because it can have a

strong impact on learning and is straightforward to apply.

The hierarchy design principle was selected to organize the portfolio content.

“Hierarchical organization is the simplest structure for visualizing and understanding

complexity. Increasing the visibility of the hierarchical relationships within a system is one of

the most effective ways to increase knowledge about the system ” (Lidwell, Holden, & Butler,

2003). There are three basic ways to represent hierarchy; trees, nests, and stairs. Using the stair

structure will provide effectively organized portfolio contents, which can be browsed easily, and

the onsite search function enables viewers to locate information quickly.

“Priming is the activation of specific concepts in memory for the purposes of influencing

subsequent behaviors. First impressions, contexts, and antecedent events are all opportunities to

influence subsequent reactions and behaviors”(Lidwell, Holden, & Butler, 2003). Priming was

chosen to help with the first impression of the ePortfolio and to present information positively.

The last design principle is recognition over recall. “Memory for recognizing things is

better than memory for recalling things. Familiar options are often selected over an unfamiliar

option. People are better at recognizing things they’ve previously experienced than recalling

things from memory”(Lidwell, Holden, & Butler, 2003). Recognition memory is obtained

through exposure, and decision-making is strongly influenced by recognition. Recognition over

EPORTFOLIO DESIGN STRATEGY 8

recall will be utilized by creating easy to navigate screens. Also, recognition enables us to

“brand” ourselves through the portfolio.

A website navigation bar as a guiding tool will be placed on the top section of all the web

pages throughout the portfolio website. The stickiness principle supports the navigation bar

consistently shown at the top of the screen no matter what page the viewer is on. A ‘Back to

Top’ button will be presented on the right side edge of the current viewing page to provide

access to the navigation bar.

Following Ludwig Mies van der Rohe’s lead, “Less is more,” our color palette is limited

to one color with two additional colors. Black, white, gold, and transition colors are the website

color scheme we will follow (Figure 2). For example, the main website color is white, the text

black or grayscale, and the buttons will be gold.

Figure 2

Four types of media that we anticipate to include in our portfolios are images, video and

audio recordings, and portfolio websites. Multimedia will enhance our portfolio through excelled

communicating abilities, creating a multisensory experience, bring sound, sight, and touch to the

audience. Additionally, images, video and audio recordings, and portfolio websites will create a

point of view (POV). This POV enables the viewing audience to identify stronger with

information that needs to stand out. Lastly, our media choices will allow viewers to participate

by answering questions, providing feedback, and/or input, controlling the direction through the

site and at the pace they choose.

EPORTFOLIO DESIGN STRATEGY 9

Part 5: Rationale

The portfolio website becomes a significant media type for portfolio presentation. The

research article from Lauren Bryant and Jessica Chittum, “ePortfolio Effectiveness: A(n Ill-

Fated) Search for Empirical Support” said, “The use of a web-based interface makes the

portfolio process more flexible and dynamic and allows individuals to contribute to and alter

their ePortfolios in a way that is immediately accessible to employers or instructors. The word

artifacts can indicate text-based work, reflections, video demonstrations, and other multimedia

elements, such as blogs and wikis that are included in the ePortfolio to both promote and

demonstrate learning” (Bryant & Chittum, 2013).

The research article A Cross-Case Analysis of the Use of Web-Based ePortfolios in

Higher Education said, “Web-based ePortfolios fit well with the constructivist philosophy of

education where students can create their meaning using platforms for student-authored content

and without being restricted by organizational boundaries” (Cotterill, White, & Currant, 2007;

Light et al., 2012). “As the web-based ePortfolios are student-owned, their usefulness is

expanded to include lifelong and life-wide learning” (McWhorter, Delello and Roberts, 2013).

An article from the International Journal of Learning 17(4), An Evaluation of a Web-

Based ePortfolio System in an Australian Pre-service Teacher Education Program said, “Due to

their technological nature, ePortfolios enable pre-service teachers opportunities to develop and

improve their computing skills and understanding, throughout the process of developing their

portfolio” (Abrami& Barrett,2005; Hartley, Urish& Johnston,2006; Sherry & Bartlett,2005).

“Recent studies indicate that teachers who demonstrate competent technological skills

through the development of an ePortfolio are more likely to integrate the use of technology into

their classrooms”(Sherry& Bartlett,2005). “Investigations on the use of educational ePortfolios

EPORTFOLIO DESIGN STRATEGY 10

have linked the use of ePortfolio technology to constructivist theory; where the pre-service

teacher was utilizing ePortfolio is actively constructing their understanding of teaching and

learning ”(Johnson, Tindall-Ford and Waters, 2009). The article, What the research says about

ePortfolios, said “web technologies allow for the creation of much larger, more holistic

portfolios of the student experience, including not only academic, but also extra-curricular,

professional, and personal experiences. Viewers of the portfolio, therefore, get a much broader

view of the individual as a whole”(Taylor, 2019).

Photographs, also known as visual media, helps to define issues presented. In cases

where visuals appear by themselves, data shows pictures tend to illicit stronger opinions and

behaviors than text alone. According to Powell, Boomgaarden, De Swert & de Vreese (2015)

“when images and text are together, the frame carried by the text influences opinions regardless

of the accompanying image, whereas the frame carried by the image drives behavioral intentions

irrespective of the linked text”. Data supports the use of pictures or other visual media as

enhancements for learning. “The picture superiority effect is strongest when the pictures

represent common, concrete things as opposed to abstract things, and exposure is time-limited”

(Powell, Boomgaarden, De Swert & de Vreese, 2015).

It is said ‘a picture is worth a thousand words’, our design successfully reflects a

diversity of perspectives and people and respects diverse photographs as one of our strongest

assets. The media is an example of visuals being used defining and framing hot topic or complex

issues in society. Additionally, pictures are poven to “noticeably enhance learning and recall and

heighten the emotional consequences of their inclusion” (Powell, Boomgaarden, De Swert & de

Vreese, 2015). We’ve incorporated the schema photograph from the design way to illustrate this

point:
EPORTFOLIO DESIGN STRATEGY 11

Figure 3

Part 6: Reflection

Our team is cohesive, yet we have a diverse career background — the best way to convey

our group, and individual reflections are through our Zoom meeting.

Figure 4

Recording Link: https://drive.google.com/file/d/1QtHB1xhiAADWPMA9-AEIE7PyMj1w6PCu/view?usp=sharing

EPORTFOLIO DESIGN STRATEGY 12

References

Bryant, L. H., & Chittum, J. R. (2012, November 30). EPortfolio Effectiveness: A(n Ill-Fated)

Search for Empirical Support. Retrieved from

https://files.eric.ed.gov/fulltext/EJ1107810.pdf

Johnson, Nicola & Tindall-Ford, Sharon & Waters, Katie. (2010). An Evaluation of a Web-

Based ePortfolio System in an Australian Pre-service Teacher Education Program.

International Journal of Learning. 17. 10.18848/1447-9494/CGP/v17i04/47000.

Retrieved from

https://www.researchgate.net/publication/283083731_An_Evaluation_of_a_Web-

Based_ePortfolio_System_in_an_Australian_Pre-service_Teacher_Education_Program

Lidwell, W., Holden, K., & Butler, J. (2003/2010). Universal principles of design. Beverly, MA:

Rockport Publishers.

Nelson, H. G., & Stolterman, E. (2012). The design way: Intentional change in an unpredictable

world. Cambridge, Massachusestts: The MIT Press.

McWhorter, R. R., Delello, J. A., Roberts, P. B., Raisor, C. M., & Fowler, D. A. (2013). A cross-

case analysis of the use of web-based eportfolios in higher education. Journal of

Information Technology Education: Innovations in Practice, 12, 253-286. Retrieved from

http://www.jite.org/documents/Vol12/JITEv12IIPp253-286McWhorter1238.pdf

Mayer, R. E. (1999). Multimedia aids to problem-solving transfer. International Journal of

Educational Research, 31(7), 611-623.

EPORTFOLIO DESIGN STRATEGY 13

Moreno, R. & Mayer, R. E. (2000). A coherence effect in multimedia learning: The case for

minimizing irrelevant sounds in the design of multimedia instructional

messages. Journal of Educational Psychology, 97, 117-125.

Powell, T. E., Boomgaarden, H. G., Swert, K. D., & Vreese, C. H. (2015). A Clearer Picture:

The Contribution of Visuals and Text to Framing Effects. Journal of

Communication,65(6), 997-1017. doi:10.1111/jcom.12184

Taylor, A. C. (n.d.). What the research says about ePortfolios. Retrieved July 30, 2019, from

https://writing-speech.dartmouth.edu/sites/writing-

speech.dartmouth.edu/files/eportfolios.pdf

What Is an Infographic? And How Is it Different from a Data Visualization? (n.d.). Retrieved

August 2, 2019, from https://visme.co/blog/what-is-an-infographic/