When it comes to designing a product (website, web or native app, etc.), focusing on a clear and elaborate agile process instead of the goal itself can reduce stress. Of course, there is no ideal solution, but the perception of work can change if there is a specific process in place. So if you’re part of a UX/UI team, let’s discover a lean process together to make your product’s design journey a success.
FIRST: THE WARM-UP, OR SO-CALLED DISCOVERY PHASE
Thinking upstream is the first step before even thinking about the UX of an app. This so-called Discovery phase includes:
- Understanding what the product is about
- Determining the target audience
- Defining personas to fathom how users behave, think, and wish to accomplish and why.
- Writing user stories with all the requirements
- Creating the sitemap and the user flow
- Creating an interactive prototype or wireframes related to the main functionalities of the site/app (depending on the complexity of the product)
- Gathering all the branding elements from the client and researching ways to improve or consolidate it
Once the Discovery phase is complete, it’s time to start thinking about the product and start prototyping it. How cool is that? Experience design involves the entire transactional process, including the conceptualization of a brand and design strategy, the creation of a functional prototype, and the arrival at a visually-striking final product.
SECOND: THE FUN BEGINS, AND SO DOES THE AGILE PRODUCTION
Working in sprints or iterations ensures constant flow and flexibility on both sides of the production: design and development. Ideally, the UX/UI team is 1 to 2 sprints ahead of the development team.
This phase is all about being lean, a process that relies essentially “on collaboration, iteration, making, and empathy as core to problem-solving” (Lean UX, Jeff Gothelf and Josh Seiden). Not only is the designer involved in this process but so are the developers, product owners (PO), and marketers. The whole team collaborates to come up with the minimum viable product (MVP) that’s acceptable for release. After all, the best product leans on teamwork!
“The most important thing to remember is you must know your audience.”
— Lewis Howes, lifestyle entrepreneur
First impressions are everything! From design strategy (brand, content, digital, marketing, etc.) to brand identity (logo, fully-developed visual vocabulary, key visual assets, etc.) to the style guide (colors, font styles, font sizes, formats, etc.) every single detail is analyzed. After all, the devil is in the details!
Tools used during this process: Illustrator, Photoshop
UX/UI Interaction Design
“If you don’t talk to your customers, how will you know how to talk to your customers?” — Will Evans, CDO
Building a prototype to illustrate how UX and UI will be seamless in the design is a really fun part of the process. Depending on the complexity of the app, wireframes that include boxes and rough shapes provide an architectural structure to organize specific elements. Prototypes, on the other hand, provide a real sense of experience by taking a visual concept and creating an interactive model that tests out functionalities.
The 3 main reasons for using a wireframe vs prototype are:
- Visualizing the concept
- Finding the right balance
- Developing the user experience to grasp an accurate sense of UX priorities through user testing
User Interface/Visual Design
“If you think good design is expensive, you should look at the cost of bad design.” — Dr. Ralf Speth, CEO Jaguar
Once the prototype has been approved and/or validated by the client, it is time for the visual treatment to be applied to the design. This covers everything from the UI to brand design expression to messaging.
Based on feedback, the look and feel are eventually finalized so it can be applied to the deliverables.
Tools used during this process: Photoshop
THIRD: WE BUILD USING THE AGILE MODEL
To produce the minimum viable product, the team iterates all the time to maintain a product that fits as close as possible to the market. “Product/market fit means being in a good market with a product that can satisfy that market” (Marc Andreessen, co-founder of Ning). In other words, we can only know what we don’t know, so we constantly test and measure to learn and adapt.
Once we reach the PMF, does it mean that we’re done? Not quite.
In the past, the design team might send very well-organized Photoshop files to frontend developers. Now, there is just a little bit more work involved for sending assets by using collaboration tools created for UX/UI designers and frontend developers. RevSquare has even been using one of these tools (called Zeplin) for several projects, which requires roughly 10-20% more work.
Essentially, designers need to create artboards on Photoshop to show different interactions and then export files to the collaboration tool, which then generates code for frontend developers. This process aims to "turn [files] into powerful specs and resources.” Although there may still be some differences between the initial design and the code generated by the tool, everything can be improved!
Tools used during this process: Zeplin (for now!)
FINALLY: THERE IS NO END!
Now, after some visual QA during the frontend development phase, the minimum viable product is ready to go live.
Ultimately, the full UX/UI process is a nice combo of design thinking and Agile development. It’s a successful combination because there is close collaboration between the team and the stakeholders. This quote from a professor of architecture sums up everything perfectly: “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.”