Tag Archives: designing

Thumbnail

Designing The Invisible: 3 Things I Learned Designing For Voice




Designing The Invisible: 3 Things I Learned Designing For Voice

William Merrill



The current iteration of voice-controlled digital assistants are still struggling to integrate as seamlessly as the big three voice players of Amazon, Google and Apple would hope. A 2017 report by Voicelabs states there’s only a 3 percent chance a user will be active in the second week after downloading a voice application and 62 percent of Alexa’s skills are still to get any kind of rating on its store (as of September 2017).

As designers, we have a real opportunity to provide valuable meaning to these assistants but we’re still trying to work out where the technology can add real benefits to the user. For many, embarking on a voice UI (VUI) project can be a bit like entering the Unknown. There are few success stories for designers or engineers to be inspired by, especially within contexts that illustrate how this nascent technology could help people thrive in new ways.

Experimenting With speechSynthesis

The Web Speech API gives you the ability to voice-enable your website in two directions: listening to your users via the SpeechRecognition interface and talking back to them via the speechSynthesis interface. All of this is done via a JavaScript API, making it easy to test for support. Read article →

As part of BBC2’s Big Life Fix docuseries where teams of inventors create new and life-changing solutions for people in need, I had the opportunity to test and build a voice-controlled assistant for a woman called Susan. Susan has been living with a progressive form of Multiple Sclerosis for over 20 years and is now unable to complete everyday tasks for herself easily. With full-time carers, she relies on others to wash and dress her and has no ability to even change the channel on the TV without help.

While voice technology seemed like it would provide the smoothest pathway to overcoming Susan’s physical difficulties, Susan has never used a smartphone, so propelling her straight into an interaction with a voice assistant was never going to be easy — we had to think cleverly to help her learn to communicate with an incredibly alien technology.

The result for Susan is a highly customized voice-controlled assistant that now empowers her to complete everyday tasks with the freedom that others take for granted — from making a phone call to family, to listening to music. Built as an enhanced version of Amazon Alexa technology on their Echo Dot device, Susan’s voice assistant also involved physical customization as we 3D printed a casing in the shape of her favorite animal, an owl.

As we rapidly experimented and iterated on a solution for Susan, my team and I uncovered dozens of intricacies that come with designing for voice in a more inclusive and accessible way. Although it was a unique project, there were three key takeaways that are applicable to any VUI project.

1. Make It Personal

The tech works. It’s not just a matter of sitting back and waiting for computing power to increase in line with user expectation. We found the voice detection, recognition, and synthesis of each of the devices far more powerful than we anticipated. And it’s not as though there’s a lack of choice. There are over 30,000 Alexa skills on Amazon with an average of 50 new ones being published daily. Skills are specific capabilities that enable designers and developers to create a more personalized voice experience when using devices like the Amazon Echo Dot. They operate much like an app within the App store on your smartphone, allowing you to customize your voice assistant the way you please.

However, there currently is a big barrier to access. Skills must be added via the app rather than the device, often negating the benefits of a VUI and breaking the conversational flow (not to mention excluding those who can’t/won’t use a smartphone). This makes the process feel clumsy and disjointed at best, completely isolating at worst. Even once a skill is installed, no skill visibility and a restricted time frame for interaction result in a lack of confidence and anxiety; can it do what I want? How do I talk to it? Has it heard me? So, how do you build that connection and trust?

For Susan, it meant stripping away the unnecessary and presenting a curated selection of core functionality. By personalizing the content to the unique behaviors and requirements, we presented much-needed clarity and a more meaningful experience. Susan wanted to perform key tasks: answer the phone, make a call, change the TV channel, play music, and so on. By getting to understand her and her needs, we created an assistant that always felt relevant and useful. This was quite a manual process, but there is a huge opportunity for machine learning and AI here. If every voice assistant could offer an element of personalization, it could make the experience feel more relevant for everyone.

As we were designing for one individual, we could easily tailor the physical elements of the product for Susan. This meant designing — then 3D printing — a light diffuser in the shape of an owl (her favorite animal and something with a significant meaning to her). The owl acted as a visual manifestation of the technology and gave her something to talk to and project towards. It was her guide that gave her access to those skills she wanted, such as listening to music. As it was personal to her, it made the potentially alien, intimidating technology feel much more approachable and familiar.


Humanizing technology helps make it more accessible: Susan’s personalized owl glows in response to her voice, letting her know she is being heard and understood.


Humanizing technology helps make it more accessible: Susan’s personalized owl glows in response to her voice, letting her know she is being heard and understood. (Large preview)

Although a fully custom 3D printed housing isn’t an option for every VUI project, there is an opportunity to create a more relevant device for people to communicate with, especially if their needs or usage of home assistants is quite specific. For example, you might talk to a voice-enabled light about your home lighting and a fridge about your groceries.

2. Think About Audio Affordances

Currently, the user does all the heavy lifting. With an obscured mental model and no hand-holding from the tech, we’re forced to imagine our desired endpoint and work backwards through the necessary commands. The simplest tasks aside (set a timer for 5 minutes, play Abba on Spotify, etc.), that’s incredibly hard to do, especially if you suffer from ‘foggy moments’ something that Susan explained to us — difficulty in finding the right words.

When Apple famously used skeuomorphic visual elements for their early iPhone apps, the user gained valuable, familiar reference points which afforded its use and method of interaction. Only once the mental model became more established did they have the freedom to move away from this literal representation, into their current flat UI.

When designing our VUI, we decided to lean on the well-established menu system seen throughout digital and web navigation. It’s a familiar tool which demands less cognitive processing from the user and allowed us to incorporate methods of way-finding that didn’t result in starting from the beginning if things went wrong.

As an example, Susan found verbalizing what she wanted, in the time frame offered by current digital assistants, a stressful and often unpleasant experience; often compounded by an error message from the device at the end of it. Rather than expecting her to give an explicit command such as “Alexa, play Abba from my Spotify playlist,” we decided to create a guided menu tool that could help her start slowly and get incrementally more specific about what she wanted Alexa to do.

Susan’s owl now prompts her with a curated list of options such as, “Play Music” or “Watch Something.” If she chooses music, it gets more specific as she progresses through each decision gate, to uncover the genre she feels like listening to; in the case of Abba, she would select “60s music.” This enables Susan to navigate to her desired outcome much more easily, and at a pace that suits her. All the while, the owl was glowing and responding to her voice, letting her know she was being heard and understood.


Susan’s voice assistant gives her back some of the independence she lost to her condition, from empowering her to making a phone call to family, or simply listening to music.


Susan’s voice assistant gives her back some of the independence she lost to her condition, from empowering her to making a phone call to family, or simply listening to music. (Large preview)

3. There’s More To VUIs Than Voice

The non-lexical components of verbal communication impart a great deal of meaning to a conversation. Some can be replicated by the synthesized voice (intonation, pitch, and speed of speaking, hesitation noises, to name a few), but many can’t (such as gesture and facial expression). The tangible elements of the product need to replace these traditional, visual cues for the interaction for it to feel even slightly natural. But there’s more to it than that.

Firstly, when someone interacts with a product designed to replicate human behaviors, the visual components are interpreted by the user’s preconceived notions of the world (both inherent and learned) and affect their emotional responses. If something looks imposing and cold, you’re much less likely to initiate a conversation than with something that looks cute and cuddly.

In our case, as the technology was so foreign to the user, we needed to make it feel as familiar and inviting as possible — an owl. In doing so, we hoped to remove the feelings of anxiety and frustration we had experienced with other products. We also amplified the visual side of it — there is one color for an idle state — a gentle glow, almost like breathing, but when Susan says the wake words the light changes to awake and listening.

You can go further. Apple, for example, has a full-color display on their Homepod which affords a higher level of nuance to their interaction and visualization. Adding a visual experience might sound counterintuitive, but visualizations can be very helpful for the user.

Conclusion

Although applied to an individual use-case, these top-level learnings can help any project hoping to utilize the inherent benefits voice affords. Personalizing the content (where possible) provides much-needed clarity and a logical, relatable navigation system reduces cognitive load. Finally, don’t underestimate the importance of the visual components; when done well, they not only deliver fundamental conversation cues, they set the tone for the whole interaction.

For those looking to experiment with voice, Amazon now showcases tens of thousands of skills from companies like Starbucks and Uber, as well as those created by other innovative designers and developers. The Alexa Skills Kit (ASK) is a collection of self-service APIs, tools, documentation, and code samples that make it easy for you to add skills to Alexa, and start creating your own solutions. Wondering if voice even makes sense? Here’s some considerations before you get started.

Smashing Editorial
(ra, il)


See more here: 

Designing The Invisible: 3 Things I Learned Designing For Voice

Prototyping An App’s Design From Photoshop To Adobe XD

(This is a sponsored article.) Designing mobile apps means going through different stages: pre-planning, visual concepts, designing, prototyping, development. After defining your project, you need to test how it will work before you begin to develop it.

This stage is captured by prototyping. Prototyping allows designers to get a feel for the functionality and flow of an app, and to preview screens and interactions. Testing with prototypes provides valuable insights into user behavior and can be used to validate the interaction model. It is possible to represent the interactivity of an app before its development, and this gives developers a global vision of an app’s functioning, user behavior and steps to afford.

Prototyping is the simulation of the final result of an app’s development. Through this step, it’s possible to show a workflow of an app and consider problems and solutions. The two fundamental roles who will work in this phase are the user interface (UI) designer, who creates the look and feel, and the user experience (UX) designer, who creates the interaction structure between elements.

There are many ways to design and create an app’s look. As a loving user of Adobe products, I work most of the time in Illustrator and Photoshop. Illustrator helps me when I create and draw UI elements, which I can simply save and use later with Adobe XD. The process is the same as I’ve done for icons and that I showed you in my previous article “Designing for User Interfaces: Icons as Visual Elements for Screen Design.”

Photoshop comes in handy when I have to work with images in UI. But that’s not all: With the latest Adobe XD release, we can bring Photoshop design files into XD very quickly, and continue prototyping our app.

Today, I’ll offer a tutorial in which we discover how to transfer our app’s design from Photoshop to XD, continuing to work on it and having fun while prototyping. Please note that I’ve used images from Pexels.com in order to provide examples for this article.

We will cover the following steps:

  1. Simple hand sketch,
  2. Designing In Photoshop,
  3. Importing PSD files to XD,
  4. Developing a prototype,
  5. Tips.

For Adobe tools, I will use Photoshop CC, Illustrator CC and XD CC — all in the 2018 versions.

Let’s get started!

1. Simple Hand Sketch

Before we start designing our app, we need a plan for how to go about it. There are some questions we have to answer:

  • What is the app for?
  • What problem does it solve?
  • How easy is it to use?

Let’s assume we want to create an app for recipes. We want something simple: a space for pictures with ingredients and recipes.

I sketched by hand what I have in mind :



Then, I grabbed Photoshop and created my layouts.

2. Designing In Photoshop

Before we create layouts for our app, we can take advantage of a very useful resource by Adobe: free UI design resources. Because we will be designing an iOS app, I downloaded the iOS interface for Photoshop.

Feel free to experiment with the layouts you’ve downloaded.

In Photoshop, I created a new blank document from a preset for the iPhone 6 Plus:



Below is our layout, as I designed it in Photoshop. I tried to reproduce what I drew by hand earlier.









The PSD file contains four artboards. Each has its own layers.

Note: The images used in this prototype are from Pexels.com.

Let’s see how to import this PSD file into Adobe XD.

3. Importing PSD Files To Adobe XD

Let’s run Adobe XD and click on “Open.” Select our PSD file, and click “Open.”



Ta-dah! In a few seconds, you’ll see all of your PSD elements open in XD.



More importantly, all of the elements you just imported will be organized exactly as they were in Photoshop. You can see your artboards on the left:



When you select an artboard, you will see its layers on the left — exactly the way it was in Photoshop before exporting.



Let’s do something in XD to improve our layout.

Go to Artboard 3. In this artboard, I want to add some more images. I just created three spaces in Photoshop to get an idea of what I want. Now, I can add more with some very simple steps.

First, delete the second and third image. From the first rectangle, delete the image, too, by double-clicking on it. You’ll have just one rectangle.



With this rectangle selected, go to “Repeat Grid” on the right and click it. Then, grab the handle and pull it downward. The grid will replicate your rectangle, inserting as many as you want. Create six rectangles, and adjust your artboard’s height by double-clicking on it and pulling its handle downwards.





Now, select all of the images you want to put in rectangles, and drag them all together onto the grid you just created:

Et voilà! All of your pictures are in place.

Now that all of the layouts are ready, let’s play with prototyping!

4. Developing A Prototype

Let’s begin the fun part!

We have to create interactions between our artboards and elements. Click on “Prototype” in the top left, as shown in the image below.



Click on the “Start here” button. When the little blue arrow appears, click and drag it to the second artboard. We are connecting these two artboards and creating interaction by clicking the intro button. Then, you can decide which kind of interaction to use (slide, fading, time, etc.).

See how I’ve set it in the image below:



Scrolling tip: Before viewing our prototype preview, we need to do another important thing. We have to make our artboards scrollable, giving them the same effect as when pushing a screen up and down with a finger on the phone.

Let’s go back a step and click on “Design” in the top left. Check which artboards are higher — in this case, the third and fourth. Select the third artboard from the left, and you’ll see the section “Scrolling” on the right. Set it to “Vertical.”

Then, you’ll see that your “Viewport Height” is set to a number, higher than the original artboard’s size. That’s normal, because we made it higher by adding some elements. But to make our artboard scrollable, we need to set that value to the original artboard’s size — in this case, 2208 pixels, the height of the iPhone 6 Plus, which we set in Photoshop and then imported to XD.

After setting that, you’ll see a dotted line where your artboard ends. That means it is now scrollable.



To see our first interactions in action, click on “Prototype” in the top left, and then click the little arrow in the top right. See them in action below:

Let’s finish up by connecting all of our artboards, as we’ve seen before, and check our final prototype. Don’t forget to connect them “back” to the previous artboard when clicking on the little arrow to go back:



And here is the final demo:

In this tutorial, you have learned:

  • that you can design your app in Photoshop,
  • how you can bring it into Adobe XD,
  • how to create a simple prototype.

Tips

  • Decide on one primary action per screen, and highlight its containing element through visual design (e.g. a big CTA).
  • White space is very important on small screens. It prevents confusion and gives the user more clickable space. And here comes that rule again: One primary action works well with more white space.
  • If you are not on a desktop, avoid all unnecessary elements.
  • Always test your prototypes with regular users. They will help you to understand whether the flow is easy to follow.

This article is part of a UX design series sponsored by Adobe. Adobe XD is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype, and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

Smashing Editorial
(ra, al, il)

Source article:

Prototyping An App’s Design From Photoshop To Adobe XD

Stop Designing For Only 85% Of Users: Nailing Accessibility In Design

As designers, we like to think we are solution-based. But whereas we wouldn’t hesitate to call out a museum made inaccessible by a lack of wheelchair ramps, many of us still remain somewhat oblivious to flaws in our user interfaces. Poor visual design, in particular, can be a barrier to a good user experience. Whereas disability advocacy has long focused on ways to help the user adapt to the situation, we have reached a point where users expect products to be optimized for a broad range of needs.

Visit site:

Stop Designing For Only 85% Of Users: Nailing Accessibility In Design

Never Stop Learning With Conference Live Streams And Videos

What makes a great conference? It fuels your ideas and polishes up your skills. It fosters your professional growth and takes your work to the next level. Luckily, a lot of conferences provide videos of their talks after the event has ended, some do even stream live to pass on their knowledge even if you couldn’t attend.
The videos collected in this round-up revive the spirit of the conferences they were recorded at and cater for a lot of fresh insights and light-bulb moments to make the learning never stop.

Jump to original: 

Never Stop Learning With Conference Live Streams And Videos

Designing The Most Desirable Product: Exploration of Banknotes Design


As digital technologies are implanted deeper in the world, making more and more aspects of life intangible, it’s hard to imagine the world without any kind of banknotes, or paper money. In the dramatic history of our world, money became not just generic objects of payment, but also symbols of societies.

Designing The Most Desirable Product Of All Time: Paper Money

Combining utility and exclusivity, money is one of the challenging objects to design. And as with any complex task, currency design holds some valuable lessons for us, web designers. This article is an attempt to formulate some of these lessons and, therefore, draw your attention to the inspirational nature of paper money.

The post Designing The Most Desirable Product: Exploration of Banknotes Design appeared first on Smashing Magazine.

See original article here: 

Designing The Most Desirable Product: Exploration of Banknotes Design

Intimate And Interruptive: Designing For The Power Of Apple Watch


“We’re all back at square one again.” That was the overwhelming lesson we learned while designing our first major Apple Watch app for launch. To be successful in designing for this device, the entire way we think about app design will need an overhaul.

Intimate And Interruptive: Designing For The Unique Power Of Apple Watch

The patterns and processes that became standard for other devices are of little help here and, in many cases, can actively hinder efforts to create a beautiful, functional and user-centric watch experience.

The post Intimate And Interruptive: Designing For The Power Of Apple Watch appeared first on Smashing Magazine.

View original post here:  

Intimate And Interruptive: Designing For The Power Of Apple Watch

Here’s What a Winning Click-Through Landing Page Looks Like

winning-click-through-landing-page
These pages got all the stock image hand models clickin’. Image source.

Last month we held a contest on the blog, challenging marketers to create a click-through landing page to promote our latest ebook, Attention-Driven Design: 23 Visual Principles for Designing More Persuasive Landing Pages.

It was an experiment to determine which design principles and “best practices” make for a seductive click-through landing page. But instead of getting a panel of judges to wax poetic about which landing pages they thought were great, we thought we’d publish the pages and let visitors decide: which ones would actually get people to click through and then convert?

Before we talk about the winning pages and what made them so darn titillating, a quick review session. Let’s take a look at how click-through landing pages differ from their lead gen landing page cousins — both in form and function.

WTF is a click-through landing page?

Click-through landing pages do exactly what it says on the tin. Unlike lead gen landing pages, they don’t have a form on the page asking people to opt in. Instead, they have a goal of convincing visitors to click through to another page (where the actual conversion happens).

They’re frequently used in ecommerce funnels to describe a product in detail and “warm up” visitors for their purchasing decision. They combat the cognitive dissonance that is created when someone clicks on an ad for a specific product and they wind up on a seemingly irrelevant generic product page.

In Attention-Driven Design ebook author Oli Gardner’s words:

Click-through pages are a great way to create an interstitial experience that confirms the intent of your ad in a simple way, maintaining the attention of your visitor, and then guides them through the purchasing decision before taking them further down the funnel.

Simple enough, yeah? But if you’re gonna use a click-through landing page to “warm up” visitors and reassure them that they’ve made a “good click,” you also wanna be sure you’ve optimized the heck out of it.

Without further ado, let’s look at our winning click-through landing pages — the ones that lead to the most ebook downloads  — and see which Attention-Driven Design principles they employed to get people to convert.

4th place winner: Conversion Lab

Conversion Lab’s landing page does an excellent job of teasing visitors with sneak previews of the ebook above the fold:

conversion-lab-click-through-landing-page

A little lower on the page, for prospects who need a little more information to be persuaded, they include a SlideShare preview of the core concepts from the book.

attention-driven-design-slideshare

Even with all the additional information, the page is really easy on the eyes. Here’s how Oli Gardner put it when we asked him about the page:

The information hierarchy is strong with a nice linear top-to-bottom reading experience and nicely balanced font sizes for easy reading. Overall, a very clean design – which I’ve come to expect from Conversion Lab.

Indeed. Congrats on placing 4th, Conversion Lab!

mean-girls-linsay-lohan

3rd place winner: Tim Ruof

What really stands out about Tim’s page is his generous use of directional cues to guide your eye down the page.

tim-ruof-click-through-landing-page

One minor quibble: Oli pointed out that the model is looking downwards — under the CTA — so there’s no benefit to the angle of her gaze.

Still, this is somewhat counterbalanced by the arrow pointing to the call to action button, along with the other arrows on the page. Oli elaborated:

I like how the continuation arrows are used to guide you through the reading experience. It may not seem like a big deal, but this really helps both the visual and information hierarchy.

Tim also got crafty with his social proof, pulling actual quotes from Twitter as testimonials:

click-through-landing-page-twitter-testimonials

Oli suggested a couple of improvements to test:

I’d remove the links to the tweets though and perhaps cut and paste the actual tweet so it looks exactly like Twitter.

We’ll forgive Tim for upsetting the attention ratio of the page with those external links, because he blew us away by creating Twitter cards to drive traffic to his page:

twitter-card-tim-ruof

Talk about going the extra mile. Awesome job, Tim.

clapping-clap-wonderful

2nd place winner: Winsome Writing

Winsome Writing’s landing page is shorter than most of the other entries we received, but that doesn’t mean it’s not sweet. Like our previous entry, they use screenshots and a SlideShare preview to tease visitors with the juicy content:

winsome-writing-click-through-landing-page

Interestingly, they haven’t really included any social proof, and chose not to lead with a strong hero shot of the ebook itself. Oli suggested that this might be a good thing to test:

This designer chose to keep the model hero shot. It’s interesting as to what impact it would have. As it’s an ebook download page, it could be posited that the model may confuse matters and she does look kinda sad.

Oli also congratulated Winsome Writing for including a bold CTA button which contrasts nicely with the rest of the page.

Overall, a solid effort that secured Winsome Writing second place in the contest. Pat yourselves on the back!

pat-patting

1st place winner: Sherif Makhlouf

Drum roll please…

This landing page scored creator Sherif Makhlouf an all-expenses-paid trip to Vancouver for Call to Action Conference 2016!

sherif-makhlouf-click-through-landing-page

As Oli pointed out, it’s pretty clear that Sherif read the book — he employed several Attention-Driven Design principles. There’s Direction: the way the model’s gaze directs your attention to the CTA, and the Contrast of the big pink button. Finally, the third page section uses Continuation effectively, helping to draw your eye down the page.

But Oli also praised Sherif for employing other classic landing page best practices. For starters, look at how decked out the social proof section of the page is:

click-through-landing-page-social-proof

And then there’s the counter by the CTA button, which displays how many copies have been downloaded:

false-scarcity-click-through-landing-page

But Oli especially appreciated the way Sherif employed a healthy dose of scarcity and urgency:

The use of “only 27 free copies left” is a nice touch, not mentioning price but insinuating that it will become a paid ebook soon.

It’s worth mentioning that this is in fact false scarcity — the ebook will remain free forever, we swear! But that this page is the winning page speaks volumes about the psychological power of these tactics.

Before you run off and employ false scarcity on your own page, step back and remember that, “With great power comes great responsibility.” Because if prospects suspect that you’re trying to trick them, you could lose them forever…

lines-album

Create a winning landing page of your own

Thanks to everyone who submitted landing pages to our Attention-Driven Design contest — you guys never cease to amaze us.

And special congrats to Sherif, you sneaky-but-super-smart marketer! We can’t wait to meet you at Call to Action Conference 2016.
Want to create a landing page that replicates the success of Sherif’s? Check out Oli’s latest ebook by entering your email below…

Source: 

Here’s What a Winning Click-Through Landing Page Looks Like

The 23 Principles of Attention-Driven Design [Free 68-page Ebook]

BuzzFeed. Squirrels. Popups. Taylor Swift in a Tesla tickling tuna.

Do I have your attention?

Probably not, because so many darn things are competing for it at the exact same time. (Like that email notification that just popped up in the corner of your screen. Don’t look at it! It’ll still be there in a minute, I promise.)

This is the challenge marketers are faced with everyday and that Unbounce co-founder Oli Gardner tackles head on in his brand new 68-page masterpiece, Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages.

attention-driven-design-ebook-650

Oli has been touring the world for the last 18 months, spreading the gospel about how to design amazing marketing experiences that both delight and convert. We finally persuaded him to sit down and put his latest research, insights and hilarious ramblings into writing.

You won’t believe what happened next.

Spoiler alert: He wrote a brilliant ebook. Download it below to see for yourself. It’s totally free and will make you a better human being. Or at least a better marketer and designer.

You’ll learn:

  • Why Oli has a love/hate relationship with BuzzFeed
  • What happened when he put his own mug next to a landing page CTA (hint: it was a humbling experience)
  • How to design a page with a perfect Attention Ratio (and when you might want to bend the rules)
  • What John and Yoko can teach you about attention-driven design
  • Why squirrels are jerks. Really, they are.

This article is from:  

The 23 Principles of Attention-Driven Design [Free 68-page Ebook]

A Closer Look At Personas: What They Are And How They Work | 1

In my experience as an interaction designer, I have come across many strategies and approaches to increase the quality and consistency of my work, but none more effective than the persona. Personas have been in use since the mid-’90s and since then have gained widespread awareness within the design community. We’ll discuss the process of creating personas from ethnographic research in Part 2 of this series. [Links checked March/29/2017]

Continued here:

A Closer Look At Personas: What They Are And How They Work | 1

75 Instructive Design Case Studies

Unlike many other industries, the web design community is all about sharing knowledge and experience. Each of us is very lucky to be part of such a great and useful learning environment, and it is up to us to embrace it — to embrace our learning experiences, and also to embrace our ability to share.
Not only are case studies a great way to explain the design process of an agency, but they also help designers and developers to learn from each other.

Originally from: 

75 Instructive Design Case Studies