In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

Does Your Website Tell a Story? Part 1

Does Your Website Tell a Story? Part 1

by Adrian Ababei on Dec 16 2016
“Any good story should give you a promise that it will lead somewhere that's worth your time” (Andrew Stanton).
 
This quote is just perfect as a starting point for our discussion on design principles that help you narrate your own unique (engaging and interactive) story on your website!
 
What does it mean actually?

 
It means that you need a “good story”, and yours and yours only can be nothing less but 100% authentic (for it's “yours” and no one else's, of course it's unique!) and it's up to you to make it look as fascinating as possible.

 
Then, you need a “promise”, which in visual storytelling terms it relates to the “emotion” that your web design should stir in your user.
 
Your company's craftily designed story will add meaning to products/services and will trigger emotions in your users. Without the story that you wrap them up in your products are just, well, products, like any other millions alike.

 
OK, so you must have a story to tell, anyone has, but how do you incorporate it in web design? How do you tell it to your users (or to your client's users, if you're a web design and development agency who needs to design an engaging story while building the website itself, too) just like a truly gifted storyteller would: keeping his/her audience fully engaged and thus far more likely to receive his/her message?
 
First, you answer to this 3 major questions:
 
  • Who is your audience?
  • What goals have you set up for your brand?
  • Which is the message you want to convey?
 
Next, you'd better write down (and hopefully keep this post-it somewhere close to you) the 3 major components of any engaging visual storytelling:

 
 
CONTENT     IMPACTFUL IMAGERY   INTERACTIVITY
 
 
Then, you take a close look at our 10 design principles for incorporating storytelling into your web design:

 

1. Let the Images Tell Your Story

 

Face it: people would always “assimilate” images way better than long, text-stuffed content!
 
Images have the power of triggering those emotions that you want them to way faster than words so, you should reflect on that.
 
After your seconds of reflection, you should start to carefully pick your images and to put them together in the album that will make the best storyteller for your brand.
 
It will not just appeal to your users and enchant them, visually, but it will gradually guide them deeper and deeper into your story. It will slowly “pour” your own brand message into their minds. 
 
In short: images will always make far more than “just” a “nice wrap” for your story, they can be the story itself if selected and handled with great craftsmanship.

 

2. Tell It Through Words, Powerful Words

 

And by “words”, we do mean“words”, you know, not long, tiresome textual stories (like chapters in a book).
 
Therefore, think through your choice of words for your call to action button, for your navigation menu, for the central content itself.

 
Think cohesion, as well, when you choose your words (they should complement and put together the whole “plot”) and see each one as a truly powerful little storyteller (if chosen right).
 
It's the words that you choose that will create the “voice” that will narrate your story. Therefore, depending on your company's profile, on its message and on your target audience, your “narrator” could be formal or casual, for instance.
 
Invite your visitors to “delve into” the story that's being told on your website. Invest your words with some of the “once upon a time” introductory phrase's power!
 
Note: always keep in mind that the “supreme” goal of your “string” of words narrating your brand's story is to engage and to get your visitors to interact with your website. Make your users interact, whether that means clicking on your call to action button, signing up to your newsletter or purchasing a product. 

 

3. Put a Face on Your Storyteller(s)

 
In other words “breath” some personality and authenticity into your website! Breath some “life” into its design.
 
It's such a popular trend these days that companies should reveal the team behind their brand message, the people who had been hidden behind the user interface and whose presences the visitor could just “sense”.
 
In other words: let your team tell your company's story. They're the ones that know it better!
 
Your future customers will relate far more easily with people than with the products/services that they create/provide. So, add the human factor to your brand's message, making sure it's a human factor with a unique personality (it's “your” story, after all: dare to show off its uniqueness).

 

4. Instead of “Telling” Your Story, How About “Illustrating” It?

 
Now that we've just talked about infusing personality into your visual storytelling, we should point out, as well, that illustrations add even more personality to your website than images!
 
The roles they can take on are far more varied and far more refined. And where do you add that they can be (depending on the artist of your team who created them, of course) a bit more “personal” and therefore more “powerful” than images.
 
Take a collage of crafted illustrations, for instance! You get to use them for pointing out relationships between different elements of your visual storytelling and you get to use them for presenting sequential steps (e.g. how your “innovative” product should be used).
 
They're far more dynamic than images, so consider them turning into your storytellers!

 

5. Tell It Through a Video

 
Just imagine your visitor: instead of having to go through your written or visual story, he/she'd just lay back on his chair and enjoy watching a video story! Far more convenient, don't you think?
 
Create a powerful story around your product and tell it in a video. Make it fun and wacky, artsy and visually appealing, educational, or truly impactful, depending on your company's profile.

 
You decide whether it's you who'll actually narrate it or someone else (one of the most efficient ways still is that where some your happy customers tell your story in that video).
 
And these are just the first 5 tips and tricks that we've prepared for you (from a series of 10), tips that are part of our own "toolbox", the one we rely on here, at our web design agency in Toronto, so that you can go ahead and get the most out of the true power of visual storytelling on your website. 
 
To be continued, with our other 5 tips in our next post! 
Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

5 tips to pass your Acquia Site Studio (Cohesion) Certification Exam
A few weeks ago, I had the chance to take the Acquia Site Studio (formerly Cohesion) Certification exam. In this post we are going to discuss why I took this exam and more importantly, how I passed it and became an Acquia Certified Site Studio Site Builder. Optasy and its commitment to quality through knowledge You already know that quality is part of the corporate culture of Optasy. For us quality is a key factor to protect our clients' investments and guarantee them a high ROI. But having a good QA department is not enough. Actually, it's often too late when the QA team detects an issue. At Optasy we prefer to ensure quality at the early stages of our projects, analyzing deeply the needs of our clients and transform them into effective digital experiences but we also know that the quality of the code we produce comes from the experience and the skills of our developers. That's why Optasy has an internal 'skill knowledge acquisition program' to help its employees (optasians) to acquire new skills or improve them. This program gives to each optasian one day off per month (paid by the company) to study a particular field. As a way to ensure knowledge acquisition and validation, optasians also receive paid leave to study and give their Acquia certification exams. This includes the exam cost too, that’s why many of the optasian developers are actually Acquia Certified developers or Acquia Certified site builders All things considered, it was a pretty easy choice for me to take the exam, not only do I get to improve my skills, but I get paid for it too! What are the Acquia certification programs? Acquia is a preferred Optasy partner that delivers a cloud-based digital experience platform built on Drupal that enables organizations to build experiences that scale. Acquia is committed to facilitating certification programs allowing developers to validate their Drupal skills year after year. Acquia certification exams are administered at Kryterion Testing Centers in more than 750 locations across the globe. Exams are also available as online-proctored tests and are often offered at DrupalCons across the world. What is Acquia Site Studio? Acquia Site Studio (formerly Cohesion) is a low-code solution for building and editing Drupal sites. As an Acquia partner, our team got the chance to become an early adopter of the technology.  Acquia Site Studio is a sort of layout builder on steroids without writing any line of code. Not only can you build layouts or templates, but also you can build whole websites from the headers to the footers, and everything in between, like components and widgets, just by using the interface. No code required! It's a kind of atomic design system (like Pattern Lab) where you can create and preview CSS style guides, components, template layouts, page layouts or view layout from a visual user interface with simple “drag and drop”. And all of this within your Drupal site! To be fair, Acquia Site Studio is an amazing tool allowing designers and marketers to create and modify any layout component without calling the development team. If you’re a designer with no coding knowledge you’ll be able to create totally unique layouts based on your designs using intuitive drag and drop layout builder. If you're an editor, you may choose the layout you want to use and add all the pre-designed components you wish. Want to add a slider or a 'Related Articles' block? You drag and drop it in your layout! 5 tips to successfully pass your Acquia Certified Site Studio exam As other Acquia Certification exams, the Certified Site Studio exam requires both experience and knowledge. Though the test is not difficult, it’s not something you want to run into unprepared. From my experience, the questions ranged from a very low to medium range of difficulty, there were barely any difficult questions. This exam validates your ability to: Understand the features and functionality provided by Site Studio Install and configure Site studio environment on new or existing websites. Build a website using Site Studio style builder, components and website structure design elements. The official description of this exam can be found on Acquia's certification overview page. But in short: The tests are all multiple choice. They don't require that you actually configure a Drupal site or write any code. They are available in person at a testing center, or at home by installing the exam software on your computer. The price was $155 (In my case, Optasy paid for the test) Get a good understanding of Drupal Layout Builder As I mentioned earlier, Acquia Site Studio is a Layout Builder on steroids and many concepts are the same, so having some experience with this Drupal module will help you a lot, like the inline editing tools or the concept of drawing element into the layout. This is not mandatory, but I felt really comfortable with Site Studio having this previous experience. Read carefully the contents of the exam On Acquia's certification overview page you'll find the blueprint of the exam like the following: But below it, you'll find the content itself. Read it carefully and repeatedly. This should be your guideline during your study. This will help you focus on what really matters but also to recap and structure your notes. Read and study the documentation While there are really good videos on the Acquia Academy site about Site Studio, watching all of them won't be enough. If you don't have prior experience with Site Studio, it's a good starting point. But it definitively won't give all the knowledge you need to pass the exam. Reading the documentation should sound obvious, but you'll really need to read and study all the documentation in depth. Don't leave anything behind cause the exam covers all the aspects of Site Studio, from the basics to more advanced topics. This will also give you the right vocabulary to understand the questions of the exam, since sometimes they can try to trick you changing just one word. So the technical vocabulary has an important role, and that's where the documentation comes into play. Write down some notes after reading each section. This will help you a lot during the recap! Train on the Acquia Site Studio demo environment You can request an online demo environment for free at the bottom of this page The main benefit is that you won't need an API key or an Agency key, so you can test Site Studio for free, the environment acts just like a normal Drupal website. and the site will be all yours to experiment on. This site will be your friend during your study, you should test everything you learned in the documentation here. Do it several times and try different cases. The night before the exam, after reading back your notes, try to build a site from scratch in this environment to recap all the main concepts. This is key! Don't forget the 'Miscellaneous concepts and features' part These three concepts are not placed in one section, they are dispersed in the documentation. Study and practice all of them because you'll have a question about each one. They are only three, it doesn’t sound like a lot but they are worth 15% of the exam! That is a quick and easy win! A bonus tip What really worked for me was to read a section, practice the concepts of this section in the demo environment, read again the same section and take some notes. The day after, read all the notes of the previous day, do the same 7 days later, reading back your notes and practicing again on the demo site. That way, 80% of what you studied will stay forever in your memory. Conclusions Acquia Certification Site Studio Site Builder can be a good way to validate your skills and knowledge There are barely any difficult questions Study all the documentation because the exam is based on it, but also because the exam will cover all of it. Practice a lot, recap a lot. ... Read more
Karim Boudjema / Aug 27'2020
Why Do You Need a User Journey Map? 7 Clear Benefits of Customer Journey Mapping
How precisely does a user journey map help you improve the user experience on your website/app? What are the benefits of customer journey mapping?  Should you expect a direct impact on your conversion rate? In other words, why would you bother creating one? In this post, I've listed the 7 best answers (or “benefits”, if you wish) to your legitimate question: “Why use customer journey mapping?” 1. But First: What Is a User Journey Map? What exactly is a customer journey? And why should you bother... mapping it? It's a timeline that shows all the touch points between the user and your website or application, along with the emotions, motivations, and thoughts that he/she experiences at each step of the process. A shorter “definition” would be: A user journey map is the visualization of an individual's relationship/experience with your website/app across different channels that he uses to interact with it, over time. Does this answer your question: “What is user journey mapping in design thinking?” With this map at hand, it becomes easier for you to... locate the weak spots, where you need to improve the user experience... Too many teams focus almost exclusively on the user experience at the top and on the bottom of the sales funnel and underestimate the steps in the middle. So, they ignore precisely those touchpoints that drive conversions...  2. Why Use User Journey Mapping? Top 7 Benefits What's the purpose?  Why and when to use a user journey map? What design problems does it help you solve? Here are 7 strong reasons why you'd want to bother mapping users' journey on your website: 2.1. It urges you to adopt a more user-centric approach to web design In short, you get to see your website/app through the user's eyes. From his/her point of view. You step into the user's shoes, see how the user interacts with your site, and detect those areas of the user experience that... could be better. 2.2. It helps you answer your “What if...?” questions In other words, with all the valuable information of a customer journey map at hand, you're free to brainstorm ideas. To plan new features, ambitious updates for your website that would: improve the user experience increase engagement with your website and eventually... boost conversions 2.3. It enables you to make strategic recommendations backed up by UX data Are you monitoring quantitative KPI metrics in your company? If so, then a user journey map will help you back all your future recommendations for improving your site's performance with user experience data. 2.4. It helps you see where exactly your website doesn't meet the user's expectations By mapping the customer journey, you get to detect those specific systems and processes — part of the user's journey on your website — that are not aligned with his/her expectations. And to address these inconveniences that are costing you sales. 2.5. It helps you identify opportunities and pain points in the user experience Opportunities that, otherwise, you might just... overlook. And which you can now tap into for... further research (the “what if” question, remember?) A customer journey map helps you visualize both successes —  where your website performs best from a UX standpoint — and areas where you could make an impact. 2.6. It gives you a realistic picture of the user experience on your website Maybe you're convinced that you're doing a great job, yet users are having a really bad experience.  Mapping the user journey will provide you a realistic evaluation of the situation from the user's perspective. 2.7. It helps you evaluate the impact of the changes that you make to your website A user journey map makes a great tool for measuring the impact of the updates that you make.  Updates that you'll decide to implement based on the information that such a map will provide you with. To sum up, here's a short inventory of the benefits that you get from mapping the user journey: you improve your website's/app's design you improve conversion funnels you can compare the experiences of different audience segments you get to “fuel” your user research you get to measure the impact of touchpoints 3. How to Create a User Journey Map: 8 Steps Now that you know why you'd want to map your user's journey on your website, let's see how you do that. What key stages should your user journey map template include? And I've broken the whole process down into 8 simple steps: Step 1: Set a scope for your customer journey map Which could go from a high-level map — the end-to-end user experience — to a more elaborated map, that focuses on one specific user interaction (i.e. filling in the check out form). Step 2: Create your user persona To put together an accurate persona profile, you need to do some user research. Collect as much relevant information about your target audience as possible before putting together the user persona's profile. Step 3: Determine the scenario and the user expectations For instance, a scenario could be: buying an item from your store using your eCommerce app. Whereas the user expectation, in this case, could be: having that item delivered in 2 days at most. Step 4: List the touchpoints It's that step in creating your user journey map where you make a list of all the user actions and interactions with your website/app, as well as of all the channels associated with them. Step 5: Define the problem that the user's trying to solve What's the user's motivation/intention?  What drives him/her to interact with your website?  Is he/she looking for more information on your products/services? Or has he accessed your website to buy a specific product? Step 6: Make a Sketch of the User Journey With all the information you've collected up to this point, put together a step-by-step interaction map. Where each “step” stands for a specific experience that the user persona has when interacting with your website. Step 7: Pinpoint the user's emotional state at each step in the journey What does the user feel at each step of interaction with your website/app? This empathy map will help up visualize the “ups” and “downs” in the user experience, so you should know where to... intervene. Step 8: Validate and adjust the user journey accordingly Rely on the information you will have collected during your usability testing sessions and from your app analytics to put your user journey map against a real use case. No matter how truthful your map might look to you (since you know it's based on intensive user research), it's crucial to validate it and to... adjust it, if needed. 4. User Journey Mapping vs User Story Mapping “Is a user journey like a user story?” Well, there are some key differences to be aware of. What's a user story? user stories describe small, specific tasks a group of user stories forms an “epic” they're essential for user acceptance testing and agile development The standard formula for creating a user story statement if the following: As a..., I want to..., so that I...” For instance: As an SEO specialist, I want to keyword-optimize this text, so that the website ranks higher in Google search results. And how is a user journey map different from a user story? When you map a customer journey you start with post-in notes on a whiteboard. You: determine who your website/app addresses to sketch the big picture detail each “epic” define a release strategy define a learning strategy (small experiments to minimize risks) define a development strategy Is it much clearer to you now why you need a user journey map for improving the UX  on your website, but the process seems too... time-consuming to you? Just shift the burden to us then... Drop us a line and let's identify all those opportunities for improving the experiences your users have when interacting with your site/app. ... Read more
Silviu Serdaru / Aug 26'2020
How to Approach User Experience Design: The 8-Stage Process (with specific activities and deliverables for each phase)
Should you start by analyzing your competitors or... by building the user persona for your new software product? Then, should you jump straight to paper sketching or...? How to approach user experience design, more precisely? What are the key steps to include in this process? And what's the right order to carry them out? What are the specific activities to perform? What deliverables should you create at each step? Let's get you some answers now. Here's how our own UX design process looks like. Take it as a tried-and-tested 8-point checklist. One that you can use to make sure that you complete the end-to-end cycle when designing the user experience for your apps (or websites). But First: What Is User Experience Design? “If UX is the experience that a user has while interacting with your product, then UX Design is, by definition, the process by which we determine what that experience will be.” (Source: usertesting.com) Let's try an ultra concise, yet comprehensive definition: UX design is... design has the user's experience at its very core. So the process of designing the best experience for your users calls for a step-by-step approach where you: do extensive research, trying to understand your users' needs and problems collect a whole lot of data that'd help you figure out how users interact with your product (so you can anticipate common user flows) plan out everything, all the elements that go into your software product are thought through and designed from the user's viewpoint run extensive user tests on your prototype The whole point of this step-by-step user experience design process? (or why is user experience design important?) It helps you answer your “Why”, “What”, and “How” questions related to your product before you go ahead and... develop it: Why would target customers use your product? Does it help them perform a specific task? Or does it reflect some of their personal values, maybe (i.e. Apple users identify themselves with people who “think differently”)   What helps them perform the actions that they expect to perform with your product (which of your product's features and functionalities)?   How do they perform those actions? Does your app provide an easy and aesthetically pleasant way for them to carry out their tasks? Source: usertesting.com 1.1. User Experience Design vs User Interface Design: How Are They Different? Take UI as everything that the customer comes into contact with when using your app. From the graphics he sees to the on-screen buttons he touches, to the mental concepts he's using while interacting with your app... And take the UX as the overall experience of that interaction. “Something that looks great but is difficult to use is exemplary of great UI and poor UX. While Something very usable that looks terrible is exemplary of great UX and poor UI.” (source: careerfoundry.com) “And what is good user experience design?” you might ask yourself. Good UX helps users do what they want to do when interacting with your business. But measuring the success of your UX design process isn't that straightforward, though: you need to get your target customers to... experience your app/website then you need to keep refining it; to adjust it to the changing needs and new challenges they face, making sure it remains user-friendly over time Now, let's see which are the 8 typical stages of a user experience design process.  Stages which might be swapped in and out, depending on your team's familiar workflow and your project's specific requirements. Let's dive in: Stage 1: How to Approach User Experience Design: Ground Your Work in User Research   “What is the first step of a UX design process?” you ask?  Get to know your target customers as much as possible. What type of people will be using your app? What are their motivations, behaviors, needs, and goals? Designed with "Make My Persona". And having just “an idea” is not enough. It's at this stage of the process where you gather and analyze as much data as possible on your app's target users: run some web analytics take user interviews conduct online surveys put together your user persona profile, which is no more than an archetypal representation of your target users (their goals and behaviors) that helps you validate all your future design decisions Dive deep into all the data you've collected so far and start looking for patterns and trends. It's these common patterns that'll help you distill this huge pile of data and see who the “average user” for your product is.   Stakeholders involved UX design team Deliverables: usability studies user personas user stories Stage 2: Define the Problem That the User Is Having “What are the most important things to understand throughout a UX design process?” The problem that you're trying to solve with your product. And why solving that problem would be beneficial to your business. In other words, how the user’s problem aligns with your business goals. Articulating a clear problem statement is one of the UX design process best practices. Figure out what the user needs (or what problem he's dealing with) and plan out your product as a solution to those needs. For example: It's not a shopping cart that your online store's customers NEED. What they need is an overview of the items they've selected and of their total cost. The shopping cart is the solution to precisely these 2 customer needs.  Here are 4 helpful questions to focus on: What problem do we want to solve? What are our users' needs and why are these particular needs important to them? Are there any existing or anticipated limitations to address? What are the benchmarks for success? Source: uxdesign.cc Stakeholders involved product manager product design team Deliverables: a clear user-need statement that includes: a user, his problem or need, and his goal storyboards customer journey map Stage 3: Do Some UX Competitive Analysis  Who are your competitors? And what approaches have they adopted for their own products? How are they different/better than yours? How well do other software products, with similar features, perform? This is that stage of the process where you run extensive research on: your target market your competitors the latest UX/UI trends Stakeholders involved design team  Deliverables: market research competitor analysis Stage 4: Sketch Out a Wireframe    Another valid answer to your dilemma — “How to approach user experience design” —  is:  You put together a low-fidelity wireframe for your software product. It'll be the link between: your app's/website's visual design and its information architecture And it's also a quick and effective way to get your idea across all the teams involved. At this stage you: brainstorm ideas  explore possible solutions to that user's problem/need that you've identified in stage 2 (and hopefully come up with a better solution than your competition)  explore several ways of displaying different types of content and information identify the content that you need to prioritize, according to how important it is for the user journey No need to invest too much time (and creativity) into something too detailed. Whiteboard photos, pencil sketches on paper will do since at this point you'll be focusing exclusively on: the main functionality the user experience … on every screen Stakeholders involved design team Deliverables: user flows hand-drawn sketches wireframes sitemap lots and lots of sticky notes with ideas written on, that you can sort by hierarchy and group by theme Stage 5: Create a Prototype Another one of the UX design process best practices to follow. That's because you'll want to have a draft version of your product that users could test before you do any coding. The great thing about prototypes is that they simulate the real experience — you touch the “Next” button and it takes you to the next screen— so that testers can have a real feel of how the real app will function. They get to experience its design in... real-time. Stakeholders involved design team Deliverables: paper prototype design images icons design specifications such as colors, typography, theme, guidelines, styles low-fidelity prototype high-fidelity prototype interactive prototype Stage 6: Have It Tested by Real Users  How to approach user experience design? You collect as much feedback as possible on your product prototype. And here are 3 battle-tested methods: usability testing remote user testing A/B testing And you sure don't run short of means to make the most of user testing: from simple observations to surveys to questionnaires  to interviews … there are “n” ways to get your valuable feedback from real users. Deliverables: user feedback usability report analytics report audit reports on the prototype's UI lists of areas that need improvement (or features that should be removed/replaced) Stage 7: Develop and Launch Time to bring the developers in! Now it's their time to shine. To implement the designs and: structure the database build the server build the back end functionality tie the back-end to the UI  One of the UX design process best practices to follow here is having the design team... stick around. They might need to intervene and make small tweaks to their design or simply to communicate any issues that arise while developers are implementing it. Stakeholders involved development team design team Deliverables:  a high fidelity version of the user interface with functionality and user experience baked in Stage 8: Evaluate  Time for a new round of... analysis. And here are a couple of questions to guide your evaluation process: How do users respond to our product? Do they find it easy to use? Where does it get it right, in terms of user experience, and where does it... fail? Does it manage to solve their problems/meet their needs? Stakeholders product manager design team Deliverables: new feature ideas that might need to get implemented lists of issues reported Final Word: The UX Design Process Comes Down to Learn.Think. Make So, to give you a final answer to your question — “How to approach user experience design?”: Many of the stages included in our process are debatable and perfectly... optional (i.e. you might feel like skipping the wireframing part if you have a solid design system set in place). Feel free to swap stages in and out and to adjust the process to your own business, your teams, and your specific project requirements. What you should not consider as optional is the 9th step in designing the user experience that I haven't included here: The UX design process is an... ongoing one. You'll need to constantly improve and to polish your designs to fit new circumstances, new contexts, future user challenges... No UX experts in your team to hand over all these tasks to? We're here to help! Just drop us a line and let's design the best user experience for your app/website. Image by William Iven from Pixabay ... Read more
Adriana Cacoveanu / Aug 24'2020