SEHAR SHEIKH PORTFOLIO

SAMPLE WORK - 10 YEARS OF UX DESIGN EXPERIENCE

MY DESIGN PROCESS

Strategy

UX Strategy is based on four tenets: business strategy, value innovation, validated user research, and killer UX design. The output of the discovery phase should be based on empirical data, such as getting direct input from target users before going straight from an idea to wireframes and development. Good UX design influences the conversion rate. If you don’t offer an enjoyable and continuous UX, you run the risk of turning your customers away to your competitors. This is my job to make sure end users are able to enjoy the product without any frustrations. The product speaks for itself and doesn't need any introduction if UX is done correctly.

Research & Analyisis

It’s crucial to understand where your target demographic “lives.” What is their preferred digital environment? Technology changes constantly, and your users’ behaviors and preferences will change as well. UX research methods and data analysis techniques helps me unlock insights about user behaviors, attitudes, and motivations. From the technical side, product research is a data collecting process through channels like:
Personal interviews with users & stakeholders
Competitive analysis
Online surveys
Focus groups
Collected data is analyzed and converted into quantitative and qualitative information. This valuable information will be used for decision making.

Creating Personas and Scenarios

Based on the product research results, the next step for us is to identify key user groups and create representative personas.

Persona Spectrum

We use the Persona Spectrum to understand related mismatches and motivations across a spectrum of permanent, temporary, and situational scenarios. It’s a quick tool to help foster empathy and to show how a solution scales to a broader audience.

Storyboard

Pictures are worth a thousand words. Illustrating things works best for understanding of any concept or idea. The images can speak more powerfully than just words by adding extra layers of meaning. It’s possible to tell a story that everyone could see and relate to. We often empathize with characters who have real-life challenges similar to our own.

Information Architecture (IA)

Information architecture is the creation of a structure for a website, app, or other product, that allows users to understand where they are, and where the information they want is in relation to their current position. IA results in the creation of navigation, hierarchies and categorizations.

Sitemap

A site map is a model of a website's content designed to help both users and search engines navigate the site.

Card Sorting

It is a useful approach for designing information architecture, workflows, menu structure, or web site navigation paths. Card sorting uses a relatively low-tech approach. The person conducting the test first identifies key concepts and writes them on index cards or Post-it notes.

CREATING WIREFRAMES

Wireframes are the backbone of a product design— we typically used them as a guide when development starts and should contain a representation of every important piece of the final product.

LOW FIDELITY WIREFRAMES

Low fidelity wireframes include the most basic content and visuals and are usually static (not interactive). We often used them to help map out the shell of the interface, its screens and basic information architecture.

HIGH FIDELITY WIREFRAMES

High fidelity wireframes are often built in the advanced stages of the design process to communicate design decisions to the development team prior to coding the final product.

Prototyping

While wireframes are similar to architectural blueprints, prototype is a middle to high fidelity representation of the final product Prototypes can be used to their full potential in user testing. Prototypes should allow the user to experience content and test the main interactions with the interface in a way similar to the final product. While the prototype might not look exactly like the final product, it should be very similar in intention.

USER STORIES

User stories are part of an agile approach that helps shift the focus from writing about requirements to talking about them. All agile user stories include a written sentence or two and, more importantly, a series of conversations about the desired functionality.

UX

User experience (UX) design is the process design teams use to create products that provide meaningful, best possible, and relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability and function.

Flowchart

A flowchart is a type of diagram that represents a workflow or process. A flowchart can also be defined as a diagrammatic representation of an algorithm, a step-by-step approach to solving a task. The flowchart shows the steps as boxes of various kinds, and their order by connecting the boxes with arrows. This diagrammatic representation illustrates a solution model to a given problem.

Visual Design

Visual design aims to shape and improve the user experience through considering the effects of illustrations, photography, typography, space, layouts, and color on the usability of products and on their aesthetic appeal.

RESPONSIVE DESIGN

Responsive Design layout changes based on the size and capabilities of the device.The use of mobile devices to surf the web is growing at an astronomical pace, but unfortunately much of the web isn't optimized for those mobile devices. Mobile devices are often constrained by display size and require a different approach to how content is laid out on the screen.
A multitude of different screen sizes exist across phones, tablets, desktops, game consoles, TVs, and even wearables. Screen sizes are always changing, so it's important that your site can adapt to any screen size, today or in the future.


GOOGLE MATERIAL DESIGN

Google’s Material design considers material to be a homogeneous digital fabric created with pixels. Users can tap, swipe, or pinch this material fabric and it will move according to user interaction. Mobile interfaces are created out of layered material objects like rectangular bars or circular buttons. I enjoy using Google Material for UI since it is an adaptable system of guidelines, components, and tools that support the best practices of user interface design.

ICONOGRAPHY

Product icons are the visual expression of a brand’s products, services, and tools.

RESPONSIVE LAYOUT

You can configure each screen so that its layout adapts to the actual space in which the app is running. Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.

BUTTONS

The best way to indicate a button is to use visual cues. Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take. They are typically placed throughout your website UI, and they should be easily findable and identifiable while clearly indicating the action they allow a user to complete. The primary action on a page needs to carry a stronger visual weight and have a distinct contrast from its surroundings. It should be the visually dominant button. In most cases, there are 5 main types of UX buttons: text, ghost, raised, toggle, and floating action buttons.



DASHBOARD

A UX dashboard displays user interaction KPIs for your product on a single display. Ideally, you'd be able to see how users behave in your product, general experience sentiment, and track key interactions with your product.


1. Start with users, not the data

It means finding out who the users of a dashboard would be, what makes them tick and what their needs and requirements are. Usually these sorts of questions are best answered via a combination of user interviews and surveys.

2. Don’t flood the user with data

Don't throw too much data at users, too much noise and they won’t be able to find the information they need. Don’t present the users with all the ingredients that went into making a cake when all they really want to do is eat it.

3. Provide an overview and allow users to drill-down into the data

Allow users to see the most important information and to drill-down into the data if they want to find out more.

4. Use visualizations that aid users

Data visualizations are great. If you can use visualizations, such as charts, plots and graphs to help users to interpret and analyze data then you should do.

5. Allow users to easily navigate & orientate

It’s likely that a dashboard exists within a wider set of dashboards. Often there will be an overview dashboard, with more detailed views underneath. It’s important that users can not only easily orientate themselves within a dashboard, but also easily navigate between different dashboards. Try to use well known navigation design patterns, such as a left-hand panel, or tabs across the top, and be sure to test these with users to make sure that they are clear. Provide clear labels and signposts so that users know where to go for what, and consider carrying out some card sorting to help test and validate these with users. If you have a hierarchy of dashboards then also consider providing a breadcrumb trail to help users recognize where they currently are.

6. Have a clean, uncluttered dashboard

A good dashboard should not have any unnecessary text, or unnecessary graphics or imagery. You should use good visual design practice, such as white space, alignment and grouping to help visually connect related information and remove any clutter and noise from the dashboard.

7. Use color to aid data visualization

Color is a great way to help users to analyze and interpret data. For example, red, amber and green indicators can be used to communicate a status, and different shades of a color can be used to indicate higher and lower values. Be sure to be consistent with your use of color.

8. Provide help and guidance where necessary

Ideally a dashboard should be self-explanatory. You certainly don’t want a dashboard that requires a lot of explanation – that’s always a sure sign of poor design. Often providing some additional help and guidance is important, especially when a dashboard is likely to be rarely used, or frequently used for the first time. Consider including contextual help where it will be useful.

9. Use visualizations, language, icons and design patterns that users are familiar with

Try to use visualizations, language, icons and design patterns that users are likely to be familiar with. A novel data visualization might look great, but is likely to leave users scratching their head. A general rule that I use is that if a well-known standard or pattern exists that users are likely to be familiar with, then you should use it, unless there’s a very good reason not to.

10. Test with users and iterate

Most importantly you want to find it if users can use a dashboard to achieve their objectives. This is where usability testing comes in. Ask users to carry out the sorts of tasks they will need to carry out using the dashboard, such as finding out some information, or monitoring the status of something. Capture what they do, what they say, and any usability issues. Test, iterate, test, iterate and repeat – it’s really the only way to build a dashboard that will not only be useful, but usable as well.

NEWS PORTAL

Reaching out and across through superior UX... A strategy and alignment workshop was conducted with the News Portal team to capture business insights and vision for the product and business objectives for the website . An approach to understand the users was taken by understanding what would be a goal of a user while engaging with News Portal. Users' journey was also understood by exploring the possibilities users could have for entry, on-site and exit.

1. Extended Reach

By designing an adaptive website responsive to both mobile and desktop we aimed to establish the brand for a pan-India and global audience.

2. The Essence Kept Alive

Keeping in mind the tenets of bold headlines and fearless journalism, the design was conceptualized to reveal a visual interpretation of the same.

3. A String of Pulse

Similar stories were connected together, designing and bringing them together through visual-hierarchy, allowing users to intuitively navigate to more news around a central news.

4. Packaging to Differentiate

Different blogs, articles, news were differentially packaged to bring forth their essence powerfully. The editorials which required to be stood out were highlighted through author-driven placements and page structuring.

FORMS

1. The label should always be visible

There should always be a visual label associated with the input field. A lot of time, form designers avoid using labels to save space and just use placeholders instead. A label should be present all the time. Why? Because as soon as you start writing in the text field, the placeholder text disappears which forces people to use their memory and recall what this field was about.

2. Keep your label as close to the input field

Having a label as close to the input field makes it easier for the user to understand the association. The top-left aligned labels give better visual association assuming your language uses left to right script].

3. Use a single-column layout

As you top-left align the labels of your input-field, the best way to make it work in your way is to provide a single column layout. A single-column layout will allow a user to insert information faster.

4. Group related info

Try to group related information close to each other. This allow user to insert information faster as they are filling all the information about one particular category at a time.

5. Break long forms into steps

Don’t overload users to insert too much information. If you are asking a user to enter more than six fields, a good practice would be to break a form into smaller logical steps and provide proper progress indicator.

6. Use in-line input field validation

You must have come across the form that shows the validation errors at top. Errors are frustrating already, don’t make the user struggle to find it. Try to make it easy for user to understand what’s wrong. Show them exactly below the input field which has a wrong entry.

Design efficient forms

Design efficient forms by avoiding repeated actions, asking for only the necessary information and guide users by showing them how far along they are in multi-part forms. Use existing data to pre-populate fields and be sure to enable autofill. Look for opportunities to pre-fill information you already know, or may anticipated to save the user from having to provide it. For example, pre-populate the shipping address with the last shipping address supplied by the user

MOBILE APPS DESIGN:UX design principles that are key to creating great mobile user experiences.


1. Content Prioritization
2. Make Navigation Intuitive
3. Touchscreen Target Sizes
4. Provide User Control
5. Legible Text Content
6. Make Interface Elements Clearly Visible
7. Hand Position Controls
8. Minimize Data Input
9. Create a Seamless Experience
10. Test Your Design

It is imperative to create user-centered designs to improve interactions and enhance user satisfaction. Design is more than just good aesthetics. In order to elicit positive reactions, you have to satisfy the basic usability principles of interface design.
Learnability | Efficiency | Memorability | Errors | Satisfaction

To keep your users engaged, you have to keep the interface at a minimum.

Users should intuitively be able to navigate through your app via clear pathways and be able to complete all primary tasks without requiring any explanations.

Interface elements need to be big enough to capture actions on touch screens.

Users should be able to make decisions to personalize their journeys.

If users can’t read your content, your design doesn’t work.

Accessibility behavioural features should be made available to users to make navigation and use easier.

Minimize the need to enter data.

When it comes to creating online journeys the ultimate goal is to create a seamless experience, across all devices.

Test early. Test often.

Material Design is mobile-centric, and the fact that a company as large as Google is centering its entire design philosophy around the mobile experience adds weight to the idea that mobile will continue to take precedent as our preferred way of access the web.

Designing native apps for Android and iOS: key differences and similarities

App Icons

iOS guidelines define a few rules for its icons: they usually follow a flat style and skeuomorphism.

Android, in the same way, proposes the material guidelines for icons, that between other recommendations, suggest a range of colors and the use of paper shadows.

The main difference from iOS is that Android icons are allowed to have transparent background, so you can basically work with any shape that fits the icon area.

The App Bars

These bars should have consistent styles across the app and follow the platform sizes for a native look and feel.

The Grid

Even though it’s not common to use a column grid like in the web, sizes, paddings and spaces should be consistent across each platform. Material Design defines a specific grid: 8dp grid for general purposes and a 4dp spacing for icons and types alignment. Meanwhile iOS is not specific about grid, but apps usually use multiples of 4pt and 5pt for sizes and spacings.

The Navigation

Besides styles, navigation is where huge differences will come up. Some components can be exclusive or more common in one platform and this may change the main navigation structure of an app. iOS uses the tab bar as a main navigation component, while Android can use tabs or a drawer menu. The use of a bottom navigation bar on Android is not very common, but it is part of the Material guidelines, and some apps like Foursquare and Instagram use it. The main actions of a screen, like adding a new item, will usually use a floating button on Android. On iOS they are usually positioned on the right side of the navigation bar.

Action-buttons

Android has the navigation bar, a set of three physical or virtual buttons (back, home and overview), depending on the device. iOS has only the physical home button. This means that Android users can go back anytime, not depending on a back button inside the app. The built in back button will always send the user back in history, even outside the app. On the other hand, iOS users will always need the back button on the interface, otherwise they can get stuck in a screen.

Typography

Both Android Material and iOS have default fonts that are encouraged to be used. Android uses Roboto as the default typeface and Noto for languages that are not covered by Roboto. Both can be downloaded from Google Fonts. iOS uses San Francisco as the default font.

DESIGNING FOR AN IPAD

Ensuring a smooth user experience when designing will mean paying attention to touch target sizes and padding. Active and tap states need to be carefully considered, as feedback on touch interactions are key to seamless experiences. A further consideration is the Apple Pencil – this particularly comes into play for drawing or notation experiences. The UX of these interactions can go to the next level, as the technology allows for multi-touch, as well as being responsive to pressure and tilt variations.