I once had a client who wanted a website redesign for her Tai Chi practice in Bristol. Her goals were to expand the business by gaining new corporate clients and students for her classes. After creating several personas of the target audience, I found a reoccurring user goal was “getting in touch with the teacher prior to attending one of her classes”. Therefore, one of the key means to help the user experience flow was to implement a feedback message after contacting the teacher via a form. This notified the user that they successfully sent their request. More importantly, the motion design and personalised message gave a sense that she was directly replying to them, adding a personal touch to the interaction and reinforcing her brand personality.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t

2. Personality<\/h2>
Establishing the personality\/ values of a brand and communicating this through visual elements is another way to design for emotion. The visual appearance of a website is the first thing a user encounters and will make a snap judgement upon. An interface that is aesthetically designed with images, typography and text is more desirable, and is consequently perceived as more usable.<\/p>
Let\u2019s go back to the Tai Chi example: the teacher and her brand revolved around principles of Tai Chi, including balance, dominance, control, culture and spirituality. Before going on to prototype the website, I created a style guide to help manifest these qualities through visual design elements.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t $\"\"$ \t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
I then considered the context of the design: What is the purpose of this website? What role does it fulfil? A core purpose of the website was to convince users that the service was more attractive than others. This meant that the home page should act as packaging for her service, attracting users through eye catching visual elements. The environment behind the buddha is like a window into something new, rich and peaceful; that is what prospective students are seeking in trying out a new activity like Tai Chi.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t $\"\"$ \t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
3. Information design and typography<\/h2>
The design of information on a website is another impactful way of eliciting emotion. Again, this combines qualities that are usable (content, tone of voice) with desirable (typography, layout) to convey a message beyond the content itself. When this is done effectively, the user feels as though they are being directly addressed by the information.<\/p>
By hiring the Tai Chi instructor, new students and corporate clients are looking to embark on a new experience. Therefore, the tone of language should be personal, inspiring and motivational. Although the content itself was already written out, I was able to enhance the tone of the information through visual hierarchy, composition and typography.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t $\"\"$ \t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t $\"\"$ \t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
Hopefully, this practical example has convinced you that designing for emotion can make a simple web site into a fun and meaningful experience. It\u2019s important to note, however, that there is no set rule book on how to make a usable, desirable and useful design: although there is guidance such as the examples I provided, intuition has a part to play in eliciting emotion.<\/p>
Fear not! A thorough understanding of your users, the context of use and personality\/ values of the brand are all breadcrumbs that lead you to designing an experience that truly resonates.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
Resources<\/strong><\/p>
Flow<\/em> (https:\/\/link.springer.com\/chapter\/10.1007\/978-94-017-9088-8_15<\/a>)<\/li>
Usable, desirable, Useful <\/em>(https:\/\/www.researchgate.net\/publication\/279156097_Useful_Usable_Desirable_Applying_User_Experience_Design_to_Your_Library<\/a>)<\/li><\/ul>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"
Three ways to evoke emotion through your web site design by Jess Kent-Woolsey, Design Enterprise Studio Member, March 2022 Emotions play an important role in our experiences. They paint our realities, guide decision making and draw attention. This also applies in the digital world when we design user experiences. How on earth can a digital […]<\/p>\n","protected":false},"author":1,"featured_media":1325,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[4,61,16],"_links":{"self":[{"href":"https:\/\/designenterprisestudio.com\/wp-json\/wp\/v2\/posts\/1280"}],"collection":[{"href":"https:\/\/designenterprisestudio.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designenterprisestudio.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designenterprisestudio.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designenterprisestudio.com\/wp-json\/wp\/v2\/comments?post=1280"}],"version-history":[{"count":60,"href":"https:\/\/designenterprisestudio.com\/wp-json\/wp\/v2\/posts\/1280\/revisions"}],"predecessor-version":[{"id":1788,"href":"https:\/\/designenterprisestudio.com\/wp-json\/wp\/v2\/posts\/1280\/revisions\/1788"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designenterprisestudio.com\/wp-json\/wp\/v2\/media\/1325"}],"wp:attachment":[{"href":"https:\/\/designenterprisestudio.com\/wp-json\/wp\/v2\/media?parent=1280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designenterprisestudio.com\/wp-json\/wp\/v2\/categories?post=1280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designenterprisestudio.com\/wp-json\/wp\/v2\/tags?post=1280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}