Blogging Fusion » Blog Details for The UX Blog

We are listed with SEJ as a top resource for bloggers and SEO experts alike!




Follow Us


Available Upgrade Detected
If you are the owner of The UX Blog, or someone who enjoys this blog why not upgrade it to a Featured Listing or Permanent Listing?.

UPGRADE

SHARE THIS PAGE ON:
Blog Details
Blog Directory ID: 28120 Get VIP Status?
Google Pagerank: 2
Blog Description:

The latest content in user experience design, research, and strategy. Articles on the latest trends, valuable resources, and career advice for the UX community. Weekly podcast episodes hosted by Nicholas Tenhue with digital design professionals and respected thought leaders in the field of User Experience as guests.
Blog Added: June 26, 2016 04:34:42 AM
Premium Iron Membership: Never Expires   
Audience Rating: General Audience
Blog Platform: SquareSpace
Blog Country: United-States   United-States
Blog Stats
Total Visits: 1,151
Blog Rating: 1.60
Add the ReviewMe Button Or SEO Rank to your Blog!
Review The UX Blog at Blogging Fusion Blog Directory
My Blogging Fusion Score

Featured Resources

Example Ad for The UX Blog

This what your The UX Blog Blog Ad will look like to visitors! Of course you will want to use keywords and ad targeting to get the most out of your ad campaign! So purchase an ad space today before there all gone!

https://www.bloggingfusion.com
notice: Total Ad Spaces Available: (2) ad spaces remaining of (2)

Advertise in this blog listing?

Blog specific ad placement
Customize the title link
Place a detailed description
It appears here within the content
Approved within 24 hours!
100% Satisfaction
If not completely satisfied, you'll receive 3 months absolutely free;
No questions asked!
Buy Now!
Alexa Web Ranking: 221,151

Alexa Ranking - The UX Blog
Subscribe to The UX Blog
Subscribe Now!
6 UX Rules Tech Startups Need To Master

Get these 6 rules drilled into your mind as early as possible, and you’ll have an easier time producing designs that communicate value and keep customers happy.

Anyone who’s familiar with best practices in design fields knows how important it is to commit time and resources to UX development. How people feel when they use your UI has a significant effect on the actions they take and the opinions they form, which of course affects conversions, profits, and overall business success.

But tech startups tend to spring up almost from nowhere, fueled by programmers who may not have a great understanding of the importance of front-end polish. That’s how you end up with UX designs that confuse, infuriate, and ultimately raise more questions than they answer.

While there are countless UX rules you could reasonably identify, I’m going to pick out the 6 I think are the most important for tech startups to recognize as early as possible in the development process (or even preceding it). Let’s get started.

Rule 1: Drop the Vanity Designs

Your back-end tech ideas may be wholly revolutionary, but it doesn’t mean that any design you come up with is automatically fit for purpose. The only opinions that really matter when it comes to UX are those of the users, and they don’t usually leave much room for vanity design.

I consider this the very first rule for a startup to accept because it’s a tough thing to confront. We all like to think we know best, even on topics slightly removed from our fields of expertise— after all, UX is still basically part of software development, isn’t it? Surely users just need to get used to the new design paradigm you’re offering them?

But don’t try to reinvent the wheel. Unless you have an incredibly compelling justification, adhere to existing UX standards, and give your users something recognizable instead of something revolutionary (familiarity beats novelty). Being creative is fun and might make you feel accomplished, but if it doesn’t impress users, it can’t be part of the UX design process.

Rule 2: User Psychology is King

Marketers like to say that content is king, but that isn’t really true. User psychology is king. Content is just one way of affecting it, and UX is another. In fact, top UX designers are masters of psychology, carefully studying how and why users take particular actions.

Startups can easily get stuck in a rut when it comes to psychology, imagining one type of end user and getting trapped by their perspective. People are more complex than that. Users will vary in countless ways. You can’t account for them all, but you can do a good deal of research and come up with general personas that cover most of your target audience (try using a guide on how to create personas).

If persona 1 has a lot of disposable income, but persona 2 doesn’t, and they’re both important to your design, then you need to find a way to accommodate them both instead of just focusing on one of them. Otherwise, you end up with a ‘perfect’ UX that manages to neglect a large chunk of your visitors.

Rule 3: Keep It Simple

The best user experiences are streamlined, trimmed down for speed and efficiency. You might think this simply calls for compressing images, using clear language, and avoiding unnecessary data entry, but there’s almost always more to be done. Even if you think you’ve stripped your design to its bare bones, chances are you can remove more.

When prototyping a UX, you should cast an eye over every single element — every image, CTA, paragraph, button, or piece of styling — and ask “Is this really necessary?”. If you get rid of it, does the end user lose anything of significance? Will they find it harder to achieve their goal, or like the site any less? If an element doesn’t justify its presence, scrap it. Smooth out the friction.

A simple design is easier to demonstrate, understand, run, and maintain. And you can always add something back in if it becomes clear that there’s a demand for it.

Rule 4: Maintain Consistency

Some layouts can be extremely confusing, with variable design elements and unclear contextual clues— and confusion leads to anger and irritation that pushes users away. That’s why making your UX design consistent across every aspect of the project is essential.

This ties back to rule 1 in that playing with basic structures for no good reason is ill-advised. Think about basic visual elements like icons. We don’t really pay that much attention to them when they’re used correctly, but they glaringly stand out when they’re used poorly.

You can get a solid idea of what you can and can’t play within a layout by taking one look at the themes for a standard website creator like Shopify. Change the colors? No problem. Change the font? Also fine. Alter the icons or the basic navigation? Not the best idea. Get it slightly wrong and users will have no idea what’s happening. You don’t want to make your users think.

Rule 5: Never Stop Iterating

You don’t create a final UX design in one fell swoop. It takes time to go through all the stages — coming up with ideas, prototyping them, testing the prototypes — but even then you’re not done. You’ll certainly have missed things, and you’ll need to keep repeating the process if you want to make your work as good as it can be.

If anyone ever asks the question “Didn’t we already figure out the UX stuff?”, they haven’t been paying attention to this. The most valuable information and feedback often don’t become available until late in the day, and good enough isn’t really good enough in the long run.

So don’t put any energy towards ‘getting things perfect’ early on in the design process, because it’s a waste of time and energy. Just try out your ideas, stick with the ones that work, aim to consistently make things better, and you’ll eventually get where you need to be.

Rule 6: Use Real Copy

At some point in UX design history, someone decided that creating layouts and populating them with fake text (usually Lorem Ipsum) was a good idea. It really isn’t, and the sooner you get out of the habit of using empty copy, the better off you’ll be.

At the very least, this is because text is a core component of UX. It steers people away from certain areas and towards others, and has a knock-on effect on how the rest of the interface is perceived. If you leave it until the last minute, you’ll not only miss that effect— you’ll also miss numerous opportunities to subject your real copy to real testing.

And make no mistake: iterating upon copy is just as important as iterating upon any other UX element. As early as you possibly can, add some meaningful copy to your UX designs, and start getting valuable feedback from users on everything from the clarity of your category names to the tone of voice. It’ll make a huge difference to the quality of your final product.

UX can seem like a distant concern for a tech startup focusing on functionality and scaling, but where there’s software of any kind, there’s a demand for great UX that cannot be overlooked.

Get these 6 rules drilled into your mind as early as possible, and you’ll have an easier time producing designs that communicate value and keep customers happy.


About the Author

kayleigh.png

Kayleigh Alexandra - Content Marketer & Startup Specialist. I write about startup culture and entrepreneurship at MicroStartups.org, where all website profits go to charities that help people reach their full potential. You can find out more on Twitter @getmicrostarted.



Improving UX with the Right Front End

User experience designers focus on enhancing the customer interactions and experience as a whole, while UI developers translate product design and content into a responsive and interactive interface.

UI and UX, two terms that are mistakenly used as synonyms. The difference between UI and UX is that UX, or user experience, is all about how users experience the use of an application or website, while UI, or user interface, is the presentation of information or look and feel of an application. User experience designers focus on enhancing the customer interactions and experience as a whole, while UI developers translate product design and content into a responsive and interactive interface.

Design Trends

User experience has become an essential part of designing and developing great websites and applications. Below are just some of the most popular design trends in the last couple of years that have been impacted by the integration of user experience web and application design and development.

Minimalist Interface

2017 found itself in the peak of minimalist designs; minimal graphics, generous white spaces, and clean lines became the most prominent design features of applications and websites, and it seems that the trend will continue to be all the rage. Minimalis design ensures that the focus is on the content and supplements the experience with convenient navigation and clear visual communication.

Gamification

This trend puts emphasis on integrating game mechanics into non-game environments, such as learning and fitness apps that track progress and milestones to encourage continued use. Aside from milestone and progress tracking, challenges are also incorporated into the design flow, which aims to promote more interaction between user and application. 

Augmented Reality

One of the most exciting trends that came about in 2017 was the integration of Augmented Reality into applications, as evidenced by the very popular Pokemon Go!. With the release of ARKit and ARCore - augmented reality developer platforms - a lot more applications coupled with Augmented Reality can now be developed. Augmented REality is when virtual objects or space can be superimposed on our physical world.

Virtual Reality

Virtual Reality has been a big hit in the entertainment industry, from movies to games to virtual experiences. Virtual reality brings people into a virtual space where they can do anything, imagination is the limit! Outside of immersive entertainment, TiltBrush provides you a VR space dedicated to your art; design, sketch, or draw in a VR space and share it with the world. Like AR, Virtual Reality has extensive potential, especially if integrated into our day to day tasks.

Emotional Connection

Memes, hashtags, vines, and GIFs are but a few small mediums that are used to engage the emotions or the expression of emotions of users. User experience and interface are now no longer limited to aesthetics, convenience, or ambiance. User experience designers now work on establishing that emotional connection between user and application, ensuring that applications and the experience that users encounter are highly grounded in human emotions and experiences.

Functional Animation

Animation no longer stands as a standalone video or caricature on the side of a website interface, nowadays, animation has become a tool to enhance the look and feel of an interface and provide a more immersive user experience. The animation is now used to simplify and enhance digital experience of the user; becoming a large part of encouraging user engagement through numerous interactions and micro-interactions that users have with their devices and apps.  

Personalization

With Machine Learning and Artificial Intelligence being applied more and more in product development and design, application and website provide less and less static content. With these learning tools, applications are now capable of providing content that is based on user activity and preferences. Spotify has been one of the more popular applications that have effectively implemented this; providing daily mixes tailored to your playlist preferences and most frequently played songs.

Tools and Technologies

All these UI/UX design trends won’t be realized without the tools and technologies that UI/UX developers utilize. Outlined below are the major tasks that user experience designers and UI developers accomplish and the most popular tools that they use.

UX Tools and Software

Common Pitfalls

Even with design tools and technologies nowadays, UI/UX designs can still fail. Below are just some of the design pitfalls that drive home the importance of user experience.

  • Only having responsive design for the sake of having a responsive design, is not really helpful to anyone. Responsive designs should be built around user experience and not just for form.
  • Unresponsive designs can be just as bad. Clear and simple actions and functions should be able to address lagging or unresponsive design elements.
  • Too much information in a design can put off users. Focused information should be prioritized and presented well.
  • Complicated navigation inconvenience users. Simple navigation coupled with clear and consistent actions are better alternatives.

Best Practices

The fundamental aspects that bring these design trends and tools and elevate them to these level of popularity and standards are the UI/UX developers. Below are just some of the UI design and user experience tips that developers found to be effective when used to improve the user experience of websites and applications.

post its

1.   Focus on users.

Design with users in mind; their goals, needs, and how your application can meet these goals and needs. The user-focused design is results-based design, thinking of the impact that you want to make, which elevates the potential of your application even further.

2.   Simplify and be clear with actions.

Always think of the shortest possible sequence of steps that are needed to complete a task. Ensure convenience by applying simple and concise actions and function that you incorporate into the design.

3.   Identify and adapt design standards.

Don’t mend something that isn’t broken. Common design standards ensure that users are more familiar and comfortable with these design elements. Using this familiarity, identify these standards and adapt and integrate them into your design.

4.   Provide structure to your content.

Responsiveness is no longer just enough, content is also paramount in UI/UX design. Content should be meaningful and have structure; providing focus on key points and putting them at strategic locations to grab attention and interest while having enough supporting details to sustain that user interest.

5.   Use design elements to make a statement.

Typography, layout, color scheme, and components are fundamental design elements that, if used right, can enhance the message and content of a design. Ensuring layout and placement of components can reinforce your visual presentation, while typography and color scheme can set the tone, mood, and atmosphere of your design. 

User experience coupled with the user interface can lead to an overall engaging and popular applications and websites. Creating software when considering only the user experience without considering the user interface is like having a very useful but ugly tool, while the reverse would be having a very pretty tool that isn’t really useful. So UI and UX need to be applied in tandem to achieve the best results possible.


About the Author

This article was provided by Mobilunity. Since 2010 Mobilunity has grown from two people who spent their days and nights working on projects, to a team of over 120 who now spend their days and nights working to bring their clients vision into reality. We have grown steadily step by step overcoming obstacles and developing into a stable well structured company. We are in constant search of new challenges, and truly believe that there is no limit to what we can accomplish in the future.



A Quick Guide to UX Writing

UX writers help create a great customer experience through the written word. It’s a role more companies are looking to hire.

“I don’t get this and I never will!”

Just about everyone has felt this way at some point when attempting to understand something new. Whether it’s furniture assembly instructions posted on a website or a guide to using a new software package, the difference between a satisfied user and a frustrated one can boil down to one thing: words. This is why tech companies are now employing the talents of UX writers. The field is growing faster than average.

UX writers help create a great customer experience through the written word. The following guide is designed to help writers add UX writing to their skill set, and to help other professionals understand how writing plays a role in overall UX.

Understanding UX Writing

First, there are a lot of similarities between copywriting and UX writing. Both are jobs intended to make a product easier to understand and more desirable to users. The difference is that the job of copywriting is traditionally done after the design phase.

For example, a web design team may create the layouts and functionality for a new web page. They then send screenshots or mock-ups to the marketing department complete with ‘Lorem Ipsum’ space holders. Then, copywriters are given the task of filling that space up with instructions, information, or calls to action.

The problem with this approach is that everything the user sees on that webpage was created by the coordinated efforts of the web design team. The only exception is the words that appear on that page. As a result, the written content may not be as clear as it could be.

With UX writing, content creators are an integral part of the design team whether that’s for an app, software package, website, or online content. Any copywriter knows how frustrating it can be to communicate something to an audience while being constrained by both inches and word count. While the UX writer still faces constraints, the situation is greatly improved when content is prioritized during the design process.

For tech companies, this is the best of both worlds. Content is maximized for user experience. In addition to this, those creating it also have an understanding of communicating branding.

Which Companies Hire UX Writers?

Tech companies such as Spotify, Google, Amazon, Wix, and others have UX writers on staff. Major retailers such as CVS, Nordstrom, and Honeywell do as well. Those are just a few examples of some of the major players who have or are adding these positions. Essentially, any organization that uses on-screen text to communicate with users can benefit from the talents of a UX writer.

What Does a UX Writer Do?

UX writers are sometimes referred to as microcopy writers. They write the text that users see as they are navigating their way through apps, websites, devices, and software. They provide the content for error messages, on-screen help text, pull down menu content, and more. In some companies, this is an entirely different position from web copywriting. In others, they are one in the same.

UX writers contribute to a better experience by making things clear and intuitive. They must also communicate effectively while also keeping branding in mind.

Necessary Skills For a UX Writer 

Not all writers can succeed at UX writing. They must have the ability to be concise. Even when content is part of the design process, there is always a limitation in what can be fit onto a computer screen. Space becomes even more limited on phones and IOT devices.

It’s also important to be able to communicate diplomatically. In many cases, a UX writer is creating simple explanations and error message text, for example. They must be able to do that without coming across as patronizing or confusing and frustrating the customer more. At the same time, they must also maintain brand voice.

UX writers must also be careful not to be intrusive. Not everything the customer sees on the screen requires extra help or explanation. For example, hover help is great when something could be confusing. On the other hand, it’s intrusive when it isn’t needed.

Understanding And Thinking Like a User

Just like copywriters must rely on customer personas to communicate effectively, so must UX writers. This means looking at screens, putting themselves in the role of the user, and understand what they are trying to accomplish. A good UX designer will recognize points of potential friction and frustration. They can also recognize opportunities to offer extra information, even push someone a bit further down the sales funnel.

Helpful Technical Skills

Because UX writers often work with design teams during the development process, there are some skills that can be helpful to them. These include:

  • Developing familiarity with agile and other development methodologies
  • Using collaborative tools such as Google Docs
  • Learning the UX design process
  • Using A/B testing software
  • Using Videoconferencing software
  • Learning prototyping tools
  • Use of project management and collaboration tools such as Trello
  • Learning to recognize brand voice and to apply branding to microcopy

While there is no degree specifically for UX writing, many employers require a degree in English or technical writing. However, there are plenty of job opportunities that are more flexible. In large part, this is a career where you must build your own skill set. Successful UX writers have skills that can be learned in a combination of classes such as:

  • Web Design
  • Marketing
  • Digital Marketing
  • Content Planning And Management
  • Brand And Product Development
  • Technical Writing
  • Project Management
  • Data Analytics

Helpful Soft Skills

First and foremost, UX writers should work well in teams. They spend a lot of time in meetings and collaborative sessions. It helps to be articulate. They should be able to explain ideas and understand how their goals work in concert with those of others. It is also helpful to be naturally curious. While a UX writer does not need to understand technology at the coding level, they should be willing able to learn basic concepts.

Getting Started

Becoming a UX writer and applying those skills begins with developing or adapting the right skillset. Those who already work in writing or software design are already ahead of the game. The next step is to look at examples of UX. Websites that are easy to navigate or apps that users adapt to quickly are usually that way because they offer great UX. UX writers can learn by paying attention to the ways in which written content contributes to that experience.


About the Author

JHqrXx95_kc.jpg

Leona Henryson is a freelance writer and UX designer at Essay Supply. Also, she is a contributing writer for various blogs. When she is not writing or designing, she is swimming, hiking, and, weather permitting, snowboarding.



10 Ways to Improve Your Website Design

It’s not easy creating a website design that works. It really isn’t...

It’s not easy creating a website design that works. It really isn’t.

Did you know that when a visitor arrives on your website, you have about five seconds (or less) to capture their attention and keep them where they are? That’s not a whole lot of time to impress someone, so if your load time is not perfect or your site’s navigation is all over the place, you can say goodbye to your visitors.

Believe it or not, the rapidly changing world of technology is not helping with this, either. New trends can easily make your website outdated and render it all but useless, leaving you with fewer visitors than you started with.

So, how are you supposed to fix this issue and keep your visitors? How do you create a website that looks good, functions perfectly, and communicates your message clearly?

A complete redesign comes to mind as a valid option, but in some situations, you just won’t be able to do it. Full redesigns are expensive and take time, which means that not only will you have to invest additional money in the project, but also put your website on hold for the foreseeable future.

However, even if a redesign is out of the picture, there’s no reason to panic. There are still a lot of ways out there for you to improve your website without having to spend your life savings and lose any more visitors. 

In the infographic which follows below, we talk about ten ways to improve your website design and give you tips on how you can immediately boost your site and, with it, your online presence. We’ve covered everything from moving to responsive design to paying more attention to color schemes, so we’re sure that you’ll be able to find something that will help you better your site in no time at all. 

Happy reading and good luck!

1. Make sure your entire website is responsive

responsive design

Over the past couple of years, people have started using their mobile phones more for browsing the web, which is what ultimately led websites to move to a mobile-friendly or responsive design and why Google began penalizing sites that are not mobile-friendly in 2015. So, if you have your website, you have probably created a responsive version of it by now—if you haven’t, it’s high time that you do. A responsive design will do wonders for your website regarding SEO and help you position yourself higher in SERPs.

2. Simplify your navigation

simple navigation

If you don’t want your visitors to run away from your website because they can’t get the hang of your navigation, then do your best to make it as simple as possible. You’ll want to have no more than seven items in your menu (the point is to make it easy for people to move around your website), try to be as descriptive as possible in your labels, and even keep your navbar fixed. That way, your visitors will be able to stay longer than five seconds on your site.

3. Improve page speed for lower bounce rate and longer sessions

page speed

Website speed has long been discussed in the world of marketing, and it’s one of the main reasons why a lot of visitors tuck tail and run away from certain websites. In fact, if you’ve got even a two-second delay in your load time during a transaction, the chances are that your potential customers will abandon their carts and you’ll end up with one customer less than you started with. So, work on speeding up your websites before you do anything else—there are even tools out there that you can use to help you out!

4. Make a clear Call to Action, guide user behavior

call to action

Does having a CTA button on your page matter at all? Does making it a certain color change something in the way your users act on your website? It sure does! Studies have shown that orange CTA buttons boost conversion rates by 32.5%, while red buttons boost rates by a whole 21%. Now, that’s a huge difference right there for your website! Plus, if you want your CTAs to be game-changing, make sure to use actionable words in them such as: discover, start, learn, etc.

5. Make the most of social media, we live in a world of sharing

social media

If you haven’t been living under a rock for the past decade, then you might have noticed that social media networks have taken over the world. There are 800 million monthly active users on Instagram and 100 million daily active users on Twitter, which is why it’s important for your website to offer social buttons to your visitors. There’s a chance that they will like what they see, share their thoughts on their profiles, and boost your presence even further. 

6. Use white space to create a visual hierarchy  

white space web design

Moving from the social media talk to more technical parts of your website once more. What’s so special about white space, you might wonder? Well, first of all, it doesn’t have to be white—that’s just how designers refer to it. Secondly, it’s worth mentioning that research has shown that the use of white space in the left and right margins, and in between paragraphs, increases reader comprehension by almost 20%. Adding white space means more user interaction, the page looks better, and you can highlight your CTAs with more ease if you have enough white space to go around.

7. Use photos, a picture is worth a thousand words

photos in web design

Let’s face it: we all like visuals. Whether they’re photos, videos, GIFs, or drawings, they are more likely to draw our attention on a page than any piece of text, no matter how great it may be. According to research, users spend 10% more time looking at pictures of people on 'About Us' pages, than they do reading content associated with those photos. This means that you should try to incorporate great visuals as much as you can on your website. Many websites offer stock photos:

8. Use color theory to your advantage

choice of color

The color of something as small as a CTA button matters, as does the choice of color on your entire website. You’ll want to pick one dominant color for your whole site and brand, and then add complementary colors to complete the perfect scheme. The standard language for color communication (yes, that’s a thing!) is called Pantone, and everyone who’s at least a little bit in the business of marketing or design knows about it.

9. Custom illustrations can reinforce your brand

custom illustrations

What’s even better to add to your website than regular, old stock photos? Custom illustrations, of course! They can truly play an important part in keeping your visitors on your site and serve as a great piece of decoration. If you have an in-house designer who’s able to draw doodles and illustrations for your website, then make sure to go for it! Original always beats stock, anyway. Your brand and marketing team will thank you.

10. Use motion and animation with intent

animations

Last but not least, we’re going to talk about animations. Just like all visuals, animations in the form of galleries and slideshows can be a fantastic addition to your website, but what you need to keep in mind is that these are not the only animations that can be found on a site. There’s eight of them, including loading animation (which is there to annoy us all), hover, scrolling, background, and so on. A lot of work goes into creating animations that look good, but once they’re done the right way, your visitors and website will thank you for it.

We hope you’ve enjoyed this article and that you’ll be able to improve your website design in no time at all!

This article was provided by the software development company, KOLOSEKYou can download the full infographic from their website.

references



The MVP is dead, long life to the MAP. (Minimum Awesome Product)

I will say this bluntly and without sugar coating … the MVP has died. What does that mean for product and UX designers?

I will say this bluntly and without sugar coating … the MVP has died. What does that mean for product and UX designers?

MVP: Minimum Viable Product

The minimum viable product (MVP) is a product with enough features to satisfy the initial customers, and provide feedback for future development. Some experts suggest that in B2B, an MVP also means saleable.

“It is not an MVP until it sells. Viable means that you can sell it”.

Yes, this is a copy-paste of a simple definition in Wikipedia. One that I agree with in many aspects. Mainly due to one factor, the analysis. In my opinion a more accurate definition of MVP would be:

The minimum viable product (MVP) is the one that allows us to launch the product with the least amount of features possible so that we can learn and extract relevant information from this trial period and user interaction through a series of metrics and then act based on that data.

The best (and most common) way to explain an MVP is using this famous image.

 Image by Henrik Kniberg. Example of MVP.

Image by Henrik Kniberg. Example of MVP.

The approach is simple.

Do you want to make a car? Perfect! Let’s begin the process. How? First a wheel, then another, then another, then the engine, etc…Is there a problem? It will take too long to create the car we want. Solution? First make a skate, then a bicycle, then a motorcycle and then we end up with the car.

Is the process longer? Yes. Is it more viable? Yes of course!

I will not go into detail about the process of an MVP as there is enough information on this. We are here to comment on the death of the MVP, and the reasons that lead me to believe this.

fast good cheap

It is difficult to do anything that is good, pretty and cheap. At the end there is the need to prioritize when making an MVP. The costs have to be low, at the end of the day it’s a simple “test”, but…

Are potential customers willing to lose quality (or at least the appearance of quality) just because this is a test?

That is the point that I want to get to and I would like to explain; with the new times, new technologies and especially new generations, the internet is no longer a novelty, and e-commerce is no longer a novelty, a free chat application is no longer a novelty. Everything has changed.

A few years ago, with the boom of the new technologies, a potential client was 30 years old, just had started to get internet at home, and the smartphones, it was almost unthinkable to have one if you weren’t an executive, but everything has changed.

My neighbor of 12 years carries a smartphone with a capacity of x100,000 which is what NASA needed 40 years ago for the Apollo 11.

The technological evolution is taking giant steps and consumers are also advancing and moving forward even if they do it at a slower pace.

Yikes! When I was 14 years I didn't know or hear about Facebook, Instagram, Amazon or Whatsapp. None of them existed.  Who in the world at any range between 18–40 years do not know about these services now? Few, if any.

What is the problem with all this?

Users are accustomed to a minimum of quality, and they expect that of all new products.

What does it mean? That all users expect a new social application to share the activity of that application (whatever it may be) with other social networks. Facebook, Twitter, Instagram, Whatsapp, etc… it’s that simple.

If our product does not have such a simple feature, people will automatically believe that it is a bad quality product and they will not take it seriously. It is not what they expect.

Hence my suggestion that the MVP has died and Map was born.

MAP: Minimum Awesome Product.

In the present time, when you’re considering the development of a new product (whether physical, web, app, etc…) You don’t only ask yourself “This is the minimum that I need to make it viable?”, at first, it seems the right question, but the approach changes when we pose the following question.

Is this the minimum of incredible product that I can create to be viable?

quality curve

The change of context is important. Before we only had in mind that the product being launched was functional enough. That the customer/user could do at least 2–3 basic things perfectly, but the client has grown, the client understands 5–6 basic things easily, we have to offer something more, something with which feels familiar and something that will surprise you at the same time.

The best way to see this approach is with an example.

 Example of job search app design, both designs made in little more than 1h. Sorry, in Spanish.

Example of job search app design, both designs made in little more than 1h. Sorry, in Spanish.

What are the differences between the two products? They are really showing the same content. Both have:

Header and Item of employment (which includes: name, date, company, type and remuneration).

But it seems more reliable and attractive in MAP to the user/end customer.

The target of this dummy application is a person (male or female) between 18–36 years, who knows the functions of the online job search, it is possible that they have used the Job type of applications and Talent, LinkedIn, JobToday, etc.

 Example of current job search apps.

Example of current job search apps.

How do we intend to compete in 2017–2018 with a mediocre product when our competitors have apps with several years of advantage and with hundreds of thousands of customers already using them?

Not only do we have to bear in mind that we have to compete with features (features), speed and fluidity, but also in the design of the product, because the user/end customer already has pre-designed in his head “how an application for employment should be”.

“The true competition is to offer a better experience on our product.”

And a better experience includes everything: features, speed, fluidity and design. This is essential to compete head-to-head against other apps.

6–8 years ago when there was no “standard” design or design patterns, everything was to be discovered.

 A simple graph of what was or was being sought with an MVP, which requires a MAP.

A simple graph of what was or was being sought with an MVP, which requires a MAP.

A quick final example, in a new social network, do we really expect a product that does not have, for example, a search bar, a messaging system and a system of favorites or likes? No. We already have the pattern in our head about how things should look like in a social network.

That is why at the time of launch for a new product, in addition to being quick, viable and economically speaking, affordable, we need to be as “awesome” as possible with the resources that we have. We need to make an effort to provide an experience that the user/client can find to be good enough to give you a chance.

“Not only do we have to search for the minimum viable product, it is necessary to look for the best product experience possible with the resources that we have.”

Obviously, there is one detail that Dave McClure mentioned about my article on Twitter, and it's so important…

MAP depends a lot on how “awesome” the available alternatives are in your target industry. If zero alternatives, then MVP = MAP; if lots of options, then MAP > MVP.
dave mcclure

Thank you very much Dave for your comment, very correct. What would be an approach with this idea? Simple.

alternatives vs no alternatives

So the next time you think about MVP, think about MAP, (unless you have no competition, then your MVP will automatically be a MAP, as there is no reference): fewer features, but all properly designed.

mvp to map

Before creating any new feature in your product (MVP) think… do you really need this? If the answer is “Yes”, perfect, do it, but make sure that it works wonderfully (MAP).

“If you’re going to make a new product, think about what your customers expect and try to provide the best experience and product possible.”

And many people will ask… Where can I find developers or designers to make a MAP? Wrong question! It’s not about developers or designers, it’s about the manager. You have to raise expectations, motivate and know that everything needs your time, you can’t do a MAP in a few weeks or a month. And you have to accept it!

You need to manage and accept that everything needs your time and maturity. Better management is the solution for creating a good MAP.

Tell us what you think in the comments!

Disclaimer: Many people will say that the map is the same as the MVE (Minimum Viable Experience), I agree about 90%, but I am more in favor of the experience being merged with a good product, but it does not have to offer a good product design. For example, Craigslist, despite the fact that their service is extremely efficient, the product design very poor, so I prefer to search for products that are as awesome as possible. MAP.


About the Author

Carlos Beneyto

Carlos Beneyto is currently Lead Product Designer at Startupxplore, the premium investment platform, where he applies MAP principles. Check out Startupxplore, the startup funding community. Startupxplore is an online platform created to connect and promote the startup community and its main actors: startups…startupxplore.com



Building an Atomic Design System with Sketch Library

Sketch libraries will definitely change the way we design today. Here are few other things we learned while building atomic system

Thought I’d share my journey on creating the first Product design system at my company.

I remember the first day I joined Capital Float, I asked my colleague if there was a style-guide I could use in Sketch. He told me we didn’t have any style-guide and only had some screens designed, most of them in Photoshop.

The problem is that we have multiple products (internal and external), and they were based on different front-end frameworks. He told me that my mission was to define a visual guideline to unify all of our products.

I understood I will have to make a style-guide, to have one source of truth and make our products consistent, while working on new features planned in the roadmap.

Few brainstorming meetings and a month later, we decided to quickly make a first style-guide. It looked like this:

 The first attempt style-guide

The first attempt style-guide

We used this Sketch file as a starter template, we haven’t created symbols yet! After using this method for few weeks, we started facing problems. We had to design many features and faced many inconsistency issues as products were becoming more complex. It was also often difficult to stay synced together, and with developers. We were loosing too much time doing always the same small tasks. Till now we had a goal of building a design system but hadn’t worked on one!

The day we started to build an actual system

I was really inspired by design systems from big companies like SalesforceAtlassianShopifyIBM and of course Google Material design. So I started to learn everything about design system to understand how to build one. I also searched for the best design workflow and got really inspired by all the great content written on Medium.

Goals of Our Library

In order to understand some of the thinking that went into our decisions, here’s a brief overview of what we were trying to achieve with our design system:

  1. Standardized elements and a Unified design system for all of our products, regardless of platform.
  2. Creating a 1:1 match as far as possible with our coded components and sketch symbols, both visually and structurally.
  3. Easy to maintain. Component updates or additions should be simple so that designers and developers get the latest without much wait.

First thing first

Before we jump to what all things to be added, we had to define certain rules to make elements reusable and atomic in true sense. So we decided to go for a nested libraries instead of single source file. Doing so allowed us to split things like colors and icons into different Sketch files and then reference symbols across those files. If you make an update to a symbol in one of the files, it will still propagate to the other files that reference that symbol. (Great feature, Sketch! 🙌)

We have outlined certain patterns/rules to maintain “Workplace Hygiene

  1. File and folder structure
  2. Pages and Art-boards management (Art-board as variant of a screen, Pages as features)
  3. Don’t repeat yourself (Use Symbols)
 File and folder structure

File and folder structure

 Pages and Artboard management

Pages and Artboard management

Level 0: Quarks and electrons

Adding a layer under the Atomic system might seem a strange move, but it made the file easier to use. Also, it helped us balance between pre-built design elements and reusability. I consider colors and icons not as atoms but more like attributes of elements like electrons and quarks. Colors can be used everywhere, as backgrounds, text, borders etc. Treating colors as elements made icons file more consistent. These are symbols but mostly being used as over-rides in atomic level symbols.

 Design System Colors - Download sample file:  https://goo.gl/9WdLYR

Design System Colors - Download sample file: https://goo.gl/9WdLYR

We defined formula symbol to generate variation of a color and reuse it to generate palette. So that we just have to worry about base colors. Formulas arenothing but an overlay on a base color and works the same way as Shades & Tint.

Level 1: Atoms

Atoms represent singular elements of UI design which carry unique functionality. While defining atoms we also consider how these elements behave in HTML.

Everything that can be defined and used individually are atoms. For example card, tooltip, shadow, divider, button, logos, cursors etc.

A lot of these elements have different states and variations from which designer can choose. All these states are named exactly how it is used in development. Atoms are also likely to be used as overrides unless you are creating a custom UI.

Level 2: Molecules

This is the section where most of the magic happen! Molecules help us reduce our repeated work and allow us to bring consistency in design. Every molecule is built to offer exchangeable content, e.g. button states change, removing/hiding some elements.

Whole idea of molecules is to think generic.
 Variations of a generic component

Variations of a generic component

A Molecule generally consists of multiple elements (text, images, symbols) but yet designed to be abstract and reusable. They have an intermediate level of complexity, such as Tabs, status-bar, action-bar, list-rows, modals, alert messages etc.

Level 3: Organisms and Pages

At this moment, this level contains very few elements like page-headers, tables, Play/App Store mockups, date-pickers, keyboards etc. The reason for this is that I find it difficult to see sense in providing pre-built organisms, as this level designing often depends on the project we are working on and features and content that should be displayed.

Of course, all project has repeating organisms in pages, but they are often derived from individual needs and requirements. So better to use symbols here.

Pages or templates are actual output of a design process, so we decided not to include these level in the Atomic design system.

Last words

Sketch libraries will definitely change the way we design today. Here are few other things we learned while building atomic system:

  1. Order of layers in your symbol matter. As they will appear in the same order in the Override panel. You can also lock some layers to avoid clutter.
  2. Use Sketch runner to search and insert symbols as it has better preview than what Sketch currently has.
  3. Use Sketch Styles Generator to generate shared text and layer styles.
  4. If you are from a non-programming background and want to know how developers see design elements, use Sketch Measure plug-in to export your designs. It also helps in easing design handover.
Undoubtedly sketch is improving our design process but there are still few important missing features such as..
  1. Shared text and layer styles are not actually shareable outside your file!
  2. Exporting assets from symbols with overrides is a pain! Check out this thread for more info.
  3. Versioning control for libraries. (Unlike developer’s version control, Sketch allows to move only to higher/latest version of a component)
  4. Symbols as a mask

If you have feedback/question for implementation of design system or want to discuss other things please feel free to comment.


About the Author

Pratik

I am Pratik Shah, an Indian multidisciplinary designer with 5+ years of experience in UI/User Experience & web development. Check out his website here: http://pratikshah.website/



Subscribe to RSS Feed
Other Related Blogs

Link to Category: Technology Blogs


Or if you prefer use one of our linkware images? Click here