UX ingredients for successful web and mobile projects.

Building an effective website or mobile app is truly a process. The UX, IxD, creative process (UI), prototyping, the development (coding), the QA (quality assurance), AB testing, etc… is a lot. So in this post we’ll take a brief look at the different steps that lead to a successful project plan for most of the websites or mobile apps. Of course, this will vary from case-to-case, but this is pretty much the standard order of events.

1- Planning

Preparation is the key, organize a meeting with the stakeholders of the project. Find what they want as soon as possible. Try to ask questions and get answers to start understanding the product and try to set up a clear goal. Is true that we need to create a solution for the user, but to understand your client’s idea is very important too.
Identify and evaluate your client competition in the marketplace. The competitive analysis will evaluate how a product’s competition stacks up against usability standards and overall user experience. That’s one of the best ways to illustrate to your client what he should get and how you can help him innovate and lead the market.
Requirements Analysis. For requirements to be effectively implemented and measured, they must be specific, unambiguous and clear. Get the functional requirements (business rules, administrative functions, reporting requirements, historical data, legal requirements, etc…) and the non-functional requirements (scalability,
capacity, availability, reliability, security, data integrity, usability, performance, etc…). User requirement gathering is an interactive process, it can take time but will definitely help on the success of our product.

2- Research

Try to gain insight from your potential audience from the early start. You need to understand the users and their motivations in order to design products which meet their needs. People’s behavior and needs change as technology moves forward, so the challenge of designing products to offer great experiences is always fresh.
Demographics. Age, sex, location, social status, education, personality, lifestyle, attitude and other variables help to know your user, have a clear idea of your user needs, helps to find out their opinions, perceptions, beliefs, feelings and attitudes towards your product.
You can’t create a great product without a bit of documentation. Document and store all your work. It might help you spare you some headaches in the future. The right amount of documentation helps us order the chaos generated by our creative endeavors.
SEO & Analytics helps to create a website architecture, layout and depth of content that will help their users navigate easily to find what they’re interested in without thinking too hard. SEO can make sure you are supplied with content more fitting to users’ expectations. With Google Analytics you can get audience demographics, user journeys, popular page content, and get information about what users are searching for on your site, how long a user will remain on content, how quickly a website loads and how far a user scrolls down a page, etc.

3- Project Planning

User Flow. Flows are just as important to good interfaces as individual screens are. Customers don’t land on screens from out of nowhere. Specific how does he/she get from point A to point B? Flows are made out of individual interactions. A screen offers some possibilities and the user chooses one. Describe the necessary steps the user can take to finish a logical task.
Storyboards. Using storyboards allows the designer to quickly and easily add contexts to the ideas and help to keep this ideas grounded in the reality. Use a notebook or a white board drawing pictures of the UI is far more effective than verbally describing it. Also storyboarding helps to enforce you a discipline of thinking in terms of experiential flow.
Journey Maps. This is basically a visual representation that illustrates the user flow within a product or service. It will help on guarantee a customer satisfaction and potential needs and wants.
Epics and User Stories. This provide a product narrative so everyone understand the essence of what they are building. This a practice on agile methodologies, and are used to state requirements without writing endless pages of documentation. Groups of user stories are called “epics”, and if a user story is too big, it can be broken up into smaller stories work with. All this it will provide useful data to estimate the effort of a project and missing desire functionality.
Acceptance Criteria. This are a list of pass/fail testable conditions that help us determine if the story is implemented as intended. Using acceptance criteria helps to identify smaller sub-stories and make this stories. This approach let the developers or designers complete a task on a single iteration and speed up all the processes.

4- Information Architecture

Content Audit. Checking all of the content on a website, and compiling it into a big list will become handy. Some of the benefits are spot duplication, identify relationships and more comprehensive content analysis.
Card Sorting. Card sorting is an effective technique for planning your Information architecture (IA), as involve users of your website/app/product in the IA process. Organize your information using cards. Grouped them in order to achieve the right structure to find what’s most important or relevant to the users.
Sitemap. This are essentials for communicating information architecture and interaction design in web or mobile development teams. A sitemap can show the structure of your product/app/website. They can be represented on diagrams or using spreadsheets.
Brainstorming. It helps to generate ideas and solve problems. Define Goals & State the Problem, Categorize and Synthesize, Stimulate Creativity and much more. Tip write down ideas using the brain writing method lots of ideas can emerge simultaneously and you will be able to track all the work.

5- Design

Wireframes. Wireframing allows you to start creating the skeleton of your product and determine the information hierarchy of your design while making it easier for you to plan out the content and user experience. It helps to find features, the most important information, displays your information hierarchy and create the layout for your content.
Styleguide and Patterns libraries. With a pattern library you will have a collection of design elements that will provide consistency in user experience, reusability, and maintainability, improve communication, and support great content.
Mockups. Can be considered a high-profile visual design draft. Could be a middle to high fidelity design representation. Mockups fill in the visual details (such as colors, typography, etc.). A mockup help to gain confidence in your design before adding code to it and provides visual confirmation for clients.

6- Prototyping

In Vision prototyping (IXD). With tools as invision you can easily create interactive mockups for your designs and share these mockups with your team or clients. With this tool you can add comments, To-Do lists, and GESTURES functionalities for mobile, hover states and have a version history of changes.
HTML Demo. Use your HTML/CSS skills to create something `tangible`. Link pages and present a flow. Add CSS3 animations/transitions and you will save work for the developers.

7- Testing

A/B Testing. This is a method of comparing two versions of a webpage or app against each other to determine which one performs better. By measuring the impact those changes have on your metrics, you can ensure that every change produces positive results. With metrics from the A/B testing on Google Analytics as traffic, interactions, revenue, session duration, bounce rate and some others, you will find what’s the best UX/UI for your website or app.

What Next?

So as you noticed building an effective website or mobile app takes time and effort but I am here to guide you through the process. If you would like to discuss your website or app needs in more detail then please contact me today. Send me an email: info@robertoremedios.com or fill out the form with the topic: “Successful Web or APP Projects”

Leave a Reply