Don't Mess Up Your User Experience! Work Design-First

March, 03 2017
All Articles

 

Don't Mess Up Your User Experience! Work Design-First

When it comes to building the best user experience for a custom application or software, At Radolo, we know it is most important to think design-first. Follow our 4 design first steps to make sure who ever you hire is doing it right. 

By understanding the purpose your application, a company is able to best create a user interface that allows users to derive the most value.

For example, we created an ecommerce system for the New Orleans Fish House. Through a clear onboarding and discovery process, we accurately understood that pictures and descriptions were very important to communicating the right information to buyers. Having a very visual platform was very important to us for NOLA Fish House because the food industry is very visual in itself.

Understanding your vision is an important step in the onboarding process that drives the design process. 

Once a company understands what your vision is, they should create:

Sketches

Wireframes

Mockups

Picture based prototypes

Below, we dive into each of these design-focused outputs.

User Experience Design Process

Sketches

This is the first phase in creating a great user experience. Drawing fast and simple pictures is the first design-focused step. These are often drafted during the initial onboarding meetings.

The process is quick. Often, boxes, circles, and lines are the best way to quickly communicate our ideas. This allows easy to revise any elements you may feel are out of place, or make fast changes.

If your app desvelopment team is not completing sketches, they are missing our on a key driver of a successful platform.

user experience design process

Wireframes

This phase is all about functionality.

Before you build a house, you will certainly go through the blueprint phase. A wireframe is pretty much a screen blueprint. It takes the original sketches and brings them forward, and dives into user flow through your software or application.

Wireframes will lack specific details, like color, texture etc. This digital skeleton is the framework of your website or mobile application showing the arrangement of content, navigation and other elements like social sharing.

Without the wireframe phase, users may not experience

the app as you expect them to.

 

user experience wireframe design

Mockups

While a wireframe is about function, this phase creates a realistic visual representation of the final product. By this phase your concept will be very flushed out. We add in color and texture to improve the visualization of the final product.

The mockup can look like the final version, or be a close variation of it. Often our mockups are created on graphic software or directly in code. This step allows our team and yours to evaluate the visual side of the project.

Without the mockup phase, the aesthetic features that

you expect, may not appear. 

user experience in app design

Picture Based Prototypes

This final step in the design process combines the previous three steps. It combines the functionality described in the wireframe with the visual design created during the mockup phase.

It is like a lite version of your final product. It should effectively create the expected functionality including all of the interface specifications.

This step is less expensive and time consuming than building out the full version with developer tools. It allows us to collaborate better and make minor adjustments before we hard code the final product.

Without this phase, your company could waste time and money building out the full version before diagnosing any issues. 

user experience design first

Your software or mobile app needs to be perfect. With the steps above, you can garuntee that your ideas are clearly communicated to the company that builds your platform.. Without them. you could end up easting time and resources. Follow our checklist to ensure above and beyond results. 

 

If you would like to read about how we went above and beyond for th New Orleans Fish House app, read our case study here:

New Orleans Fish House Case Study

All Articles