What is UX/UI?

You have established the requirements and feature set for your application. So why can't we just start writing code? Didn’t you just invest time and money into determining what needs to be done for your app to be a success?

The thing is, your team now knows exactly what you want to do. But without going through user experience and user interface (UX and UI), they don’t know how you want to do it or what exactly you want it to look like. Solution architecture (which is Outside Source’s initial step in the app development process) creates a powerful outline of what your app must do, but without UX and UI, how you want your app to interact with and appear to your user is in question. UX and UI bring solution architecture to life from a visual and workflow standpoint.

Solution Architecture defines what you want to do. The user experience (UX) phase defines how you want to be able to do it. The user interface (UI) phase defines what it will all look like. And the development phase executes each layer of design.

What is UX/UI?

Somewhere along the way in the app development process, you want to see your brand colors. You want to see everything incorporated into a beautiful design, and you’re not sure you want to wait until the entire thing is coded and ready to launch. As attractive as that design could be, if the workflow is inefficient or not sequenced appropriately, then users will be discouraged and lose interest in the app. It is equally critical to ensure that the app’s workflow, process, and features are built in a way that facilitates an experience that is efficient and thorough. That efficiency, thoroughness, and beauty is ensured through the joint efforts of UX and UI. 

In the app development world, user experience is the way your user will interact with your app. Your user interface is what that interaction will look like. The two phases are often grouped together because it’s hard to do either effectively in isolation. A good user experience will make it so a user can find what she needs when she needs it on the app, and a good user interface is beautiful and will invoke emotions in line with the app’s brand.

In other words, this phase is a process of gaining insight and feedback about a plan for an app before actually executing the app itself. UX is how the app works. UI is how it will look.

What happens in the UX/UI phases?

Every organization will approach the UX/UI phases differently. At Outside Source, we start out with the blueprints of solution architecture in hand: the user story map.

1) UX wireframe. As the genetic code of your app, the user stories defined within solution architecture serve as a perfect guide to start bringing your app to life. The UX expert will follow the details of the user stories and lay out the various screens and options within the app. They will create a low-fidelity design of the screens and features. This clickable design prototype will be used to ensure that the team is building the ideal functionality and the workflow for the end user.

2) UX review meetings. You are the subject matter expert about the product you’re developing and your customers’ needs, so anything that goes into the UX clickable design prototype should earn your approval. This is the time to collaborate with the UX/UI team, swap ideas, and offer feedback before they move on to UI. The fact that this design prototype is clickable means you will be able to navigate the design as if you were paging through your app. It’s more interactive than a slideshow of different screens of the app, but it also has no code yet to make it perform the job that the app will eventually do. At this point, it’s not branded and it’s not pretty, but it’s functional. During the UX wireframe review, you’ll be able to page through the screens of your app and provide feedback about whether the flow matches what you’d hope your user would experience. Once you’ve approved the general flow, the project moves to a more aesthetically-focused phase.

3) UI design. It’s nice to know what screen your user will land on after signing in and what it will take to get from screen to screen within the app. But it’s even nicer to experience it with your company’s own colors. During this phase, you and the UI expert will take the UX clickable design prototype and discuss what parts of your branding you want included and whether you’d like original design. You’ll collaborate about the needs of your audience, the app’s use cases, and your general business objectives. The clickable design prototype produced by this phase will look and feel like it belongs to you.

4) UI review meetings. During these meetings, you’ll get to interact with your UI design. You’ll have the chance to provide the team feedback about the look and feel of the clickable prototype. You and the team will work together to answer any unaddressed questions before the development phase starts. Everything at this stage so far has existed without code, and everything after this stage will use code to come to life.

What can I do with this?

You can’t take the deliverable of the UX/UI phase and sell it on the App Store. Although you can interact with the prototype and navigate from screen to screen within your app, the clickable design prototype doesn’t function like your app will once it’s been developed. But the clickable design prototype can still do so much for you. Here are a handful of ideas or ways you can use your clickable design prototype while you’re waiting for your app to be developed.

• Show it off to investors.

• Take screenshots or even share the clickable design prototype file to keep your board up to date about the development plans for the app.

• Do you have internal stakeholders? They’ll want to know where their money is going.

• Consider using it to get buy-ins before the app is even coded.

• Use it as a sales tool: you can demo the app for your potential user base and gain user feedback or even hype up its release.

Developing an app is a big deal. Having a clean, straightforward, beautiful app that works well could be a gamechanger for your business. The UX/UI phase is indispensable to the usability and attractiveness of your final product, and Outside Source makes sure your priorities are addressed during each step of the process.