How to Structure a Design Phase

If you are building a new project or adding features to an existing project, chances are you'll need some design work done. If you're building from scratch, work with a designer from your development partner to create the screens, icons, graphics, etc. that you'll need for your product.

If you're adding features to an existing project, make sure to also work with a designer from your development partner to make sure they understand the current design language in your product. If you have a style guide, share that with the developers. If not, it's crucial that you have the designer emulate your current designs for any new features being developed.

If you already have all the designs you need from a previous designer or an in-house designer, you have a head start! However, you still need to make sure you talk over the designs with your development partner and explain why certain design choices were made so they can conform to the style you have chosen. Working off of someone else's designs isn't always easy, and the developers will likely have to make minor modifications to the design, so it's important they have a feel for the style.

Design deliverables

During the design phase, there should be 3 deliverables:

  • Wireframe
  • Design (psd/sketch files)
  • Prototype

A wireframe is just a simple layout of the application that highlights the buttons and the flow from screen to screen. The wireframe let's you go through a user flow without actually having to create all the designs for the individual screens and buttons. This enables you to make decisions on flow quickly, without requiring the designer to spend a lot of time recreating every UI element.

The design is the phase where they will add the UI and UX (this includes colors, logos, fonts, etc). Generally, these deliverables come in the form of psd files (Adobe Photoshop) or Sketch files (a popular design software for macOS). Whatever the format, the design deliverable will be heavily used by the developers when building the product.

Finally, the prototype is where all of the design files are stitched together to create a fully clickable version of the application (this is normally done through platforms like InVision or MarvelApp). These platforms take the wireframe one step further by putting your real designs into a clickable app that doesn't require any code to run.

Giving feedback on designs

One recurring problem we found in our earlier projects was keeping feedback organized and easily accessible. Clients would often have many points of feedback about the design, ranging from simple changes like color or fonts to major changes like changing the layout of a screen.

It can be easy to lose track of all the feedback and whether the changes have been implemented, especially when it comes to second and third revisions. At Aloa, we use a plugin we built on our software outsourcing platform that allows clients to log feedback and have conversations with the designers and developers on each piece of feedback. By organizing conversations around each feedback item, we're able to ensure there is always full context when discussing a change, and we can have a record of whether the change has been implemented.

Table of Contents

Why Outsource

How to Vet Developers

How to scope a software project

How to establish your project structure

Our development process

How to manage your relationship with your outsourcing firm

How to manage expectations with your outsourcing firm

Ready to learn more? 
Hire software developers today.

Running a business is hard,
Software development shouldn't be ✌️