For Students and Young Professionals
The moment you get a brief, you have a client. The process from getting the brief to delivering a project is what a web designer needs to look at. This is my journey and process into the world of web design.
Strategizing — Starting with the Science
1. An understanding of different stakeholders
Every website is done/owned by somebody or some group. Also, every platform has (or at least starts with) a target client. Both the parties as well as any third party like a delivery team, service team etc. should be taken into account and studied. The design team needs to see & study the needs & wants of the various stakeholders.
While planning you might be confused as to which side of the brand vs customers one might weigh in. A balanced approach-and-release is the need. Both (or more) parties & their individual or combined interest should be taken into account, visited and studied. The vision & goal of the brand needs to be taken into priority as well. You may not agree with a feature on the website but you must study the need and value of that particular feature.
2. Analyzing the needs of the brand vs the customers
Certain features, information, and showcases are needed by the brand. It may not be the highest focus needed for the customer but it needs to be placed on a website for the brand to make further gains & progress. At the same time, customers love a simple and easy-to-use website and clean navigation which cannot be compromised at any cost.
This importance vs feasibility of an online platform should be studied by the designer both from the client and the customer perspective. This would help you understand all the stakeholders better which would help you conceptualize the movement and design an all-inclusive interface across various platforms. (For eg: For a food delivery service, we might find that customers prefer [from competitor analysis] a mobile app better than a desktop interface. This is very important and the design team might push for this even if it is not feasible to start an app right away)
3. Understanding the existing interface (For upgradation of existing platforms)
Studying the current customer base is very important for existing platforms. Their interests & buying habits will help in making a conscious decision on what to plan for next and how to build onto the customer base.
4. A competitor analysis
The degree of a competitor analysis varies from the platform to the product, accepting the needs of the primary stakeholder (The brand/owners/company). It is important for designers to continue this analysis throughout and debate upon the recordings. They should incorporate all their findings on the platform. Competitor analysis can have the following:
Competitors should be from the same field.
Highlighted products/information
Hierarchy of information they are following
What is working for them?
What is not working for them?
Buying habits of their customers
Preferences of the customers
Types of customers
5. Keeping the future in the plan
The vision and mission of the brand should not be forgotten. You need to realize that each brand/ project has come to you or in the market because they r offering something unique. We cannot lose out on their USP and highlight them to our customers.
Customer Analysis
1. Analyzing different customer clusters
Even for one product, there can be different types of customers of various needs and options. It is important to study customer clusters who vary in:
Age
Gender
Needs
Geographical location
Socio-economic background
Habits
Anything else that the project might demand.
Since it is not possible to engage with all the customers, one can always interact and record a diverse group of customers who gives you insight in the above information and an idea of what to expect.
2. Asking the right questions
While doing customer surveys the most important thing is to ask the right questions (whether through a survey or a face-to-face set of questionnaires). Often the answers weigh between a mixture of acceptance and denial which can be confusing. In that case, the designer is supposed to look at other parameters to make a decision. For example, in a survey on how many people like to have choc-chip ice creams out of 20 people 11 likes it while 9 dislikes it. This information can be confusing. In that case, the designer can look at another variable like age of the 11 people who said they like choc-chip ice cream versus the 9 people who say they dislike it. One might find an understanding that a particular age group likes choc-chip ice cream more than another age group.
3. Digesting feedbacks
Designers are known victims of ego so it might be disappointing to see the feedback going south from the constructed hypothesis. You should record, respect & accept the feedback and put it to use. This feedback forms the foundation of the product, placement and navigation.
Discussing the scope of the User Experience:
1. Looking at 1 million Micro-Interactions
Good interactions determine the time a customer remains engaged with the brand and the platform. Small things can either make or break a brand.
Customers need to feel at home and comfortable. They need to be able to see everything (or at least what they plan to see), interact with the icons & products. They also need to feel that they are not trapped and can leave at any time they want. User Experience Designers should record and improve the interactions already available (if). Cross-linking remains another aspect that one must explore. The audience wants to see and experience everything in the first few seconds. For eg, if a ‘+Know More’ button is too small or far away from a half-shown passage or opens up in the same tab, thus replacing the original content it might not go down well with the customers and they will feel lost and leave the platform thinking they have been misled.
Another example would be the classic ‘Contact us’ button. The customers find it huge harassment if they cannot get help immediately. So a good, precise & extensive research on the FAQ section is needed if the brand is small and cannot afford a 24X7 calling option.
Yet another example is the presence of size charts and product specifications in any fashion e-com brand. These are needed as customers find that they are making an informed purchase.
2. Comparing the existing interface to that of the proposed interface
Looking at what is working (its importance & why is it working) & not working (its need & why is it not working) in the existing platform. It is important to understand the need for a particular section from the different stakeholder perspectives.
3. The various needs of the interface
Recording the various needs of the platform comes from the data gathered and understanding the following aspects:
Brand Analysis
Competitor analysis
Trend Analysis
Information hierarchy
Other Stakeholder Analysis
Predicting the needs of future customers.
Start the Structure
1. Information Hierarchy
A list in decreasing order of the most important aspect/information to the least important aspect/information that the primary stakeholder wants on the platform. For eg, Customers might be more important to the brand than sellers on a website. So customers will come first on the list. In another example, an app selling food to college students would have to keep in mind the price points and price likewise. Price as a very important aspect and thus price goes up at the top of the list.
This allows the designer to put emphasis on the most important aspects so that customers/viewers get what they want and get it fast. This increases the satisfaction quotation resulting in more positive feedbacks.
2. Deciding on the platform
Based on the research, customer and other stakeholder need the platform needs to be chosen. Since mobile viewing is on an all-time rise a responsive platform should be chosen. A mobile version of a website (or any other platform) is very important. Responsive design should be a habit rather than an exception.
3. Looking at different interactions possible in the platform
Again at this stage, a list of the primary and secondary interactions being planned needs to be recorded and processed. These interactions are planned based on the product, vision of the brand, trending interactions available & competitor interactions being accepted in the market.
Photo by picjumbo.com from Pexels
The First Skeleton
1. Navigation Flow
From the information that we have gathered from our customer survey, understanding of our brand, its products and services & SWOT analysis of different stakeholders we create an information hierarchy. Using and understanding the information hierarchy, we create a detailed navigation flow. The navigation flow mainly helps in understanding the following:
Product placement
Crosslinking
Movement in the platform
Hierarchy of products
A neat layout of information
There are mainly two kinds of navigation flow — Flat or deep. We use the most appropriate one from an understanding of our product, brand and studying our customer pool mindset.
Cross-linking wins us battles in today's day and age. A bit of every service, interactions, styleways needs to be served out on a platter on the home page. People cannot be expected to hunt for them. Life even digitally needs to be simple and straightforward. The home screen is very important and needs to be maintained with the latest updates and innovations.
2. Style guide
The style guide sets the visual appeal of the platform. It showcases and harnesses the visual hierarchy and projects the needs of the platform. Style guide is the branding guidelines for the UI designer to start working on the platform after this. The style guide would include:
Colours (Primary, Secondary, Tertiary)
Icons
Space management
The kind and use of shapes
Understanding of artworks to be used. (Directional)
Dos & Don’ts of using the logo
Illustration. (Directional)
Button styles
Style temples
Any other details that might be necessary
It is important to keep in mind that the style guide should be directional & kept as flexible as possible. This is because the designer should realize that the style guide will come into effect for all upcoming changes and updates to the Platform. The style guide needs to be accessible and is up-to-date with the latest UI & Graphic design trends reigning globally. Any designer should be able to use the style guide and understand the visual vision of the brand and design likewise. Additionally, a style guide needs to be relooked at and updated periodically.
The understanding of colours and other aspects of style guide needs to come from and understanding the user and the brand philosophy.
Photo by Alvaro Reyes on Unsplash
The Second Skeleton
1. Creating the wireframe
A wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website (Wikipedia). The wireframes should do the following:
Keeps the movement interesting and simple at the same time.
Carries on one language and story throughout.
Allows clear yet multi-dimensional scrolling.
Add fun in navigation (Increases footfall)
Makes the experience clear and interesting.
Photo by UX Indonesia on Unsplash
Designing the Surface
1. Designing the prototype
The prototype in the on-stage play that the audience will end of seeing. While creating a prototype you should:
Dot the line of navigation flow. Keep the flow steady.
Have a clear conversation with the buyer
Stick to the style guide.
Be updated with the ongoing trends of the UI design but you should also refer to the right trends. Not all trends work for all clients. Knowing what to take from where is very important.
Let out your creative tentacles.
It is very important to know the possibilities and limitations of coding and the kind of server space being used. A great design may not be practical/ responsive and you need to understand and appreciate the limitations. Pushing the limit is great but needs to be done in proportions by understanding & accepting the size of the portfolio that your client uses.
Using rows and columns (grids) are very important to design a website. A 3 column grid (for desktops) and a single column (for mobile phones) can be used.
Do not overuse icons. Keep it balanced.
While designing the prototype you should keep flexibility and consumer behaviour in mind. Everybody expects a wide variety of audiences to come to the platform so the design, flow and placement of information in the right place and in the right quantity are very important.
User Testing
1. Profiling a broader user for testing
Once we have the design ready it is important to take it to the users and see what they feel about the design. Remember an app or a website will be used by millions of people so it has to appease different psychology and background. Customer needs and wants are ever-changing and any website design needs to adapt continuously to the different needs and demands.
There are a number of brands and websites that create multiple focus groups from different pools where one can upload their design and ask for feedback. Additionally, you can ask for feedback from people you are living with and working with. It is important to take and incorporate feedback from non-designers, different professions would point out different needs and demands. Please ask for feedback from all age groups as you would expect a variety of customers to come to your website. These feedbacks give you an idea of what to expect
2. Incorporating feedback from user testing — Fixing the platform
Once we have a set of feedback and changes we know what is working and what is not. It is important to incorporate the changes but a designer should also keep originality and innovation in mind. Again the team needs to decide and ask the following while incorporating feedbacks:
Is the feedback quantitative or qualitative?
Is the user feedback responsive and will it help me across different platforms?
Pool feedback or multiple people giving the same feedback on a particular feature is very important and should definitely be incorporated.
If the feedback is appropriate in the first stage and can be incorporated in the upcoming updates?
Will the original aesthetics be hampered? If yes then what can be done to incorporate the feedback keeping the original aesthetics
Will the process get smoother?
Will the platform retain its flexibility?
Is the information hierarchy being maintained? If not, what changes can be done to maintain the information hierarchy
Any other changes which are in sink with the feedback needs to be made.
3. Re-designing & Re-testing
Once the feedback is incorporated the prototype needs to be redesigned/altered. If the feedback requires you to make changes in the processes before the prototype then the entire flow needs to be altered where it demands an altercation.
Once the redesign is done and the changes have been incorporated, the same steps of user testing need to be followed until the platform is agreeable to your customer base.
This ensures more footfall and your platform is agreeable to most people but can be time taking and might need a considerable amount of resources. But once this is done the design does not remain fragrant of a designers imagination but a usable, informative and deliverable resource and a place of use
Design for alternative platforms
Once the look of a platform is finalized the designer can tweak the designs based on the style guide, navigation flow and user feedback across other platforms. The few things a designer needs to remember are:
The website needs to be responsive
The style (colors, text, movement, transition, the position of products) should not change drastically across the platform. That hampers the relatability of the website.
Mobile web search should be explored in depth.
The visual entity needs to be simple and easy across the platform.
Similar (if not the same) navigation structure should be used.
Another aspect of designing for other alternative platforms is to take this forward and built the same experience for another platform. For eg. A fridge that gets activated & works through your app and cools your ice cream through a voice command.
Comments