As product designers, we are always finding a way to make our design process more seamless. When working on various deliverables and adhering to a timeline, we are always looking for a more efficient way to use Sketch. With the following plugins, there’s no doubt you will be able to produce pixel perfect designs quicker and more efficiently.
As a product designer, it is common to focus on visual design and forget about copy. Personally, when I am producing deliverables I tend to overlook my grammar and have always been dependent on Spell Check on MicrosoftWord or autocorrect when using iMessage. While visual design is a major component in your product, copy is usually overlooked. For those who tend to misspell words when including copy, a great plugin for Sketch is Spell Check. It is a simple spell checker that checks all the layers of your Sketch file. Once extension is ran, it will produce a list of texts that contain errors or an incorrect word. Very useful for those who have to sound out ‘Wednesday’ before typing it out.
For those that like to view their prototype as they design, this is the plugin for you. Craft plugin for Sketch allows you to preview your prototype as you design and also sync your artboards to Invision. When working with various stakeholders who request for an interactive prototype, the Craft plugin also allows you to copy a link while still working within Sketch and forward it to those who want to see your product. After syncing using the plugin, you can then go into Invision and view the artboards you created in Sketch as a prototype! Start adding your hot spots and you are good to go!
With Fitt’s Law emphasizing the importance of size and distance, Nudg.it allows one to design while practicing this law. It has been said that components in a design are more visually appealing when spaced out by 8 pixels. Not only does this plugin allow you space your components out with the simple click of a shift + arrow but it also helps you keep spacing consistent throughout your designs as well. When using Nudg.it you can select the amount of pixels you would like to space your components out by. After managing this setting, you can start nudging! You can set your “small nudge” and “big nudge” settings to ensure elements are spaced consistently. This also helps you save time by avoiding the tedious clicking, dragging and dropping around your artboard.
Copy and Paste Guide
One of the challenges I have faced as a product designer is maintaining consistency in my designs when designing for multiple screens/pages. To ensure components are aligned I set an initial guide for myself. If you are new to setting guides, they are those red lines that run vertically or horizontally throughout your artboard. I personally use them to ensure components are aligned. With the Copy and Paste Guide you can set your initial guides and when switching to another artboard you can paste those guides that you have set.
If you are looking to save yourself some time when changing the background of elements within Sketch, Paddit is the plugin for you. Sometimes you might find yourself changing the background of your components to adjust to your art board’s background. With Paddit you can simply group your elements together and change the background from there. Now that you no longer have to adjust the background for each individual component, you will be saving so much time and be able to move on to your next task!
These are just a few of the many plugins available for sketch. If you are already familiar with these plugins you can also check out Sketch’s website for an extensive list of plugins from third-party developers. Now that you possess more knowledge on how to design more efficiently in Sketch, download away!
- Jackie Chan is a UX/UI Designer at Perpetual
With so many fonts to choose from, what are the top fonts out there right now? You are probably already familiar with fonts such as Times New Roman, Arial, and Roboto but did you know these fonts are classified under two different typefaces? These two typefaces are known as Serif and Sans Serif.
Is serif trendier than a sans-serif? Let’s start with the difference between the two. Serif fonts have lines added to a basic character (such as Times New Roman) and sans serif is a typeface that does not have those small serif lines at the ends of the characters.
Serifs are known to be classic and traditional. The following are a few of the top trending serif typefaces out right now. Previous trending serif fonts included Saonara, Coachella, and Libertinus. Now let’s take a look at the “it” fonts of 2020, shown with examples below.
Sans Serif is associated with being modern and contemporary. Previous sans serif fonts included Avenir, Helvetica, and Roboto. Popular fonts of 2020 include the following:
Avenir Next Pro
Pairing the two typefaces together are also very common. When doing so, the rule of thumb is to use a sans serif for your header font and a serif font for your body. Keep contrasting font weights in mind to help distinguish hierarchy for users. A great resource for font pairing is FontPair and Fontjoy where you can view how fonts would appear paired together before implementing into your design. With that in mind, ensure that you have defined the purpose and mood of your design and then select fonts from there. For example, you wouldn’t want to use a curvy Comic Sans for an email to your client.
Now that you are aware of what fonts are trending right now, how does one stay up to date you might ask. Google Fonts is a great way to discover great typography. With their extensive catalog of web fonts, you will definitely be inspired and discover new fonts to use for any design project. Another great resource for typography inspiration is Pinterest. Creating a board dedicated to typography and following Pinterest users who contribute to the Pinterest community is a great way to see how others use font pairing as well and what is trending.
Now that you’re up to date and possess font pairing knowledge, you are ready to design with stunning typography!
- Jackie Chan is a UX/UI Designer at Perpetual
As app developers, we aim to be at the top in the exciting and competitive global app development market. Success in app development depends on what competitive edge we can offer to our customers. If you don’t have a competitive edge to offer compared to others in the industry, your app will likely be ignored in the app stores. So, how do you develop the app that is downloaded by users and recommended to their friends?
"Successful people do what unsuccessful people are not willing to do. Don't wish it were easier, wish you were better." - Jim Rohn, Serial Entrepreneur and Best Selling Author
It’s essential to start off on the right foot with top practices for app success. These may not sound intuitive or your logical next step, but will definitely improve your app development process. Build your app’s competitive edge by following these best practices in app development for 2020.
1. Comprehensive Research
Research is the first thing to do when planning an app’s development. Effective research in itself is a best practice in application development. It involves exploring features and priorities from trivial to complex and not ignoring any aspect that could affect any areas of application development. Start by researching your audience, their preferences, demographics, age groups, etc. Your users are the highest priority so it’s crucial to make sure you appeal to them!
Similarly, performing competitive research on your competitors to find out their strengths and weaknesses is key. Additionally, it is important to ask key questions about your competitors such as what apps are they developing? Is your value proposition or offering any different or unique compared to theirs? Doing this will help guide your line of questioning throughout the research process. Also, try to identify the challenges faced by them, and be prepared to find a solution to these challenges for your own offering.
The data collected from the research should be used for planning application development. So, make sure that you gather as much relevant, accurate, and precise data as possible.
2. Minimum Viable Product
A successful application must have a core functionality and features that support it. Too often, features and functionality confuse the user and also make the app heavy. For example, the user doesn’t expect a banking app to have games.
As a result, the biggest challenge in app development is to decide the features and functionality to include. A unique offering, supported by connected and relevant features, is the ideal choice. Limiting the scope of the application also helps you focus on building a high-quality app with the targeted functionality that you’ve pre-determined through your research.
To start, make a list of features for the app, and categorize it into mandatory or desirable (A good pattern to follow is the MoSCoW method : Must-have, Should-have, Could-have, Won’t-have). Then develop and release a minimal viable product to test your app in the market. Developing an MVP is quick and cost-effective with many included benefits. The feedback on this MVP app should be collected from your users to evaluate what to include in updates and make better informed business decisions down the line so you we can continue releasing better versions of your app after live-testing the MVP.
3. Effective Use of Technology
Choosing the right technology to use in your product starts from the app planning stage itself. Depending on the targeted audience, you must first evaluate whether to develop the app for Android or iOS (or both). Accordingly, this decision allows you to choose the best framework and language for app development.
At this stage, depending on your requirements and budget, you must also decide if you want to use open-source solutions for app development or go for customized development, or a combination. For simpler apps, you can also go for low-code or no-code app development.
4. Interactive Prototypes
A crucial component to creating a great app comes from exceptional design. If you have
designed well, you’ve made a good start at setting your app up for success. Winning app design focuses on user experience and user interface. If the user finds your app convenient to use, you have won half the battle.
Navigation is also a crucial element of app design. If the navigation is not easy, the user cannot access what they want in the app which will inevitably end with them reducing their usage of the app and eventually uninstalling it.
The best way to ensure the success of your app design is to create an interactive prototype. This helps keep the client and developer on the same page before any app development begins. Also, this is useful for testing your design and rectifying the deficiencies ahead of time.
5. Intelligent Budgeting
The best way to manage your app development funding is to make a budget before development begins. This budget is based on many factors so you should list down the features and functionality required in your app. Apart from that, it helps if you also set a timeframe for development. If developing the application is urgent, it will cost more to develop.
This planning doesn’t end here. To be able to make a reasonable budget, it is also important to estimate how much you can price the application. This will depend on the audience and market demand as there is no point in developing an application with very high costs and no returns on investment.
With that said, it is crucial to be pragmatic while budgeting. For high-quality complex apps, you will need a reasonable budget; nothing comes for free!
6. Don’t Ignore Security
No matter how well-built your application is, if it is vulnerable to security breaches, it will fail.
The list of best practices in application development cannot be complete without a mention of security. There are various ways to make your application more secure. Depending on the technology that you are using, you can manage security during the development stage itself. You must also ensure that you use authorized APIs for app development.
Apart from that, you must also take appropriate steps to ensure data security. Data encryption is a basic yet crucial practice for data security of your application so it is important to make arrangements for the safe storage of data.
Regular updates are required in applications to deal with prospective security issues.
Developing an app is a very time-consuming process. Awareness of the best practices in application development helps you save time, money, and resources.
To improve successful adoption and engagement of your app, the quality of your application development is a necessity, not a choice. Following the best app development practices also ensures the quality that will give you a large number of loyal customers.
If you’re looking for best-in-class app development, get in touch with the Perpetual team. We’d love to help you build your vision.
Jin Markov is a Content Writer with GoodFirms, a research firm in the USA. He loves reading about app development technologies while sipping his favorite cup of coffee.
I was born in New York but spent most of my life growing up in Hong Kong. I have hence always been drawn to organizations that expose me to a range of challenges and opportunities to learn across disciplines and borders. I have had the pleasure of working as a Product Manager at Perpetual for the past year and a half. In that time I’ve been involved in over 5 projects from healthcare to news production and even helped the city of New York solve energy conservation challenges while working with team members across the globe.
Every day holds a novel challenge here, as time sensitive requests and issues inevitably arise, meaning a Product Manager in this role needs to simultaneously be alert and ready to tackle things as they come while being able to handle them with a plan and process. In this time, I’ve learned important lessons that have led me to grow both personally and professionally that I want to share in this post.
From day one I have been involved in projects where I was given the license to become heavily involved with the client while working between teams. My first undertaking saw me working with an animal healthcare startup known as Roo. In the capacity as PM for this project, I began by understanding the current functionality of the platform which enabled me to begin planning a long term roadmap and priorities with the client. From there, I was able to create detailed user stories and then structure sprint plans over time.
I began supporting Roo at a time when the product was about to be launched to market, so prioritization and identifying launch critical issues became the most important part of my early involvement with the company. We assisted the client in setting up tools best suited for the challenge at hand, which included a project tracking tool, JIRA, along with a centralized document to easily log any critical issues observed in the field. These tools, along with a pragmatic and delivery focused process, resulted in the product getting to market in time, with critical issues addresses, and post-launch items prioritized and ready for the development team to seamlessly continue their delivery. You can learn more about the project in this Case Study.
Through this experience, I came to understand how quickly things move in the startup world and the importance of prioritization to keep track of tasks and handle them in the most effective way possible.
My next project was in the corporate world, which I learned moves at a different pace. In this case, our client was Thomson Reuters, a large multinational media company with over 25,000+ employees, which meant our team had to take a different approach to working with such a large client. Unlike the hyper agile nature of working with smaller startup companies, tasks can take longer and involve more people and teams, which means it was important for us to stay on top of dependencies and consistently highlight blockers to make sure we stayed on track.
The goal of this project was to help journalists speed up the output of certain types of news stories. This initiative involved taking an existing application that allows news editors to create drafts of recurring news articles, and templatizing them in order to create self-updating articles that would populate with information from a data source, ready to publish.
Early in the process, I worked with the legal editing team to see what types of articles they wrote on a weekly basis to try and ascertain which content types could be templatized. To do this, I underwent a review of articles written in a given week by the legal news team and began to draw conclusions about recurring topics such as plaintiffs, judges, and courts. With this information, I began to collaborate with our development team to perform data modelling on these inputs along with feedback from the legal editing team as part of our iterative process. The end product integrated novel legal data sets with the existing article templatization tool.
This undertaking taught me a lot about the process of iteration as we were consistently making progress while checking in with users and stakeholders. This allowed for a productive back and forth where we occasionally pivoted our approach as we gained and incorporated new information during the development process, resulting in a product that evolved to meet user needs. Another challenge in this project was building an end-to-end product for data vs. a well defined user interface, which pushed me to think about the value that different types of data can provide, without the benefit of a visual to guide this understanding.
While these two projects were focused more on defining and building products for our clients, I was also heavily involved in projects that were more focused on UX Design overhauls and improvements. In this role, I played the role of a Project Manager more than a Product Manager (see my post about Project Manager vs. Product Manager here).
Working with one of NYC’s largest moving companies, our team was tasked with revamping the look of the entire website and the way users navigate the various pages to improve overall move bookings. This project was unique due to the various stakeholders from different areas of the company being involved in the process, since different pages had varying requirements for what needed to be displayed, including business, marketing and legal.
For example, redesigning the long distance moving page required input from a specialized team involved with those customers, while creating a new insurance page required us to call in to the claims department to ensure we were stating the right information. This was key so as to not mislead prospective customers and occasionally, to adhere to legal terms. While designing all experiences, above all, marketing was a key consideration: we had to ensure our designs didn’t impact Search Engine Optimization (SEO) on the website. This meant ensuring our designs followed standard guidelines in terms of layout and mobile responsiveness, and accommodating content and copy optimized for SEO. This process involved working with the marketing team, an SEO expert and content writer. It was insightful to see how small changes we made drastically affected SEO performance, so a build-measure-learn approach was key in this process.
This project taught me to be flexible in light of situations where input can arrive from a variety of sources. Additionally, working between the development and design teams at Perpetual was an exciting opportunity in itself as it gave me the chance to interface between these disciplines and work together to realize common goals. You can learn more about the project in this Case Study.
In another User Experience focused project, where I played the role of Project Manager, we worked to revamp the entire product line for a unified communications company that looked to us for rebranding, design direction and most importantly user experience and interaction design as part of a larger company rebranding. This project allowed our design team to take a more ground up approach as we began the project by taking a full inventory of the existing products and reimagining what improvements could look like for end users. For this client, I acted as the liaison between our design team and our stakeholders in order to keep the project on track, while ensuring deliverables and key action items were followed up on in a timely manner. This gave me the chance to learn deeply about UX principles while gaining new insights into the intricacies behind product branding and advanced interaction design for a suite of enterprise products.
While client projects provide invaluable learning lessons across a range of industries, I was also given the opportunity to apply my knowledge to an internal project built from the ground up. As part of the team working on Perpetual’s ideative participation in the 2019 NYC BigApps Blockchain Innovation Challenge, I worked with our development team to create a blockchain backed reward platform aimed at improving carbon emitting behaviors. After a period of ideation, I went to work creating wireframes and user stories to inform the development team. Over time we brought our tool which we named “Power Chain” to life and began dogfooding our product among our team members to understand how users would interact with the self reporting portion of the product. Our hard work culminated in a pitch to the representatives of various NYC government agencies where the Perpetual team finished in the top 3 spot for the “Energy” category of the competition. (You can read more about it here.)
My work on “Power Chain” involved a period of thorough ideation with the team as we bounced ideas off each other and considered the feasibility of our ambitious attempt to change the energy consuming habits of our fellow New Yorkers. I also got to present the pitch (video here), honing my startup pitch and communication skills in the process.
As I mentioned at the start, being a Product Manager at Perpetual requires flexibility and perseverance. Working here, new projects and challenges are always on the horizon which keeps me on my toes and out of my comfort zone. As a result, the learning opportunities never stop coming and there are always different ways to apply yourself to the tasks at hand. Overall, my time here can be defined by the numerous lessons I’ve received in the ever-changing space of technology which I believe has the power to spark meaningful change in the world.
I’ve gained a better understanding of the process of iteration and it’s benefits to creating a well rounded product. I’ve also experienced the pace of working in the product development world and how to prioritize effectively in light of competing tasks. Most of all, it has become clear to me how interdisciplinary and engaging the role of a Product Manager truly is, and I am constantly reminded how much more there is to learn. As more new projects come down the pipeline, I am eager for new experiences and look forward to everything that lies ahead.
- George Molina is a Product Manager at Perpetual
There are too many sources of information about the CoronaVirus, and not all are credible and trustworthy. Here’s a helpful list of 5 reliable sources related to the spread of COVID-19 to keep you informed and aware, with an emphasis on guidelines, news and latest statistics.
1. The Center for Disease Control is maintaining a “Cases in the U.S.” page for visitors to get a better idea of the epidemic. Users have the ability to view number of cases at a glance, cases by exposure type, and cases by date of onset.
2. John Hopkins University has released a visual tool to view the spread of the virus across the world. Along with an interactive map, the tool includes the number of cases by country and is regularly updated with the latest information.
3. For New York residents, the New York State Department of Health is publishing updates from the state government to this site. Included are the number of cases by county as well as a COVID-19 hotline.
4. FlowingData is a data visualization site that aggregates various graphs, tables and more related to COVID-19 information like changes in foot traffic among cities, simulations for virus spread and more.
5. Thomson Reuters has created a Coronavirus resource center with up to date news articles as well as free resources for businesses as they work through this crisis.
The Perpetual team is monitoring the situation closely and we remain committed to staying informed from reliable sources and helping our community of employees, clients, partners and neighbors stay safe.
Have you ever willingly provided information to someone you just met? I’ve always been hesitant when it comes to giving out my information and signing up for something in person - this includes rewards programs and giving you my date of birth for a birthday treat. This all changed when I had a great experience with a membership staff at my local gym that influenced me to sign up for a membership on the spot. She was engaging, spoke in a calm matter, was not overly chatty, and truly listened to me. Sure, I could’ve signed up online or continued to take advantage of the free guest pass but there was something about the way she spoke to me that made me want to give her my credit card, address, first and last name AND even my date of birth. I thought wow, how can I take this experience and apply it to UX copywriting?
One of the challenges that I have faced in the past as a UX designer has been influencing a user to provide their information through my designs. How many of you hit ‘back’ or ‘exit’ once you are prompted to enter your contact information to be contacted by a representative? I know I am guilty of this. These short messages on an interface that you encounter are called microcopy. Examples of microcopy include short sentences, a word, or an error message that you see when using a product. While the design of the UI also plays a vital role, copy is a huge part of the user experience. Words are key to bringing a conversation to life.
Just like my conversation with the employee at my gym, microcopy needs to be clear, concise, and transparent. In order to engage in a conversation, you must first empathize with the user. When using microcopy to ask a user for their information, first inform them why that information is needed and what will be done with that information. Now let’s take a look at an example of bad microcopy and good microcopy in a multi-step conversational flow:
As you can see, the user has arrived at their final step and is asked to provide their payment information for a free trial. As a user, I would be expecting to sign up for a free trial without having to input my payment information. This unexpected step would deter me from signing up for this trial unless I was given more context as to what will be done with my credit card number or if/when I would be getting charged. Transparency is key when creating copy that requests financial information.
While transparency plays an important role in conversational microcopy, engaging and empathizing are also as essential. Just like meeting someone new for the first time, you find out their name and ask questions to get to know them a bit more. Once you learn more about the user, you uncover what brought them to your product and how you can help them. Providing extra context while keeping copy short builds trust and makes the user feel a closer connection to the brand.
Just like having consistency in your designs, consistency in your copy is just as important. This helps maintain your brand’s tone and voice. What is consistent visual design without consistent copy throughout your product? I have been fortunate enough to apply and expand my knowledge on product design here at Perpetual and this included learning that while maintaining consistent copy is great, you should also ensure grammar and punctuation contain no errors. As a user, it would be difficult to trust a product if it contained grammatical errors when asking me for my personal information. This is so obvious, but is surprisingly often overlooked. If you are UX copywriting and and you rely on spell check such as myself, I recommend looking into the Spell Check plugin for Sketch.
Tone of voice (eg funny, friendly), conversational interfaces, use of emojis and images are other tactics you can employ in using micro-copy to your advantage in creating good conversational interfaces. These various elements engage the user and give your product personality. One of the top UX trends of 2019 was making a form-page feel like a conversation. Lemonade has successfully made signing up for insurance coverage feel like having a conversation with a real person. Different flows are created based on the input of users which gives them a sense of empathy. Each option is accompanied by a representative icon providing visualization for the user and clarity on their selection. As you can see in the image below, the light and inviting microcopy is consistent with the iconography used.
Microcopy is not just copy but also a part of the design itself. Working with users and stakeholders has taught me that although you can create a visually appealing product, the experience will not be complete without good copy. The iterations I have done after receiving feedback for each of my deliverables have not only been visual design related but on the copy I used as well.
Analyzing the conversations I have with others on a daily basis has helped me to become more mindful when creating conversational UX copy while maintaining a client’s brand tone and voice. Next time you find yourself signing up for an account online or entering your payment information, think to yourself - how much is the copy influencing your decision?
-Jackie Chan is a UX Designer at Perpetual
Here at Perpetual we focus on providing our clients with innovative design and custom software development services. Based in New York City, we specifically offer UX/UI design, web development, and web design services to clients of all sizes. We also complete projects in a wide range of industries with IT being the most popular at 50% of our total industry focus. Our profile on Clutch helps customers visualize the endless possibilities of their projects by taking a look at our digital portfolio.
Our profile also holds a lot of information in the form of client reviews, with an impressive 36 reviews approaching a five-star Clutch rating.
We recently worked with a digital studio on implementing an advanced interactive learning application. Given in-house designs from the company, we then developed the app using Prismic and React. We communicated with the company daily through Slack and standups three days every week, resulting in appreciation of our progress and transparency throughout the process.
Another recent project of ours was creating a custom web page for the brand & design agency, Design Bridge. The client enjoyed having our team come in and work with their designers; this partnership helped streamline the project.
Clutch is continuously growing and is always looking for ways to be better. One of their newest additions is another website to their domain, The Manifest. Buyers are able to consult with experts on The Manifest through its extensive how-to guides of business challenges. The Manifest also publishes data and trends for various industries and lists of the best performing companies. Perpetual has been featured on the competitive list of top IT service companies in New York.
We hope you will take the chance to take a look at our website to learn more about us and what we offer and get in touch to build your next great project.
Why I made the switch to FIGMA and what I found along the way
As my product design work expanded with more complexity and higher fidelity, I decided to explore switching from Sketch+Invision to Figma to see if it fits my own & my team’s workflow. In this post, I’m going to share my findings, and key considerations for anyone who’s interested in making the transition.
Sketch+Invision have always been widely regarded as the current industry standard for UX & UI design for the past few years, and were also the go-to tools for my design work. But by mid 2019, we had a lot of tool choices including Adobe XD, Marvel, Framer, Figma and many more. Among these, Figma had long been on top of my radar, as it’s gained extreme popularity as an all-in-one tool for real-time team collaboration on a UX/Design project.
So what is it that got me interested in actually transitioning into Figma? One of the products I was working on has evolved with more complexity in design & development, and I felt the Sketch+Invision design workflow became slow and quite challenging to keep track of design updates among multiple versions of designs. I strongly felt the need to better manage the design library and ensure efficiency and consistency across screens and components.
The main product I was working on was a web-based platform. As the sole UX & UI Designer, I was working with a product owner and a team of developers, communicating with them daily and operating mostly remotely.
Joann in her natural habitat at Perpetual's NYC Office
Switching: Overall Experience
Switching from Sketch to Figma has been a pretty smooth process, since importing an existing sketch file into Figma works with impressive accuracy. Also, since there are virtually no significant differences between the two, getting used to the new tool was quite easy.
Here are some of the highlights I found about Figma:
1. Efficient Workflow
With Sketch + Craft + InVision, every time I need to push a design update, I edit in Sketch, sync from Craft Manager to InVision, then prototype on InVision. If the design changes call for hotspot updates, since hotspots are created statically in InVision, I’d have to update them manually in InVision too.
With Figma, since it’s an all-in-one tool for the entire workflow from design, prototyping to commenting in one place, I found it a huge time-saver that freed me from switching between different tools.
2. Speed & Performance
The biggest advantage I found with Figma is speed.
In my experience, when working with large files (30+ artboards) Figma loads and reacts much faster than Sketch+Invision. This allows me to iterate WAY faster in Figma and get feedback quicker.
3. Easy Library Management
As with any decent size design project, building a design library takes time and effort. But in the long term having a single source of truth helps increase efficiency and consistency. In Sketch, the way to maintain a shared design library is to keep a sketch library file and link it to another sketch file. Collaboration between designers required sharing sketch files with each other and then consolidating new changes - this is quite a tedious and messy process.
Figma’s approach to library management is a centralized repository of components called ‘Team Library’. The cloud-based system with real-time collaboration adds a huge advantage to Figma, since whenever I push an update to the design library, all the linked files can be updated with one click, without having to manually share or consolidate individual files between collaborators.
4. Prototyping with Animation
Sketch+InVision can handle most of the basic prototyping work like creating hotspots and adding simple transition animations quickly and easily. But it’s impossible to prototype multiple fixed elements (header and side nav) on a page without using some creative hacks.
Also, more advanced prototyping capability requires an advanced prototyping tool like Principle, exporting it as an animated gif, and then adding it to InVision (which notably has a limit for image size, preventing larger gifs from being imported). Switching to Figma allows me to prototype at higher fidelity much more quickly, which benefits not only my design process but helps communicate transitions and animations in-context way better with my team.
This is another one of Figma’s advantages of being a cloud-based tool. It allows you to restore older versions instantly, which is especially useful when multiple users are editing the same file, and you can isolate individual edits of each user without having to email / sharing files at all.
Besides the nice things, I’ve also found some pitfalls with Figma:
1. A Figma Frame Has Two Types of URLs
This is a very specific but an important one that worths attention if you’re collaborating with a team. It took me and my team a while to realize that in Figma there are two types of URLs - (Work URL & Presentation URL). The Work URL is permanent while Presentation URLs change with prototyping - This means when adding a prototype URL to user stories, you have to be careful that you’re adding a Work URL, not Presentation URL.
2. Sketch Wins in Plugin Ecosystems
This a definitely an advantage of Sketch. It out-numbers Figma in third-party plugins and has way more integrations than any other design tools out there. Figma has currently a relatively smaller library of plugins, that said, I found it more than enough for my day-to-day design work needs.
Overall, switching to Figma for a complex product like this has been a great experience that improved my product design work and collaboration with my team. Currently I still actively use both Sketch + InVision and Figma depending on different product needs.
There are for sure a ton of capabilities in these tools I have yet to discover, but I’ll continue to explore deeper as I continue working with them :)
Joann Feng is a UI/UX Designer at Perpetual
The Perpetual team has vast experience in digital product innovation and building apps for the blockchain. We were also founded in this great city of New York, and like to be good citizens of the place we call home. The NYC BigApps competition encouraged New Yorkers to come together “to find lasting blockchain solutions to some of the City's most pressing challenges”, and we intended to do just that.
This year’s competition was split up into three categories; real estate, identity, and energy. Our environmentally conscious team had already been thinking of ideas for how to use the blockchain to help conserve and more efficiently use one of the world’s most valuable resources: energy.
We started developing an idea, which we dubbed Power Chain, to tackle energy usage by New Yorkers. In our brainstorming sessions, we concluded that New York faced three main issues. The first was that carbon footprints tailored to the average New Yorkers habits are difficult to measure accurately in one place. Furthermore, there is a lack of citizen engagement in sustainability focused events and we believe this is due to a lack of incentives for people to participate. Lastly, for those “green New Yorkers” out there, the ability to measure the improvement of environmentally friendly habits over time is non-existent so it would be difficult for this group and those who wanted to begin participating to prove their impact (or lack thereof).
We settled on the core idea that there had to be a better way for New Yorkers to increase their environmentally-friendly habits. As the idea developed, we started to think about ways that we could incentivize the average citizen and it started to become clear that gamification and the ability to gain rewards had the largest potential to cause measurable change across the city. Additionally, with the backing of the city government and agencies like the Mayor’s Office of Sustainability, the idea could be shared extensively throughout the five boroughs or plug into an existing effort like GreeNYC.
In our past experiences designing for the blockchain, it was important to ensure the product functionality was most suitably leveraging the blockchain for the true value it offers, and that people could make use of our blockchain-powered product in the most user-friendly way possible.
We decided that the best way to do this was to take our idea of gamification and let users gain rewards in the form of ERC20 tokens while recording user’s green activities on the blockchain. Answers to an energy consumption survey would determine the initial amount and users could gain more coins in the future by plugging into various utility energy-saving programs, taking part in sustainability events, and more.
This approach lays the foundation for a future energy usage accountability system through persistent records and a standardized data format scalable for business and government use. People can use our product today to get their Power Score, representing their eco-friendly behavior. In the future, we plan to calculate a Metro Score to capture the ideal city-wide energy utilization, and use this to benchmark business, government unit, and individual eco-friendly behavior. Over time, the goal is to reach equilibrium among these constituents, using the blockchain as a means to track this information and generate credits and penalties for compliance and deviance respectively.
Our preparation culminated with us finishing within the Top 3 in the energy category and led us to present our solution at NYC BigApps Demo Day!
We developed the idea further and have a live working version of Power Chain integrated with the blockchain. You can get your Power Score now!
We hope you enjoy checking out what our solution has to offer and we’d love to know your thoughts below.
When I joined the team, something that immediately stood out to me was the friendly company culture. Not only was there a tight-knit group culture, but I noticed how well everyone was able to work together and do their part to come together and deliver the final product. While also working in a fast-paced environment to meet client deadlines, the team would often still take the time to pause and catch up with each other over coffee or matcha breaks. This was a good way to unwind and to take a breather from the business of the work day, and to spend some time getting to know each other in a context outside of the office.
My typical day included several different tasks ranging from preparing marketing materials to attending client meetings and strategy sessions. Through the product management projects, I learned how to strategically manage timelines that are both realistic for the company, yet also support the existing team to be able to exceed the client’s expectations in delivery time. Additionally, I was exposed to various project management techniques, such as Agile and Kanban.
Working closely with my UX Design mentor, Joann, on the team allowed me to channel my creative side through several projects. These involved helping with ongoing projects, as well as designs where I had more flexibility, such as creating marketing materials from scratch.
Through the marketing aspect of the internship, I was able to learn valuable skills in writing content that is clear and concise, and how to use social media professionally. I was also able to push creative boundaries, not constrained with specific product requirements or specifications. Leading up to this, I didn’t have any formal experience working in either tech or design, so this initial exposure provided crucial insights into the industry.
In addition to these technical skills I also gained important soft skills such as close collaboration, teamwork, leadership, and project management. In this specific industry, close collaboration and teamwork are required to make the product come together-- everyone must do their own part of designing and developing, and additionally coordinate with others to make sure the product is successful. Every aspect of the project must be carefully planned and accounted for. Through this, I learned effective workflow and time management.
After this experience, I realized how different the corporate world is from the academic world. Going into my last year at Princeton, my previous work experiences have been mostly academic. I am now seeing the importance of taking ownership of the work you do in the real world, especially through such a hands-on role working closely with various departments of the company. While there are still deadlines to meet, they have a larger impact than getting marked down a few points on a paper. This gave me a new perspective on the work I do, both academic and non-academic.
My advice for students searching for internships is to research & reflect carefully about what you want to get out of your internship experience. While searching for internships, I would recommend not mass-applying to every position you see open, as well as not choosing one company over the other just because one might have a better brand name. And, most importantly, I would say to come in to any experience with an open mind & eager to learn more.
For my post-graduation plans I will look into more product & strategy roles, and potentially working as a full time UX designer. I am thankful for this experience and for the opportunity to learn from the Perpetual team. The culture, leadership, and patience of everyone here has played an important role in both my personal and professional growth. This internship has given me first-hand insight into how things work in the industry, with many perspectives to consider as I embark on my professional career after graduation.
Zarnab Virk is a Product Design Intern at Perpetual