The UI/UX Design Process

The Stages of UI/UX Design

 

user flow artboard snippet essential designs

 

Experienced User Interface/User Experience designers will make sure your app appeals to your audience. An easy and intuitive mobile or web app will increase traffic, user retention, referral potential, and the overall revenue you are capable of generating.  A great design should catch users’ attention and keep them engaged! At Essential Designs, we have a great in-house UI/UX team working on each project to bring a higher level of intuitive design. This process has quite a few steps, which we have outlined below.

 

Stage 1: Learning and Defining

In this stage, through meetings and information gathering sessions, it is our goal to learn about your company, the project vision, and perhaps the product you’re featuring with this app. Within this process, we need to define the specific problem that the app will fix. Defining the problem is one of the most important parameters in software development, to fully understand what the product’s output will be. At this point, it’s also important to identify who the audience or user base of the app will be in order to create a design that is customized for their user experience.

 

Stage 2: Identifying the MVP

The Minimum Viable Product is your projects’ starting point. We determine your needs, then together work to separate features into ‘required’ and ‘nice to haves’, and the MVP is the most important features completed to use your app successfully and hit the ground running. Starting with a baseline product and adding iterations with additional features is recommended to keep timelines (and budgets!) in check and allows you to integrate user testing and adoption into your final vision. Using and testing an MVP is a great way to see your app come to life while having the flexibility to incorporate feedback into feature changes, or help you realize new features you want to add.

 

Stage 3: Brainstorming & Researching

Once the designer has a handle on who the client is, what the product is meant to do, and who the audience will be, it’s time to research. Learning about a specific industry- prevalent colors, checking out competitors’ products, or any similar feature sets to glean wisdom on what is currently out there and how this product will differ. Brainstorming layouts, design ideas, colors, formats, images, fonts, and more helps the designer to create a vision board to present to the client.

 

user flow artboard snippet - essential designs ui/ux development

Click on the image to view the full map.

Stage 4: User Flow

User flow is wireframing or ‘mapping’ out the layout for the application, which is intended to demonstrate how a User progresses through the application.  At this stage, we meticulously plan the User’s Journey, helping them find what they are looking for through an intuitive process. Users will follow a certain process/journey anyway when performing an action, based on their previous experiences with other apps or software. Our job is to think about how the design will accommodate how the User already behaves.

The wireframe diagram is a visual representation of allocated resources within the application and how they are accessed by the User. It demonstrates progression, how content is prioritized, what functions are available, and what behavior is intended & accommodated. It’s a crucial step in preparing for the next stage so that we are organized and no features have been left out or forgotten. Our in-house design team uses Sketch to create wireframe artboards, seen here.

 

Stage 5: Prototyping

It’s time to turn ideas into concrete examples. Our team uses a software product called Invision to create clickable mockups of the application. This version is pre-coding, to give you as accurate a representation as possible of the interface functionality, layout, branding, and colors. Reviewing this stage of the design process allows clients to find any inconsistencies or errors, hone in on marketing and language, and lock in the designs before development begins, saving both cost and time.

Prototyping allows for quick changes and additions, can be used to gather user feedback, demonstrate your product to others (investors, coworkers, executives) and offers interactivity to give clients a real sense of what the final project can look like. At this stage, design and user flow feedback is essential to complete any revisions and move into the development phase of the project.

 

By Mary MacPherson, Digital Marketing Manager @Essential Designs

Authored by Mary MacPherson

Mary is a popular Vancouver DJ and has been working in the high tech field since her inception as a web developer at Newbridge Networks in 1996.

Share this article

Related Posts

Sprints & Milestones

Sprints and Milestones   In software, mobile, and web app development, a Sprint is a set period of time during which specific work is to […]

16 Jul 2019
How to Clear your Cache

How to Clear your Cache When building and testing software and web apps, the first thing your Project Manager will tell you is “it’s important […]

15 May 2019