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.
#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!”
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
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
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.
“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”