Sunday, 25 September 2016

Story Map v/s Journey Map

Most industry level projects incorporate one of these in their design process as they believe they serve the same purpose. Well, I couldn't agree less. Both of these are solid design concepts that contribute hugely towards breaking down the complete design problem and making it more understandable for the designers/stakeholders. So here's what I personally believe is the difference between these:

Journey Map


  • The Journey map not only describes the journey of the user/product but also highlights user thoughts, experience, comments and goals.
  • It incorporates the user's traits, pain points, possible actions and emotional/physical experience.
  • The journey map could be of a user or a product - the former would primarily focus on the user's journey while using the product and the latter would highlight checkpoints in the product journey cycle like the design methods adopted, design reiterations / refinements, what worked, what didn't etc.
  •  The journey map is created in the 'Plan' stage (DDPL- Discover, Define, Plan, Launch) of the design process after the requirement gathering has been done through market research, user surveys etc. and the personas and user goals are justified.
  • Journey maps are much more detailed and granular as compared to story boards.
  • A Journey map can also be extended to a 'User Journey Map' that focuses on a specific user, generally a subset of the product persona.
  • EffectiveUI provides the best example of a user journey map




 


Story Board
  • Story boards is a visual representation of how a product/app or service will play out.
  • Story boards are typically created to understand the flow of user actions / goals while using the product.
  • Story boards help segment the user's journey into well-defined stages, each associated with a  user action and the resulting product response. 
  • Storyboards needn't necessarily capture the user's pain points or experience. They are just intended to give the designer/stakeholders an idea of how the product flow will proceed (and this information can then be used to refine the design process and make it more adaptive).
  • They could appear in the 'Define' or 'Plan' stage of the design process. 
        Here's the storyboard for a restaurant that leverages tablet technology for placing orders.


Wednesday, 31 August 2016

How Spotify's desktop website UX has changed since 2006


Image result for spotify



Here's how Spotify, a brand which now defines online music streaming, has gone through a number of serious changes (including a major design overhaul) in its desktop website UX.

Here's what I think about the designs,

2006


2006 -  Notice how the UX of the website reflects a rudimentary idea. The elements are well-structured with the right amount of attention  given to every element (notice the large logo and the  mid-sized text that asks users to sign up). However, this doesn't tell users why they should be excited for the service. The idea still reflects simplistic yet minimalist design.




2007


2007 - Here they go a step further to explain what Spotify will be doing. Guess too many users asked them what the idea was! The elements are unstructured, with some (the sign up section) taking too much space. Notice how all the info-text has been boxed into the text-area in the middle. The text is verbose and extraneous, something not every user would be interested in.




2008 & 2009


2008 & 2009 - This is much better. The UX of the website reflects the product of a brand that is both confident and clear of its idea, motive, goals and target audience. The elements of the screen are now well-structured, the info-text is short and simple and all other information has been perfectly categorized with the help of a navigation menu, Notice how icons have been leveraged to succinctly convey the idea. This makes the page less clutter-y and aesthetically pleasing.




2010


2010 - Clearly reflects a brand that is growing and adding many more products/features to its service. Something that the previous designs lacked was the judicious use of white space. This design makes the best use of the space available to get the message to the masses. Notice how text and visuals complement each other while conveying an idea which ultimately contributes towards clean and consistent design.






2011


2011 - Similar to the 2010 design, but now has many more options and visual components. The entire website has a cartoon-y feel thanks to the visual components it uses. Information like product info and subscription is taking up a lot of space. The same information can be compressed and boxed into a smaller space. Also, sections like 'Jobs' which aren't holistically a part of the product can be incorporated in the site map in the footer.





2012


2012 - The site has switched to minimalist design by having a landing page with no other option but downloading the app. Minimalist design has its upside and downside. Upside being that now, the website much cleaner, clutter-free and uniform. However, it assumes the user knows pretty much everything about the service and limits the user's actions (here, downloading is the only option available).



2014


2014 - Great stuff! Parallax scrolling and great imagery, keeps the user glued to the site. The design also sports a trendy, vibrant look, typical of a music website. Also, notice how the features of the free and premium version have been succinctly boxed in a package. This takes up less space and also tells the user the advantages/disadvantages of using any. However, the huge imagery and limited text force the user to scroll a lot to access even little information.



2015

2015 - Much better! The extraneous imagery has been removed and the website now strikes a the balance between text and visuals while maintaining the context, The premium and free package section now uses a compare-and-contrast info-structure to distinguish between the features provided by each which helps the user easily recognize the product and what it offers. The website design has come a long way from what it was in 2011.




2016

2016 - Has the same visual attributes as the previous design. The switch to a more vibrant theme definitely seems to work. Good work in using a scrolling banner. Fits in more information and also, blends well with the design




Tuesday, 30 August 2016

User Experience and Design

User Experience and Design




Just came across this image on a social networking website. While most members of the group that shared this happened to blatantly accept this fact or just laugh it off saying while saying the person who made this seemed to know very little about user experience, I personally think there's a lot more to this image.

User experience (here, user adoption) and design may not always follow the same route when it comes to designing an intuitive and interactive user experience. Consider a use case of an travel website where the customer wishes to just checkout as soon as possible after booking, say, a flight. (The shortcut route). The website has a great design and many interactive components to explore. But, the design is such that, though simplistic, it takes the user through a number of steps like asking if he/she would like to select a hotel at that location, and then maybe a car rental and then maybe a adventure sports trip (The tiled route with great design). This just creates additional pain points for a user who just wishes to book a flight and checkout asap.
Thus, we can say that the design here isn't well aligned towards delivering a good user experience. In a bid to increase sales, the user experience is being compromised.

Another thing to note here is the difference between minimalist and simplistic design. Minimalist design may not always be simplistic and vice versa. UX Myths does a great job of explaining this. A design may be minimalist but may not cover all use cases. The idea is to start from a simplistic design that takes care of all use cases and make it minimalist. Strive towards making a tiled shortcut route that is both simplistic and minimalist. Cheers! :)

    .