Join us from our #Berlin HQ for a live #UX Q&A with two of our senior designers, Jeffrey Humble and Dee Scarano. Ask them anything! #UXdesign
I recently wrote an article for the UX prototyping software company, UX Pin. It answers 11 common questions that UX designers often ask about getting their first job. It covers things such as portfolio help, job-finding sites and getting yourself an interview when your application hasn't been noticed. Check out the rest of the article on UX Pin!
Should you be a "Jack of All Trades" or a specialist in UX Design? We answer LIVE!
Join us from our #Berlin HQ for a live #UX Q&A with two of our senior designers, Claire Rackstraw & Jeffrey Humble. Ask them anything! #UXdesign
How do you build a Great UX Strategy? We answer LIVE!
LIVE from Berlin: how to build a great UX strategy, a Q&A with Sr. UXers Dee and Jeff!
What does a UX designer really do in a day? We answer LIVE!
What does a UX designer really do in a day? In our VERY FIRST #FacebookLive Stream for CareerFoundry, Dee and I answer your UX-related questions.
Converse may have created the single greatest branded experience on the internet, and unless you're a musician, you probably don't even know about it.
Converse knows that their brand is closely connected to the music that their shoe wearers listen to, and they have always done a good job of associating themselves with that alternative culture. With the Rubber Tracks Sample Library they're going a step further and enabling their fans to be creators of that alternative culture. Not only is it a genius move on their part, it's beautifully executed.
A Giant Collection of Samples
The site describes itself as, "a growing collection of audio samples recorded at Converse Rubber Tracks studios. The library is free to use and all samples are completely royalty free – no strings attached." The collection is constantly growing and they add new recordings almost every day. In today's world of music production, people of every age are becoming bedroom-studio recording artists and Converse is smart for creating content for this emerging market. They've really done this right because personally I can tell you that finding this site feels like striking oil to a music producer. I love the little "Site Stats" graphic they have at the top of their site. It really helps to showcase the breadth of this project. There is so much music here, it could take years to go through all of it!
The majority of the site is dedicated to browsing the different sounds that Converse offers in their sample library. They divide it into packs, kits, mixes and tools (which I'll cover later). Packs are sounds created by popular musicians and organised by session. Kits are collections of sounds that users have saved, and mixes are songs that users have made using Rubber Tracks samples. The whole organisation makes sense and offers a way to showcase new artists which is quite clever on Converse's part (nice win-win for musicians trying to get their name out there and contribute to the sample pool). I also like that you create a login and actually save things. This is very key because what Converse is out to do here is create a community of musicians.
Concise & Thoughtful Interactions
When you click on of the "packs" it breaks down what's in the session that they recorded in an "overview" tab and a "browse" tab. The overview is really well organised and it includes things like YouTube videos, stats, performers, keys, and tempos. I especially like how they show the one shots as a single square button that plays when you click it vs. the sound wave view of the longer samples. It all feels very interactive while not being cluttered. Along with the overview, the browse view shows it all in a list view and has columns for things like tempo, key, instrument, etc. This is the lean-in, detailed view that experienced musicians will want, and I love that Converse has thought to include it (even if it is a bit slow to navigate on my computer). All the tracks play very quickly and time from click to sound isn't really an issue even though there is obviously a lot of content here.
Clicking on the kits gives you little eight-pad grids that have samples loaded into them. I love their creative use of z-space with the lockup of the avatar, title and grid. One of my favourite features of this site happens when you hover over a kit: it shows a letter for each sound that corresponds to a key on your keyboard so you can trigger multiple sounds at once like in a DAW. There is also the ability to heart the sample right there and save it into your own library. The first time I saw these little letters I didn't know what they were because I just assumed they hadn't thought to include such a feature. Really great stuff and just icing on the cake for an already crisp interface that really knows its audience.
More Than Just Samples
Converse did a killer job at recording, tagging and organising all of these samples, but they didn't stop there. Converse also gives you tools so that you can use these sounds on your browser, phone and in Ableton. It does seem a bit weird the way they organised this in the top nav, but maybe that's because this functionality wasn't part of the original information architecture. It feels like something that was added to the minimum viable product later, and it clutters up the UX a bit. Once you realise the power of these tools, though, you quickly forgive the organisation. I've already touched on the browser functionality which is the ability to group samples into kits. Nothing ground breaking here, but it really helps build the community aspect of the whole site, and no doubt causes more repeat users. The phone sampler lets you "quickly sort through samples on the go" but they don't really do a good job of explaining why you might want to do that. I would love to see a video here showing artists using the phone sampler to perform, but as is it will probably go unused. The Ableton integration, however, is so slick that I was surprised it didn't come with a price tag. It allows you full control over the samples and kits in the Converse library, all right in Ableton. While I'm not sure it really is the first ever cloud-connected sampler for Ableton like they claim, it certainly is the best free one I've ever come across. They make the Ableton plugin look and feel like the web experience in all black and white so that it won't just blend into Ableton, and they even have GIFs on the site to explain how to use the plugin.
If this wasn't a brand experience I can imagine many users would be more than willing to pay for everything Converse is offering for free. I really hope that Converse sees the kind of returns they are looking for with this investment because it is truly an amazing experience for the consumer. Lifestyle brands of the world, take a cue from Converse. Enable your fans to be creators and you will truly inspire them. Click the link below to check it out for yourself!
What is a Full Stack Designer?
A full stack designer simply means a designer that is multi-disciplined and can take a project from research to production. Full stack developers have been around for a while, and it’s time that designers become just as cross-functional as developers have become. I started my career as a UI/visual/interaction designer, but I wasn’t content with the limitations of those roles. For me, going full stack meant increasing my knowledge in UX research and diving deeper into coding and prototyping so that I could design products in a more holistic manner. While we may not be an expert in every step of the product development process, we are fluent in the language of every single member on our team. The breadth of knowledge that a full stack designer comprehends allow them to work more efficiently within a team and improves the overall product they are designing.
Why Go Full Stack?
In the early days of web design it was very simple: there were right-brained web designers and left-brained web developers, and these roles rarely overlapped. Today, designing for modern web and app development requires a much broader skill set. Photoshop and Sketch source files are no longer enough to convey the complexity of interactions that go into everyday websites and applications. It’s important to speak the language of code to get your point across. Static comps and copious notes just don’t cut it anymore. Designs today also have to work on more screen sizes than ever before, and the only foolproof way to design for the responsive web is to know enough code to design in the browser. UX research is no longer a luxury, and it is being universally adopted because it can save hundreds of hour of design time by focusing design efforts. Testing and prototyping are also becoming a requirement as stakeholders are requiring more involvement to ensure that products resonate with their business goals. In the same way, working prototypes (whether they are live code or clickable prototypes) allow you to test your designs with the actual users before precious development time is wasted on faulty designs. These are some of the ways that design is changing, and the full stack designer has emerged as the answer to all of these new requirements.
Why Should You Hire A Full Stack Designer?
Ok, now that you understand what a full stack designer is and why they exist, here’s a few reasons why you want them on your team:
1. They Understand Every Step of the Product Development Process
In product design, teamwork is an extremely valuable skill, and designers that fully understand the role of their co-workers are extremely easy to work with. They understand design’s role in the product development process, and their designs are more realistic because of this knowledge. Collaboration is key for full stack designers and their knowledge of product roles helps them better understand their own role.
2. Their Designs Will Have More Lasting Value
Working knowledge of the UX research process will ensure that the product being designed will have the right goals and steps to address your audience. Designs that have been tested with users and stakeholders, should hold their value through the test of time better than untested designs. Designers should also be designing for the entire lifecycle of the product, not just the phase they are tasked with. Full stack designers will be thinking of ways that the product can expand and flex to accommodate multiple generations of use, saving huge amounts of money in the process.
3. Being Full Stack Means Being More Than Just A Cog in a Machine
Full stack designers never feel disconnected from the UX of the product as a whole. With one designer affecting change in multiple stages of development, you get a consistency of design that was not achievable before the full stack. UX consistency is extremely valuable when you have multiple products in an ecosystem, and hiring full stack designers is a very cheap way to achieve this consistency.
4. Having Designers with Diversified Skill Sets Allows Your Teams to Stay Lean and Agile
Most tech companies follow lean or agile principles to some degree, and the full stack designer fits in perfectly with these philosophies. Lean teams will find full stack designers are particularly effective at eliminating waste, building quality in, and optimizing the experience on a whole. Agile teams will like that full stack designers welcome changing requirements, measure progress by working prototypes, and cooperate with stakeholders and developers daily.
5. Full Stack Designers Are Constantly Challenging Themselves to Learn New Technologies
Many of the skills and knowledge that go along with being a full stack designer are learned after office hours. Full stack designers are addicted to learning new skill sets so their value will only increase the longer they are at your company. Because of these ever expanding skill sets, full stack designers are constantly seeking to improve workflows and foster innovation wherever they go. Having employees with this sort of self-motivated drive to innovate could have immeasurable benefits in the future.
How Will I Spot a Full Stack Designer?
Full stack designers often go by more general titles like UX designer or product designer. Their portfolios will have a huge breadth of variety, and they will be motivated by projects that offer unique challenges. They will appreciate business goals just as much as they appreciate the aesthetics of design. They will take a holistic approach to every task and will be versed in everything that design connects to. Look for these qualities and you will find individuals that will help your business grow for years to come.
Turn off that awful Christmas music and crank this up! These are the songs that made my year:
So you came up with an idea for an awesome app. Unlike most people, you didn’t just sit on that idea. You made it happen. You hired some developers (and hopefully some designers) and worked relentlessly to develop a product that could actually compete in the noise of today’s software applications. You even spent your hard-earned savings on marketing and sales in order to get users for your app. Congratulations, you have users and you’re the newest tech billionaire, right? Wrong. You need users to consistently use your app or it will wither and you will soon be bankrupt.
While the three initial stages of app development – conception, development, and user acquisition – are essential, I’m going to focus on the final and trickiest stage called user retention. User retention is the activity that a selling organization undertakes to reduce customer defections. It starts with the first contact a company has with a user and continues throughout the lifetime of the user. It’s also one of the hardest and most complex problems to tackle in software development. User retention especially valuable for the software-as-a-service (SaaS) model because its existence depends on loyalty. For users, it’s the difference between companies like Facebook and Myspace. You will never get that billion dollar valuation without a consistent user base.
Ok, user retention is essential, but can UX design really help solve the challenge of user retention? Let’s look at the definition of User Experience design, and I think you’ll see that it absolutely addresses user retention:
User Experience Design is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.
I’ll walk you through the 9 ways that UX design can turn your fling with users into a long-term relationship.
The first and most obvious rule is that you should design a product for maximum usability for your user. As a UX designer, I am constantly asking myself some very important questions. Am I solving the right problem? Does my design solve the problem in the best possible way? This is something every designer should bring to the table, and it’s one of the many reasons they are integral to their team.
1. Before you can maximize usability for your user, you have to know what your user wants.
Hipstamatic was an early competitor with Instagram and actually started before Instagram. On the surface, both were deceptively simple. They were both photo-taking apps that allowed users to add fun filters to their smartphone photos. Hipstamatic thought their value to the user was in providing filters so they charged for high-end filters based on that assumption. Instagram designed their service to be a network and a community for sharing photos, assuming rightly that that was the more important value they offered to users. Hipstamatic then entered into a feature war with Instagram to try to keep up and despite being the first at conception, was looked upon as a newcomer by most users. Feature wars with competitors can be a very dangerous trap for young companies because it can cause them to lose focus on usability. Keep your users happy and your company will flourish.
2. In order to continually design for your user, user testing must be an essential part of any app.
User testing is the only real way to know what is working or not working with your users. User testing should be an ongoing process and not just an initial research step. Designing iteratively can also help incorporate this user feedback, rather than relying on initial UX research. You should also have a simple process for users to report bugs. Only 16% of users will return to an app that has crashed twice, according to a survey by Compuware. If you don't have the budget for in-person user testing, you can always add Google Analytics trackers to interactions in your app so that you have metrics on the usage of your software. Don't be content just knowing what your user is doing. Iterate and optimize according to their habits. Testing and deploying regularly is the only way to ensure that your software grows with your user, and you can’t do that without user testing.
3. Beyond just designing for your user, you must also design for the device that they’re using.
If you’re designing an app that looks good on one device and bad on another, you’re going to lose customers. Make sure that you design responsively for every screen that views your app. Mobile and tablet viewing surpassed desktops in 2014 and today it accounts for more than 60% of digital media time spent in the United States according to a study by Comscore. Mobile and table formats are clearly here to stay.
If the user can’t use your app or doesn’t know how to use your app, you’re going to lose customers. In order to make your app successful, you’re going to have to make it simple to use. You will also have to do a certain amount of guiding and teaching so that they know what they can do.
4. Design your interface to be as simple as possible and don’t overwhelm your user with endless features.
Shelves and shelves of books have been written about designing interfaces to be simple and concise, but I like to keep these 3 laws of UX as a framework to help me design as simply as possible.
Increasing choices will increase decision time
The closer and bigger something is to you, the easier and faster it is for you to touch it
Users remember information in chunks
I won’t go into these in detail, but there is a great article for designers here that even gives some helpful ways to remember these UX laws.
5. User onboarding is another very important tool for increasing user’s accessibility to the features of your app that they need.
The user won’t know how to use your product if you don’t show them. It's easy to get so close to a project that you assume your users will automatically get it. If I've learned anything being a UX designer, it's that you can never assume that you know what the user knows. There are hundreds of ways to teach your user. Most companies choose some sort of initial set up process plus a combination of popovers and modals to give contextual clues. Many social media applications stress the importance of getting the user to "do something" and walk them through how to post. I wrote a previous blog post on the 4 main ways that companies do this if you're interested in learning more about user onboarding.
6. When you launch new features that the user wants, don’t forget to inform them.
If you’re constantly iterating on your product like you should, you will constantly be adding new features that the user needs to know about. If you don’t tell them, they most likely will never know. Beyond just an initial on-boarding process, you will need a way to keep users informed of changes to your app. There a multitude of ways to do this, but most choose to do this in the software itself with popovers and modal windows. I'm a firm believer that software features should be shown contextually in the same place where you use them. Simply posting videos or walkthrough documents will never be as effective as alerting the user to the exact location of a feature you want them to know about.
Beyond just making your app useful to a user, delighting them should be your ultimate goal. Every interaction between you and the user should give them pleasure. If you surprise and delight your user they will keep coming back for those moments. Let’s look at some simple way to give your users pleasure when they user your app.
7. Your users are the ones that make you money so show them that you appreciate the value they bring to you.
One of the goals of a designer is to suprise and delight the user. I think you should go even further than that and design your app to include moments to celebrate your user. One of the easiest ways to do this is to congratulate them when they post for the first time or when they complete their profile. Tumblr does a great job at this and uses GIFs to congratulate the user on posting. DuoLingo congratulates you for using their app multiple days in a row, and all it takes is a simple modal thanking you for a "multi-day streak." I wrote an earlier blog post about celebrating the user if you want to read about more ways that you can appreciate your users.
8. Give the user a human touch throughout your application to delight them and enhance your relationship.
Gone are the days of faceless corporate software companies. Today, users expect to receive thoughtful interactions and a personal tone that appeals to their humanity. InVision does a wonderful job at this. When they release new features, they include the avatar and title of the person who worked on that feature. The tone is helpful and gives a face to a feature that might have been lost in a simple alert. Human-Computer Interaction (HCI) is a field of research that observes the ways in which humans interact with computers and designs technologies that let humans interact with computers in novel ways. I could go on and on about what you can learn from the field of Human-Computer Interaction, but one of the most important lessons is that you should seek to align computer interfaces with the mental model that humans have of their activities. The easiest way to apply this is to communicate with your user as if you were in the room with them. Don't hide behind corporate marketing jargon. Talk to the user in a warm, conversational tone as if they were an old friend, and they will become loyal users of your product.
9. Another great way to please your user is to actually reward them for using your app.
Don’t worry, you don’t have to give them anything of monetary value. Offering badges, points, or even just compliments will give your user that sense of accomplishment that video games have been taking advantage of for years. While FourSquare has seen its share of problems with user retention, their new app, Swarm, handles rewards in a very clever way. In addition to offering mayorships to one visitor like FourSquare did, they reward all check-ins with coins. They gamify this by showing your coin count on a leaderboard with your friends. This spurs users to compete with their friends and use the app more frequently as a result.
I hope that these 9 tips have shown you that user retention doesn’t have to be a mystical endeavor. Remember, always keep the user experience on your mind and your user will fall head over heels for your product. It won’t be easy, but having a good UX designer will certainly help.
The summer isn't over so climb onto a roof and enjoy this playlist with someone special.
When Software Says Thanks
A great deal has been said about playfulness in design. Playfulness is takes advantage of a potentially boring interaction, and it adds a touch of humor to delight the user. I would say this is the human equivalent of flirting with the user. While flirting is key in the beginning of a relationship, there comes a time where you have to show the user how you really feel. Celebrating the user is a way to take the next step to really show your user that you appreciate them. Social networks rely on their users to create the content that fuels their site, and I think we can take a cue from them when it comes to celebrating the user. While not every company can actually pay their user like YouTube does with its Partner Program, companies like Tumblr do an excellent job of showing their users love through UX design. What are some ways to celebrate your user? Here are a few examples of companies celebrating their users...
Berlin-based, DEADBEAR, aka Nick Donovan. Focus-single "Tongues" Donovan blends shards of incomprehensible vocals with layers of drums, glockenspiels and electronica found sounds alongside the vocals of Japanese collaborator Qrion - famed for her work with Ryan Hemsworth and her own unique productions.
The Interface Layer
A year ago, Scott Belsky's article in Medium described the "Interface Layer" as the future of UX design. The Interface Layer is essentially a designed interface that aggregates underlying technologies into an experience that is more convenient than using the aggregated services separately. By consolidating the functionality afforded by multiple APIs into one interface, you can create a more convenient tool. Take a look into Belsky's vision of the future in this excerpt from his article:
I woke up this morning and grabbed the nearest screen. I selected my transportation for the day, refills of groceries I am running low on, what sandwich I want for lunch, a time window for my apartment to be cleaned, a dry-cleaning pick-up, and a reservation for dinner. I also selected a gift for my sister’s birthday, from a suggested list curated for me. After a productive 5 minutes, I got up and had breakfast.
You may assume I used Uber, and then Fresh Direct or Amazon Fresh, and then Seamless, and other speciality apps and services striving to iron out the logistics from my life. Maybe I did, but I’m not sure. Why? Because I took all these actions through a beautiful and customized interface that aggregates such services and blends them all together into a more integrated and frictionless experience.
Belsky uses popular services like Uber and Amazon to make the point that it will be the design that ultimately creates value. While I doubt that all these companies will offer up their technology to third parties, I agree with Belsky in that users prefer an aggregation of services and apps that do more. With the atomization of apps that has been occurring since the launch of the smart phone, it's easy to get overwhelmed in the seemingly endless number of options. The Interface Layer offers simplicity and convenience. By offering the option to get an Uber in Google Maps, Uber is differentiating from the competition. At the same time, Uber is missing out on branding and advertising opportunities by letting users access their service outside of their app. It is interesting to see how this playing out today in the sharing economy. Let's take a look at what this could mean for audio platforms.
Music's Interface Layer
Audio platforms like SoundCloud, Spotify and BandCamp already offer their APIs to third party apps and bloggers. While I'm sure these companies would prefer that you use their native apps to listen to music, they get free advertising when a blog posts a song using their service. Before the Interface Layer, being shareable was top on the list for audio platforms. Now HypeMachine and other music aggregators are taking advantage of these generous APIs and offering an Interface Layer that aggregates content being shared from blogs. These companies are really shaking up the industry because the user could potentially become more loyal to the interface than the service beneath the Interface Layer.
Ultimately, the user wins in this battle because they gain more access to the music they love, but how does this affect the companies providing the audio services? To combat commodity pricing and lost brand loyalty, your platform has to have a differentiator. Like many other industries, UX design is emerging as the key differentiator for audio platforms. I think you will find that good UX design will become a priority for audio service platforms because it is the user experience that decides which audio app will survive. In addition, audio platforms should be making investments and plays in the Interface Layer to ensure their product isn't lost in an API. Audio platforms will always offer more capabilities in their native apps, but the problem is getting hung up on features. Audio companies need to transform their applications from a product into a great user experience. In the age of the Interface Layer, user-centered design must extend beyond the core of your product and influence every aspect of your application.
@MrDenav and @lucasmarinm of bluedashed.com have recreated some classic record covers (including Joy Division's iconic Unknown Pleasures album) using only CSS. This alone would make for some cool effects, but they also made them interact with the music using Beatdetektor. With the rise of streaming music services, the industry is trying to monetize the music listening experience as well as the music. I could see lots of bands doing this to add value to their album-streaming experience. Sadly, the demo only plays a short preview of the song from iTunes. Only works in Google Chrome.
There are thousands of tools you can use to prototype your ideas, but Illustrator is probably not one that comes to mind. If you're a designer, Illustrator should be at the top of your list for prototyping. I've been making wireframes in Illustrator for a while now, and I love how fast the process is. Not only is Illustrator fast, it takes a modular approach to text and symbols allowing you to make global edits with very few clicks. Some might see Illustrator's lightweight design options as a reason to choose Photoshop instead, but I've found this simplicity helps to keep my designs clean and concise.
For mobile applications, the multiple artboard functionality is what really makes Illustrator perfect for prototyping. I can wireframe every screen of my app on its own artboard. I can experiment with multiple layouts, and export these as PDFs for initial UX Flow reviews. Once you have an information architecture worth testing, I use an Illustrator script called MultiExporter to export every artboard in my document as a separate PNG with one click. Now that I have all the screens, I drop them into InVision (this is a great tool for teams and it's free!) and add hotspots for live prototyping and collaboration. Once the UX flow has been decided you can use a wonderful little Illustrator plugin called Specctr to annotate your wires. WARNING: your developer may give you a big fat kiss on the lips for giving him annotating designs. I think including your developer in early prototype conversations is a must, and having annotated wires will help alleviate headaches later on. Another key aspect of prototyping is animation. While InVision does have some animation options, I will often use Keynote to throw some animation ideas together. As a bonus, Keynote allows you to copy/paste from Illustrator so it's an easy process to mock up any animation. With a few plugins and free programs, Illustrator will have you prototyping at top speed. More importantly, all of the designs you create will be very easy to tweak and adjust, making you a truly agile designer.
- For more on using Illustrator for UX prototyping, check out this article from Adobe
- Check out how this guy recreated Google Material Design with Keynote animations
The "Walkthrough" Approach
This is the most common method used by companies like Google and Squarespace. It walks users through the flow using popovers and intro screens to help you through their UX flow. This approach is the most similar to having a professional on hand to help you with onboarding. To ensure that the popovers aren't too cumbersome, they should be easily dismissed (See my earlier blog post on Popovers).
The "Do Something" Approach
Used by apps like Tumblr and Ness, this approach is great because it gets the user to create content almost immediately. Tumblr considers its UI to be so intuitive that it doesn't need a walk through. If your app is simple enough, this can be a great way to get your user addicted to using your app.
The "Setup" Approach
The simplified approach helps the user through creating his account then you're on your own. This is another good approach for apps with a very simple UI because it doesn't overwhelm the user with options. Companies like Apple and FitBit do this to help personalize their software for your needs.
The "All In" approach
This approach walks the user through the set-up process and prompts them to post something. Pinterest uses this approach to get users to sign-in and post a Pin in one approach.