Figma: The New King in Designing and Building Prototypes

Figma recently announced that it has successfully raised $50 million in Series D funding. The acquisition of more funding from various investors has increased Figma’s value, which Forbes now estimates at $2 billion.

The recent announcement is undoubtedly a big deal. Figma is a tool mainly used for designing and building prototypes. Its sales pitch is that Figma is superior by increasing collaboration between development and design teams. The recent funding round is expected to expand features the feature set and provide a better tool across the entire organization.

Figma, the collaborative interface design and prototyping tool, was the brainchild of then 20-year-old Dylan Field and WebGL prodigy Evan Wallace. The tool was built to rival Adobe and its Creative Cloud application suite. It was built to be a genuinely cloud-based tool that promotes collaborations among teams and makes the design process easier – something the “cloud-by-name-only” Adobe Creative Cloud lacks. 

UI and UX Design used to just be an afterthought. In software design, companies used to accomplish the workflows first then added the designs that fit into that workflow. Figma sought to change all that by shifting the focus to design using a design-centric collaborative approach. Today, many similar apps are eyeing a similar approach to make design a critical part of product development.

It all starts with a wireframe.

What is Wireframing?

At Jyst we are often approached with the following questions from people who wish to build an app or application.

I have an idea, can you build the app?

How much to develop this application?

How do I go about building an app?

The answers are, before even writing one line of code you should wireframe and prototype your idea.

Before you can even come up with a blueprint for your software, you will first need to come up with different concepts of the initial design. Initial ideas go through several iterations before they can be used as a final concept for an interface. During these initial stages of design, the use of actual text and images is meaningless and, quite frankly, at such an early stage of product development too tedious. 

Using wireframes as placeholders simplifies these initial stages. It lets you see how an interface would look like without any of the actual information that should otherwise be there. Think of it as the blueprints to your home. You can see what the structure looks like including its electrical and plumbing layout without using actual pipes and wires and interiors.

How did we Wireframe before Software?

The design process doesn’t begin with any software. As part of the pre-design phase, conceptualization starts with brainstorming. One of the most straightforward tools used by design teams is post-it notes. Boards and walls are filled with tons of ideas written on colourful post-its. 

Once a viable idea has been developed, they start to envision the content they want to show to users. They create wireframes on paper, which is later developed digitally, to visualize the content they want to show. The content is then sorted and labelled in a card sorting session. 

When building a prototype, and once the initial wireframes have been successfully created, they are then digitized and developed using Figma or any other prototyping tool to connect the wireframes to the information architecture. 

How Does Figma Stack Up Against Other Products?

Figma is relatively new to the design world, yet it is fast becoming the go-to tool for UI/UX designers around the world. Its success is thanks in no small part to its focus on improving the ease in which teams can collaborate on a project. It has a seamless user interface and a sleek feature palette. Here’s how it compares stacks up against similar apps such as Sketch, Adobe XD, and InVision Studio.

Pricing. All but one app use a subscription-as-a-service (SaaS) pricing model with free and paid plans. Adobe XD and InVision Studio offer free access for one document while with Figma you can have up to 3 projects for free. Figma provides team access at the lowest price at $12 per month. Sketch offers lifetime access for a one-time purchase of $99 per license. 

Platform. Only Figma has a powerful browser-based app that is universally-accessible while the Sketch app has been criticized for being offputting due to it being Mac only. (Does anyone still design on Windows?)

Prototyping and Interactions. Figma offers a powerful prototyping tool that rivals even that of Sketch and Adobe XD

Figma Prototyping

Collaboration. As the “Google Docs of UI design”, Figma follows through on its promise of offering a powerful live collaboration tool with a polished design UI. Adobe XD has only recently introduced real-time coediting at Adobe MAX 2019. With Sketch, you’ll need a plugin to promote collaboration while InVision Studio doesn’t support real-time collaborations at this time.

Figma built for collaboration
A complete product prototype

Is Figma the New King in Wireframing?

The early 2010s brought us a variety of innovative design tools that sought to change the way we viewed design. The introduction of Sketch was a welcome change to a design market that was dominated by design giants like Adobe. They offered innovations that were never before seen on the market, which kick-started a wave of design collaboration changes.

Then came the web-based Figma who many thought would never work. While many of those earlier apps focused on the actual design process, Figma took it a step further and focused on visual collaboration. 

Today, it is one of the best tools for wireframing and prototyping. Designers and design teams all over the world swear by the product. Even the best developers from the likes of Twitter, GitHub, Dropbox, and Microsoft swear Figma. In fact, they consider it to be the ultimate design tool today, as do the Jyst team.

Jyst Recognizes Our Team’s Efforts Throughout 2020

Did you know that small businesses account for 99.3% of all businesses in the United Kingdom? It’s true. This fact alone is enough to understand why although small in size, small enterprises are truly the backbone of our economy.

What’s more, small businesses promote healthy market competition and create new jobs. The benefits they provide to their local communities are seen in both grand and unseen gestures. 

Every economy in every location and industry depends and relies upon small businesses. At this time more than ever, it’s vital that economic players of all shapes and sizes support small businesses and the individuals who comprise them.

That is why those of us on the leadership team here at Jyst would like to take this opportunity to acknowledge and highlight the dedicated, hard-working efforts of our team. They may be small in number, but they’re large in heart and skill.

Since 2010, we’ve been helping clients build engaging websites, successful custom software solutions, and progressive mobile applications. Our talented team of experts has a natural ability to solve problems and provide solutions from both a UI/UX design and development perspective. 

Through every project, we witness their seamless transition from ideation to full product development all while saving time and adding value for our clients. If you couldn’t tell, we’re extremely proud of our employees and their devoted efforts.

In a recent project, our team built an app for a news company called Byte News. We built the platform for iOS and provided full-stack development services. The co-founder and co-CEO of the company was so pleased with the deliverables that they took the time to leave us some feedback.

They said, “We’ve been very satisfied, and they’re very responsive.” They continued, “Their quality of work has just been great. All around we’re extremely pleased with them. We wouldn’t have a company without them.”

We’re absolutely chuffed to receive this feedback and even more thrilled to celebrate the success of our team members. Platforms like The Manifest and Clutch help us to improve business visibility and recognise our employees’ contributions.

If you’re interested in working with our amazing team or would just like to discuss your project ideas with us, feel free to drop us a line!

Building a Fintech App : UI/UX Case Study

Disruptor and challenger banks are fast eating away at the market share of institutional banks. Traditional banks find themselves competing and playing catchup with new banking applications who possess the ability to roll our features faster and provide more superior financial management features within their application.

Recently Revolut revealed they had reached the 20 million customer mark and Chime in the US raised $ 200 million, giving it unicorn status. 

AWSM(“awesome”) is the thought piece of Gennadiy Khayutin and Alibek Junisbayev both of whom have vast experience in the financial services industry. AWSM considers themselves an Edtech company with Fintech elements. AWSM teaches teens and their parents financial literacy by intertwining video content with actual full-service banking. It offers all the products of a typical bank. These products are designed to be safe enough for teens so that by the time they reach 18, they have had debit cards, tried credit cards, and learned how to manage debt and lend to their siblings. AWSM helps teens to avoid making stupid mistakes in early adulthood, and in the process, becomes the very first bank in their life.

In assisting their goal for a Q3 launch AWSM engaged with Jyst to bring their brand UI/UX to life so that AWSM can join the list of disruptor banks taking the world by storm.

When building the UI/UX for a Fintech and Edtech application we had to breakdown all processes, screens, gestures and customer journeys, then map them out so design met functionality and user experience. 

Here is a breakdown of some challenging questions we had to overcome to design the UI and UX of a fintech app.

  • How do you increase engagement in an application that crosses both the edtech and fintech industries?
  • How do you create a rewards-based UI for a fintech app to increase the engagement on typically “boring” topics, interest and saving rates?
  • How do you onboard customers for a fintech product considering AWSM’s aim is to acquire teens and parents as customers. 
  • How do you work with the developers to build a UI/UX experience across two different contents. 

So let’s start from the top 

Q1. How do you increase engagement in a fintech app at the same time as project an educational message?

Engagement is vital when developing an application for the fintech industry. Long gone are the days of a once-monthly statement in the post. Now customers need instant metrics, notifications and breakdown on expenditure.

Here’s how we increased engagement 

  • Ease of use – people will not engage with anything hard to use or understand. Simplicity is one thing, but portraying value-added functionality while retaining simplicity is the main challenge. Here we used the easy navigation, menu bars and gestures to increase the engagement with the AWSM app.

  • Minimize the number of processes to any key action No one wants to see screens of information or pages and pages of terms and conditions. So attention was paid to portraying what is necessary to a customer in their first session after creating an account.

Q2. How do you create a rewards based UI for a fintech app? 

The topics that provide course content on are not typically on the wishlist of any teenager to learn. Therefore we have to increase the rewards based feature set to drive engagement on typically “boring” topics such as interest and saving rates.

Sophisticated Rewards –  We all have that one application on our phone that brings us back for more. Be it the dopamine hit from a like on a photo, or a reward or badge for finishing exercise class. Cleverly laying out a sophisticated rewards structure leads to higher engagement across all age brackets. With AWSM an advanced rewards programme for educational courses was built into the application creating an incentive element within the platform. When incentive meets education, it’s a powerful combination.

Q3. How do you onboard customers for a fintech product considering AWSM aim is to acquire teens and parents as customers.

Think about how difficult it is to acquire one customer demographic, now consider having two demographics that you aim your Fintech and Edtech application at.

When looking at onboarding the idea is to be concise yet precise. By law you have to capture specific information to open a bank account. This process was simplified using the inbuilt scanning of photo identity, meaning the on-boarding screens and data collection processing time is halved.

Utilize Touch ID for quick sign-in – Applications that have Touch ID, have a much higher engagement rate than those that don’t. By implementing touch ID, you are much more likely to convert a customer and bring them back for their next web or app session.

Deliver the feature and benefits for the user before they use the application -Use the on-boarding screens to push features, remember in the signup process the customer still doesn’t know all the elements within the app. Do not lose this screen real estate space and push capabilities and features.

Let’s get one thing straight; as a teen you do not want your parents to have visuals over everything that you do (banking included) However, when you flip the concept around and offer more freedom when you reach your goals, things fall into place. 

Edtech Gamification – AWSM utilizes a lot of gamification throughout the app to drive people back to the app, which improves acquisition growth, but also to increases customer retention.

Below are some measures AWSM implemented with Jyst to gamify the platform.

  • Bonuses badges and rewards for completing chores and finishing courses 
  • Key metrics and KPI’s on spending and saving habits
  • Progress indicators on their journey within the app.

Q4. How do you work with the developers to build a UI/UX experience across two different continents? 

Like many of our clients, AWSM is based and headquartered in New York. Jyst Creative are headquarters in the UK.

Working remotely with clients we have honed our skills and processes to make sure the clients while miles away always have access to the team when most needed. 

For this project we used a combination of Zoom, InVision and internally Slack to ensure that the UI/UX interface of the AWSM did justice to the team and product that Gennadiy and Alibek have built.

UI/UX Trends to Watch in 2019

Technology is rapidly evolving and that is the reason why UI/UX Trends don’t last long in the digital landscape.

Because of the rapid transitions in the digital landscape, companies must keep their eyes on recent trends in order to stay relevant and to stay ahead of the competition.

If you are a business owner hoping to gain more exposure from your website or a software developer who wants to create a successful app, here are the UI and UX trends to watch out for in 2019.

Design that Works on Multiple Devices

It’s no secret that you need to optimize your business for mobile users. This is because 52% of all website traffic was generated through mobile phones in 2018. If your business is not optimized for mobile, you risk losing customers. Simply put, mobile is the way to go.

However, mobile optimization alone won’t cut it in 2019.

More and more people are using smartwatches and a steadily increasing number of homes are becoming “smarter” with smart technology. This means you need to adapt to this change to create a dynamic multi-device experience for your audience or customers.

A great example of a business that has adapted to this UI/UX Trends change is Uber. Customers can book their ride through the Uber app which they can install in their mobile phone or in their smart speakers like Alexa and Google Home. This is important because speech recognition technology is rapidly evolving and has made a big splash in the mainstream market in recent years. In fact, 43 million Americans own a smart speaker and 50% of them own two or more of these devices.

A black speaker on a brown desk and a blurred sofa on the background

Putting Attention to Details through Micro-animations

Micro-animations are small, preferably functional animations that support the user by giving visual feedback and displaying changes more clearly. These features are very valuable to designers as they depend heavily on them to bring the user interface to life.

However, the integration of micro-animations in the UI can be quite tricky. They need to be noticeable enough to enhance the user experience yet subtle enough to keep them from being distracting.

“You wouldn’t make every sentence of a document into a heading. The same principle applies to animation,” explains Sophie Paxton in Your UI Isn’t a Disney Movie. “Consider every animated element in your UI to be the equivalent of a heading in a written document. It should be used to signal the importance of an element.”

Improve your UI with micro-animations this year if you still haven’t.

Darkness, Vibrant Colors, and Gradients

Color has a great influence on the success of a business and the same concept applies to UI/UX Trends design. Every color needs to be relevant to the brand and needs to fit together like pieces of a puzzle to create a great experience for its users.

It’s a good thing, then, that our screens are more than capable of picking up a vast ensemble of colors. This means that this is going to be a fantastic year for incorporating gradients and vibrant hues in your UI.

A gradient is the blending and gradual shifting of colors from one color to another, which is commonly used to add depth to a design. For a long time, solid colors were the kings of UI. But in recent years, and especially in 2018, there was a slight resurgence of gradients. When Instagram changed their logo to what it is today, everyone definitely noticed. Now, gradients are slowly becoming a popular choice among creatives.

Another color trend that resurfaced last year the appearance of dark themes, which featured vibrant colors against a dark background. Businesses used to avoid dark themes like the plague. Now, darker themes are a thing as users seek to diminish the amount of blue light to which their eyes are subject. App giants like Facebook Messenger and Twitter now allow their users to switch to dark themes. Other apps have since followed suit as they allow users to view their apps in night mode.

3D Graphics and Deep Flat

Using 3D in UI would definitely make any business stand out because of UI/UX Trends. But not a lot of companies make use of this art style. That is because 3D costs a lot to make and takes a long time to load. And as attention spans grow shorter and the collective patience growing thin, this isn’t a good thing.

Despite all the negative press surrounding 3D graphics, they still managed to reach this year’s trends to watch. This is due to the workaround created by designers that allows them to simulate 3D elements on flat images. This faux-3D style of art is called the “Layered Image Still Effect.”

Deep flat, also known as the “Flat Design 2.0”, is another trend that you need to keep tabs on. It is an emerging favorite among designers because it provides more depth and direction by adding small details and visual cues on the graphic while still focusing on the simplicity of flat design.

To illustrate the difference, here are examples of traditional flat graphics (referred to as Flat Design 1.0 in the graphic) and deep flat (referred to as Flat Design 2.0 in the graphic).

Source: Blue Compass

In 2019, add depth and dimension to your UI by incorporating 3D and deep flat design elements.

Make it Personal

The web is oversaturated with businesses. Consumers see ads no matter where the click and every website seem to be selling them something. In 2019, you can’t create “one-size-fits-all” content and the “create it and they will come” adage now means nothing.

Through artificial intelligence and machine learning, businesses now have to capacity to take a personalized approach in serving their customers. Once you know what your audience or customers are interested in, you can now start creating campaigns that speak to them.

Businesses that run storytelling marketing campaigns have been seen success in the past and this trend will continue this year. This is because, in this highly digitized world, humans crave to feel – well human. Storytelling campaigns make people feel something and the more emotional connection they have on a product, the less skeptical they’ll be towards it.

And once skepticism is stripped away, it is only then that they are ready to buy.