How To Create a Wireframe in Figma

A big part of User Experience (UX) and User Interface (UI) design involves something called wireframing. Simply put, a wireframe is a visual mockup of a web page without all the final details. The goal of a wireframe is to demonstrate how the content should function on the screen.

Doing this work in Figma makes it easy to wireframe lots of ideas quickly and get direct feedback.

Start with wireframes

A few weeks ago, the Product Design team at Flatiron School designed an update for a page on our website. We were moving quickly and instead of starting with wireframes, I instructed one of our designers to start with high-fidelity mockups. Big mistake you guys – starting with pretty mockups created 2 challenges:

  • The polish made the design too precious. We needed our content and engineering partners to critique the content, but they were not sure how much we were open to changing.
  • We ran out of time to iterate. The design spurred some other good ideas, but we spent too much time on the finishes and had no more time to explore.
Wireframe in Figma
When a design has too much detail right away, people have trouble knowing how to respond.

In this case, we were able to push the deadline out another week. The design team regrouped, produced a handful of wireframes without branded styles (colors, fonts, icons, images, etc.), and something magical happened:

  • The content and engineering teams suddenly had helpful questions.
  • It was easier to share the wireframes early and often, so iteration happened naturally.
Wireframe in Figma
Good wireframes focus on the important details.

Wireframe from the inside out

When most people start a wireframe, they skip an important step. Most people start with a big box shape to frame all the content. Then they make smaller boxes inside those boxes to represent things like navigation, page footers, sidebars, and so on.

Instead, start with the most important content on the screen and move out from there. This approach is called Epicenter Design and it will change your life.

Wireframe faster with Figma

If you are making wireframes in Figma, it’s really easy to explore multiple concepts quickly using components templates.

A screenshot of Figma's community showing lots of wireframe templates.

One of the wonderful things about Figma is the Figma Community. Other designers just like you and I have added hundreds of templates to the community library. Many of them are free and new designers benefit a lot from seeing existing solutions to problems they may be working on for the first time.

Want To Try It Out?

Hiring companies consistently rate Figma knowledge as one of the top “must-have” skills for UX / UI Product Designers.

In the Product Design course at Flatiron School, students are taught hands-on, practical skills, including how to use Figma.

A great way to try out the course is by taking a Free Product Design Lesson, with no commitment or strings attached! You can also see all the skills we teach in our Product Design Course Syllabus.

You can also learn more about what it’s like to be one of our students in this day-in-the-life of a Product Design student post.

Top 3 Retail Tech Trends in 2022

Shopping and retail tech in the modern age move at the speed of the internet, and retailers – both big box and boutique – need to evolve to keep up.

The tech that powers personalized shopping experiences, marrying online and in-store data, and cashier-less checkout are only as effective as the engineers behind the scenes.

Trend #1: Digital-First Shopping

While the retail market had already seen a shift away from brick-and-mortar shopping in the early 2010s, the arrival of the COVID-19 pandemic in 2020 cemented the turn towards online shopping. 

Shoppers by and large are no longer walking into physical stores for their goods, instead, they are logging onto their computers with credit cards in hand.

Companies whose digital presence does not present an attractive and easy-to-use platform to users will inevitably suffer in the digital-first modern age and be left in the dust by big-box retailers who offer ease of use. 

Faced with the urgent pressure to digitize, retail tech teams need to modernize their online platforms and will need a technically trained team to keep up.

TIP: Invest in Skilled Engineers

In a recent study, retailers reported software development as the #1 desired technical skill for new hires. Java, software engineering, SQL, Python, JavaScript, and data science also made the list.1  

So, how do retailers build out a technical team to get your digital storefront live and profitable? Sourcing recent graduates from technical training institutions can help ensure that new hires are up to date on the newest software, platforms, and best practices in the online marketplace. 

Over the past 10 years, top retailers such as Amazon, Walmart, Target, and Best Buy have hired our graduates across all disciplines including Software Engineering, Data Science, Cybersecurity, and UX / UI Product Design. 

Big box and clothing retailers in particular source our Software Engineering and Data Science graduates for their skills in Python, Java, JavaScript, and SQL. These languages are used in online interfaces such as cashier-less checkout, virtual storefronts, virtual dressing rooms, and marrying online and offline data to personalize shopping experiences and increase profitability.

See the full skills list taught to our graduates and learn more about hiring our top tech talent

Trend #2: Mobile Commerce

Going hand in hand with the shift to online-first shopping is mobile apps for on-the-go convenience. Customer touch points now feature everything from brand-owned mobile apps to social media platforms, each of which is a chance for retailers’ brand messaging to reinforce customer loyalty. 

But, in a crowded app market with dozens of competitors vying for screen time, how can a retailer increase downloads, user engagement, and – most important of all – mobile conversions? 

TIP: Revamp UX / UI For Seamless Shopping

UX / UI design is a critical success factor in mobile commerce, one that Data Scientists are tackling by connecting data points from multiple systems and gaining actionable one-to-one insights at scale. 

For brand-owned mobile apps, this is often where the most loyal (and profitable) customers aggregate. User experience and user interface can make or break mobile viability, and nothing bottoms out an app’s performance faster than a difficult-to-use interface.

Retailers should utilize UX / UI Product Designers to revamp user interfaces and imbue brand-owned mobile apps with easy-to-use features to ensure a seamless experience that will keep users coming back.

Trend #3: Cybersecurity For The Digital Age

While not a new topic and certainly not unique to retailers, recent cybersecurity trends and high-profile breaches have resulted in several pain points for brands that hold personally identifiable information (PII). 

With the shift towards remote/hybrid working, many retailers are realizing new or increased vulnerabilities including cloud hosting platforms, number of access points, more frequent cyber attacks, and a lack of internal resources struggling to keep up. 

In the digital age where automated attacks can quickly overwhelm retailers, having adept and skilled professionals in place is critical to a company’s continued prosperity and longevity.

TIP: Upskill Cybersecurity Teams

Essential cybersecurity skills for the digital age include SQL, which attackers could use to steal confidential data, compromise data stores, and execute web-based attacks, as well as Python, which helps to scan and analyze malware, and Java, which can be used in penetration (pen) testing.

For retailers to ensure their databases are secure, recruiting cybersecurity professionals with up-to-date and relevant skills or upskilling in-house teams is critical.

Partnering with established training organizations to hire top-level graduates can help retailers build out a team that is up to date with current technology and regulations.

Alternatively, retraining or cross-training existing employees can be a more financially effective option. Utilize technical training organizations to address technical skill gaps on your team and build on existing internal expertise. 

Custom-Tailored Solutions For Retailers

For retailers to keep up in the modern age, skilled technical teams, whether comprised of new hires or upskilled current employees, are critical to long-term viability and profitability.

If your organization is building out a technical team, there are some must-have skills sets to look for:

  • Software Developer / Software Engineer: JavaScript, HTML, Ruby, CSS
  • Full Stack Developer: JavaScript, HTML, CSS, Java, Ruby, Python, SQL
  • Front-End Developer: JavaScript, HTML, CSS
  • Back-End Developer: Java, Ruby, Python, SQL
  • Mobile Developer:  Java, JavaScript
  • Data Scientist: Python, SQL, Java
  • Data Analyst: Java, Python
  • Cybersecurity Risk Specialist / Analyst: SQL, Python, Java
  • Product Designer: UX, UI, ethical and inclusive design
  • UX Designer: UX (user experience), ethical and inclusive design
  • UI Designer: UI (user interface), ethical and inclusive design

But, retailers are busy, and sifting through a mountain of applications takes time. To ease organizations into the digital age with qualified employees, Flatiron School teaches the skills and disciplines retailers’ technical department teams need to keep up.

Software Engineering Data Science Product Design Cybersecurity
Website Development & Management X X
Cashierless Checkout X X
Virtual Storefronts X X
Virtual Dressing Rooms X X
Marrying Online & Offline Data X
Personalization X X X
Brand-Owned Mobile Apps X X
Mobile Social Commerce X
Protect PII X
Inventory Management X X
Sophisticated Pricing Algorithms X X
Increased Shipment / Delivery Speed With Drones, Other Tech X

To see how technical recruiting, upskilling and retaining, or hire-to-train programs offered by Flatiron School can help level up your retail tech team, visit our retail industry page.

Need something special? Talk to our team of retail tech experts about how we can build a curriculum to fit your organization’s needs. 

Sources:

  1. https://insights.dice.com/2021/06/14/technology-jobs-in-retail-demand-these-core-skills/
  2. https://hbr.org/2015/11/how-marketers-can-personalize-at-scale
  3. https://www.forbes.com/sites/bernardmarr/2022/01/12/the-five-biggest-retail-tech-trends-in-2022/?sh=2df4a01e36d4

WATCH: Six Interviews With Leading Product Designers

Thinking of pursuing a career in product design but not sure if it’s right for you? In that case, ditch the google searches and get advice straight from expert Product Designers at the forefront of UX / UI design innovation. 

In the 6 interviews below, you’ll hear from leading Product Designers on career paths, designing for a wide range of users, and how to excel in the field.

Preparing Design Students For The World of Product Design

Tech Perspective Podcast Ep. 15 with Flatiron School Instructor Jennifer Houlihan

Product design and UX / UI – what’s the difference? According to Jennifer Houlihan, Product Design Lead Instructor at Flatiron School, they’re stepping stones in the same design pipeline. The two schools of thought work together to deliver a user-friendly and stakeholder-approved product to market. 

In this episode of the Tech Perspective Podcast from April 2022, Houlihan explains the crossover between the disciplines, the importance of having a holistic design methodology, and how a strategic mindset can help designers level up in their careers.

“Product design includes UX / UI, you can think of it as an umbrella or a circus tent. But product design includes a lot of strategic work mapping business needs and stakeholder needs to what the users need. [product design] is a level up from UX / UI.”

Product Design, Mental Health & Brand Storytelling

Tech Perspective Podcast Ep. 18 with Founder of Really Good Emails Matthew Smith

Are you Yoda or are you Luka/Leia? In this Tech Perspective Podcast Matthew Smith, Founder of Really Good Emails and Principal Designer at Bunsen, explains how knowing a brand’s role in their customer’s story drives better product design decisions and can ultimately result in hyper-dedicated users.

“To me [digital product design] is the skill and practice of creating a user interface people can engage with and do so with utility and enjoyment – that’s where the brand comes in … Design isn’t just about making things look better [it’s] about relationships.” 

Signs You’d Be A Good Product Designer | All Things Product Design

Tech Perspective Podcast Ep. 21 with Flatiron School Director of Design Matt Donovan 

For those considering a career in product design, Matt Donovan, Flatiron School’s Director of Design, recommends they consider the following questions:

  1. Do I like working visually?
  2. Am I a curious person?
  3. Do I like working with other people?

Donovan discusses what makes a great designer, the importance of empathy in design, and whether or not a background in coding is essential in this episode of Tech Perspective Podcast. 

“Product design is like a Russian doll with lots of different components … there’s all the research that goes into it, the high-level strategy … and then there’s the user experience design.”

Design Ethics, Building Products & Intellectual Curiosity 

Tech Perspective Podcast Ep. 22 with Flatiron School Director of Product Design Joshua Robinson 

Versatility and flexibility paired with a deep well of expertise in niche areas can give designers a competitive edge, Joshua Robinson says, but ethical designing is critical to ensuring a quality product that serves all of its intended users. 

Robinson explores navigating ethical quandaries in business, designing for inclusive accessibility, and which qualities are key to excelling in product design.

“Product design encapsulates elements from both UX and UI but also extends it. It brings the designer into the business side of the company and helps them think strategically about the features, products, offerings, and customer experience and touchpoints.”

The Human Side of UX Research

Tech Perspective Podcast Ep. 23 with UX Researcher at Indeed.com Eva Rajewski

With a background in Anthropology and a career in user experience research, Eva Rajewski of Indeed.com values meeting people where they are and using design to validate their individual needs and concerns related to specific product offerings. 

In this podcast interview from April 2022, Rajewski highlights the need for understanding users’ pain points, what graduates can expect day-to-day as a UX researcher, and the future of UX. 

“If you asked someone 200 years ago what they wanted to get around faster, they would’ve said a faster horse. They wouldn’t have told you they wanted a car. The job of the researcher is to understand what the problem is and how to solve it.”

From Radiology Tech to UX / UI Product Designer: Sabrina’s Story

Flatiron School info session Q&A with Product Design Bootcamp graduate Sabrina Hernandez

After almost six years as a dental radiology technician, Sabrina Hernandez decided to pivot and pursue a creative career in product design. After completing Flatiron School’s full-time Product Design Course at our New York City campus, she has since begun a successful and fulfilling career in the field. 

In a Product Design info session, Hernandez chatted with Joshua Robinson, Flatiron’s Product Design Director, about her career transition, challenges she faced leaving healthcare, and her experience with the course. 

“My biggest challenge when changing careers from healthcare to product design was getting my head around a new skill set and believing in myself. You just have to believe that you can expand your mind to learn more and become a new version of yourself.”

Think you have what it takes to join the ranks of the best Product Designers working today? Test your mettle with a Free Product Design Lesson, or check out the Product Design Course Syllabus that will set you up for success and launch you into a new and fulfilling career.

Do I need to be an artist or a coder to study UX / UI Product Design?

The short answer is, NO! You do not need to be an artist or a coder to study UX, UI, or Product Design. 

What is Product Design? 

At Flatiron School, we focus on digital products, such as websites or applications. Product Design is a holistic concept that spans across both UX (user experience) and UI (user interface) design. Learn more about the differences amongst Product Design, UX design, and UI design.

Do I need to be an artist to study UX / UI Product Design?

No! There is a decent amount of drawing  involved in UX / UI Product Design. However, the purpose is to develop or communicate ideas, and that can be done very simply – meaning, it doesn’t take a great deal of artistic talent.

Instructor Jennifer Houlihan demonstrated this firsthand during an instructional session (Sketching For Design) when she had participants turn a simple scribble into a bird. During the session Jennifer states, “Very little drawing is needed to convey an idea. It takes little to communicate powerfully, and it doesn’t require an art degree.”

Do I need to be a coder to study UX / UI Product Design?

There is a debate amongst industry professionals around how much code designers should know. Some believe it’s best to specialize in design so little to zero coding knowledge is required. Others believe that robust coding knowledge is a must-have, as it enables designers to work on broader projects as well as “speak the language” when communicating with developers.

Here at Flatiron School we believe that coding knowledge is a highly useful skill that will ultimately make our Product Design graduates more competitive in the job market. That’s why we teach students the basics – HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets). 

“It helps you be a better designer. You’re learning about the principles behind the code because it makes you a better designer and a better team collaborator. Resilient, flexible, and being a collaborator is important to standout in a job marketing. Being a better collaborator – having those mental modules about code – will help you.” – Joshua Robinson, Product Design Director

“Our hiring partners gave us feedback that [they would prefer] entry-level Product Designers to have a basic understanding of HTML and CSS. We cover the basics of HTML and CSS early so that students can play with it on a project level.” – Giovanni Difeterici, Senior Director, Education

In addition to basic web development languages, students will also learn how to leverage responsive designs for various screen sizes and how to hand-off designs to developers. 

Want to learn more?

Our Product Design course is crafted so anyone can be successful – regardless of your skill level. Download our syllabus or talk with an Admissions rep today.