Facebook EmaiInACirclel rss
IT outsourcing

Designing an App in 6 Easy Steps

Elisa RITEAU
Design Director and Chief UI/UX Analyst - Revsquare

When it comes to designing a product, whether it is a website, a web app or a native app, creating a clear and well thought out agile process is just as important as setting goals. Of course, no plan can be perfect, but having one will help the team focus and move forward with confidence. With this in mind, let’s discover the design process together.

App Design - User Experience - Native Apps

Designing an app is both an Agile and Lean process that requires building an immersive experience that complements a user-centric product. Contact us to learn more about how to create engaging apps for your audience.

#1 – THE WARM UP

Before even thinking about the UX of an app you need to begin with the Discovery phase:

  • Understand what the product is about
  • Determine the target audience
  • Define personas to map out how users behave, what they think, what they want to accomplish and why
  • Write user stories with all the requirements
  • Create the site map keeping the user flow in mind

Learn more about how to determine if your product fits user needs

 

LET THE FUN BEGIN

Now it’s time for the UX/UI team to come out of the shadows! Not only do we have everything we need to start thinking about the product but we can actually start prototyping it. How cool is that?

Good design encapsulates the entire transaction process and conceptualizes the brand and design strategy. Here we will begin creating a functional prototype and eventually conclude with a visuallly-striking final product.

#2 – Branding

“First impressions are everything!”

Revsquare-Branding

From design strategy (brand, content, digital, marketing, etc.) to brand identity (logo, fully-developed visual vocabulary, key visual assets) and style guides, (colors, font styles, font sizes, formats…) every single detail (Don’t forget: “The devil is in the detail”) is thought out.

Things are starting to take shape!

Tools: Illustrator, Photoshop

“The most important thing to remember is you must know your audience.” Lewis Howes, lifestyle entrepreneur

#3 – UX / UI Interaction Design

Revsquare-UX-Interaction-Design

Building a prototype to illustrate how the UX and UI will be seamlessly integrated into the design is the really fun part in my opinion. Using wireframes will provide an architectural structure by using mboxes and rough shapes to organize specific elements while prototypes will provide a sense of the end user experience by taking a visual concept and creating an interactive model that can be used to test the product’s functionalities.

Tools: Axure, Adobe Experience Design CC (XD) for WF & Prototypes, Usability Hub for user testing (https://usabilityhub.com/)

Using wireframes and prototypes help you:

  • Visualize the concept
  • Find the right balance
  • Develop the user experience by providing an accurate sense of UX priorities through user testing

“If you don’t talk to your customers, how will you know how to talk to your customers?” Will Evans, CDO

#4 – User Interface / Visual Design

Revsquare_Design_Sample

The prototype has been approved and validated. Now it is time to really get down to business. At this step we give the design a visual makeover, focusing on everything from the UI to brand design expression and messaging. Based on feedback the visual look and feel will be finalized and can be applied to the remaining deliverables once approved.

Tool: Photoshop

“If you think good design is expensive, you should look at the cost of bad design.” Dr. Ralf Speth, CEO Jaguar

Read more about building an MVP on time and on budget

 

#5 – THE TURNING POINT

The design has been validated, we are done here right? Not quite.

There are collaboration tools for UX/UI designers and front end developers which gives the designers a bit more work to do. We have been using one of these tools for several projects and I would say that it requires around 10 to 20% more work than just sending very well organized Photoshop files to the front end developers as we used to do in the past.

In short, we need to create artboards on Photoshop which illustrate the different interactions possible on the product and then export them to the collaboration tool.

Tool: Zeplin (for now!)

Read more about Lean UX Design

 

#6 – THE END

Now we are done… apart from some visual QA during the front end phase before the product goes live.

Overall, none of this would be possible without close collaboration between all the protagonists. This quote from a professor of Architecture sums it up nicely:

“Not being a genius, I believe in collaboration, and my background as a problem solver means I’ve never been afraid to work with people cleverer than myself”

Learn more about experience design and Lean Product Development or contact us if you need help designing and developing your innovative product.

 

Contact us


Leave a Reply

Your email address will not be published. Required fields are marked *

By using the pages of this website, you agree to our Cookie Use. Read more here

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close