Contact us

Designing a Product: The Process You Need to Know

Ultimately, the full UX/UI process is a real success because of close collaboration between the whole team.

Elisa Riteau

Elisa Riteau

posted on May 2, 2017

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:

  1. Understanding what the product is about
  2. Determining the target audience
  3. Defining personas to fathom how users behave, think, and wish to accomplish and why.
  4. Writing user stories with all the requirements
  5. Creating the sitemap and the user flow
  6. Creating an interactive prototype or wireframes related to the main functionalities of the site/app (depending on the complexity of the product)
  7. 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!

Branding

“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 

design process UX UI

“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:

  1. Visualizing the concept
  2. Finding the right balance
  3. Developing the user experience to grasp an accurate sense of UX priorities through user testing

Tools used during this process: Axure, Adobe Experience Design CC (XD) for wireframes and prototypes, Usability Hub for user testing

User Interface/Visual Design


design process UX UI

 

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

Comments

Related articles

  • Experience Design

    Part 4: Defining the Minimum Viable Product (MVP) and Prototypes

    Refresh what you know (or may not know) about the MVP and how to create one

    Read more

    Part 4: Defining the Minimum Viable Product (MVP) and Prototypes
  • Experience Design

    Collaborative Design: When Teamwork Matters (Part 3)

    Teamwork continues to be important when it comes to design work. Here are ways you can work together more effectively.

    Read more

    Collaborative Design: When Teamwork Matters (Part 3)
  • Experience Design

    3 Steps to Determine If Your Product Fits User Needs (Part 2)

    Before you start designing and creating a product, here are the three important concepts to fulfilling a user's expectations.

    Read more

    3 Steps to Determine If Your Product Fits User Needs (Part 2)
  • Experience Design

    What Exactly Is the Lean Process for UX Design, and Why Is It Important? (Part 1)

    Learn the three points of Lean UX, and the important principles behind them.

    Read more

    What Exactly Is the Lean Process for UX Design, and Why Is It Important? (Part 1)
  • LOAD MORE

Contact

Need help from RevSquare? Use this form to contact us.
We'll get back to you ASAP!

(*Fields required)