Why I made the switch to FIGMA and what I found along the wayAs 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. 5. Versioning 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. Wrapping Up 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
Comments
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!
Visit https://www.powerchain.nyc 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  My proudest moments in the kitchen include learning how to navigate a rice cooker and spending far too many years attempting to crack an egg with one hand. Clearly, I am not a chef. With that said, I do watch a lot of Chef’s Table on Netflix. Maybe too much Chef’s Table. Enough to discern that at the top of a restaurant’s hierarchy sit two key positions; the head chef and kitchen coordinator. Both roles are crucial to the success of a restaurant and overall satisfaction of its customers much like a product and project manager are valuable players in their own right. To better understand the differences between project and product managers, let’s imagine a hypothetical restaurant called PM Cafe. In this cafe, the head chef’s role is akin to the product manager while the kitchen coordinator would serve as the project manager. It’s three months to the opening day of our brand new, Nikkei (Peruvian/Japanese Fusion) style locale. Like the beginning of any project/product, the managers involved have a lot of prep work to ensure everything runs smoothly from day one with a sustainable plan for the weeks and months ahead. Starting with the head chef, the outline ahead follows this process along with the responsibilities entailed in each step. Head Chef (Product Manager) 1. Ideation + Idea Validation Before opening the doors to a new restaurant, the head chef needs to go through the process of ideation to understand why people would want to eat there in the first place. Similarly, product managers spend a lot of time getting from ‘0 to 1’ using trends, competitors, and early customer feedback as points of reference to help fine tune the idea at hand. Once a more concrete idea is formed, product managers begin the idea validation phase. With the restaurant, this could mean pitching and prototyping meals to fellow chefs and paying close attention to their likes and more importantly, dislikes, to see how the idea holds up with any previously held assumptions. They would then keep the good dishes, and discard the not so good ones. 2. Business Value/PnL/ROI Say your friends and colleagues love the idea for this new restaurant! They agree that there is a market opportunity for Nikkei cuisine as it is becoming more well known, and New Yorkers would line up in droves to try it. Assuming Nikkei is a for-profit venture, the features it offers also need to make business sense to the stakeholders involved, one key group being the investors. Product managers must ensure that in addition to creating user value, the product is creating business value and is designed for long-term profitability. While the opinions and direction of stakeholders may align with the product manager’s own views, discrepancies may also arise as a result of requirements like revenue and profit value of a new feature that may become highlighted as important for the business’ ultimate success. Extensive vegetarian options, for example, may not be a mainstay of Nikkei cuisine, but a tradeoff needs to be made to cater to this audience and grow the addressable revenue pie. The chef will have to account for this while preparing the menu and understand how that may affect the other dishes – or features – in the months ahead. 3. Prioritization With the initial menu confirmed, the steps ahead must be prioritized to ensure the most valuable milestones are being completed first. Much like a chef can’t begin cooking without ingredients, appliances, and a functional kitchen, a product manager on a new project needs to sift out the most important user stories to be completed. In this phase of the products’ lifecycle, takeaways from prior market research, initial feedback, and the overall strategy must be synthesized. This allows a product manager to lead the initial approach towards a common goal. This step also benefits from the wealth of opinions that team members can bring to the table. One software engineer’s estimate could be longer than expected while a UX designer may need more direction before getting started. Considering estimations prior to final prioritization is an important added step. An ideal outcome of this phase is a backlog of features that are planned to be built and sorted in order of importance. The imminent features would be more well defined, with detailed definition for the lower priority features deferred for when their time eventually arrives. 4. Product Definition Once the kitchen is setup and ready to go, the head chef can begin working with their chefs to begin creating the first set of dishes. If the prioritized items include coming up with the appetizers before moving on to the main course, the ideas for each appetizer should be conveyed as clearly as possible to each chef involved. To this end, the chef may prepare a definition in the form of a cookbook, which has a set of ingredients and cooking procedures. Equally important is specifying the expected outcome: Just like a customer would expect some variety of raw fish at a Nikkei restaurant, a head chef would understand this expectation and explain what type of fish and how to cut it correctly so that the dish will be prepared in a way that satisfies the customer. In the case of product management, the PM will start by writing detailed user stories that flesh out and describe the user’s intentions and expected outcomes from their interaction with a certain feature. By defining features in this way, the product manager takes ownership over the delivered items. 5. Product Execution Here, new dishes are created and put together according to requirements while ensuring the path is clear for ongoing progress. Creation of future dishes, say, the main courses, is the next step in this active phase of the product’s journey. Like head chefs, product managers should always be ready to address blockers as they come up and be able to provide a clear solution to keep things going in a timely manner. 6. Product Acceptance Once items are ready for review it is up to the product manager to sign off on completed work. This means ensuring the acceptance criteria laid out during the product definition phase have been met and tested across environments. In the kitchen, this would entail a head chef tasting the finalized version of all the menu items before the launch of the restaurant. As changes and updates are to be expected for all menu items, the product acceptance step is ongoing, just as a head chef will be taste testing meals well after the opening week of the restaurant. 7. Product Delivery Now, the product has been tested thoroughly and is ready to ‘go to market’. A product manager in this stage would be supporting sales and marketing once the product has been launched in order to answer any questions and provide input where necessary. In essence, the product manager is expected to be the user’s advocate and would be able to speak to marketing about what it is the everyday person wants out of this product and how it could improve the lives of those who engage with it. The head chef would act similarly. Working with the sales and marketing team in the weeks leading up to the restaurant launch to help ‘convince’ diners that Nikkei is a cuisine they need to try. With the most thorough understanding of the stories and elements behind each dish, the head chef has a huge part to play in the successful branding of the new restaurant and its food. 8. Product Validation In the first post-launch phase, product managers are tracking an array of metrics to evaluate whether or not the launched product is succeeding in the intended market. Moreover, these observations could result in valuable insights for future prioritization and ideation phases. For the restaurant, this could mean asking things like:
For example, serving gluten-free bread may have been a priority early on in the restaurant’s launch phase but the team has observed that not many diners ask for gluten-free options and as such, time would be better spent looking for ways to improve the quality of the appetizers before coming back to that point. Consolidating and analyzing the answers to these questions brings about a more holistic idea of how real users and customers are receiving and interacting with the new restaurant. 9. Roadmap Planning After the initial launch, the head chef should be focused on refining and improving the restaurant as well as the produced dishes at various stages in the future. To help see the big picture and plan upcoming priorities and work streams, the key is to maintain a roadmap that allows both the product manager and involved team members to use it as a reference to plan bigger themes and priorities in the upcoming weeks, months and years. With both restaurant and product management in general, these decisions should always consider the larger, big-picture goals that were identified at the beginning of the undertaking. With all this in mind, the role of the kitchen coordinator is equally important for the restaurant. Kitchen Coordinator (Project Manager) 1.Resource Management Taking it back to the 3 months before opening day, while the head chef is focused on the food and creating a larger vision for the restaurant, the kitchen coordinator must begin by laying down the foundation. Likewise, a project manager would kick off the important step of resource management by realizing the main goals to get the project up and running; people, tools, facilities, and utilities. In a restaurant, the kitchen coordinator would need to understand what kinds of people and what specific skillsets would be most appropriate for the work ahead. Just like a Nikkei restaurant wouldn’t hire a French pastry chef, a project manager would evaluate the work that needs to be done and decide which roles are needed to accomplish certain goals. The quantity of staff would also need to be ascertained based on the anticipated workload, to avoid too many cooks in the kitchen. Furthermore, a restaurant can’t begin making good food if it lacks the tools necessary for success. With PM Cafe for example, a kitchen coordinator wouldn’t spend the restaurant’s money on a fryer if a majority of the food being served was raw fish. A project manager makes these decisions at the onset of a new undertaking by understanding the goals and anticipating which tools and materials team members would need to succeed. With people and tools sorted, PM Cafe staff need a place to call their own. The kitchen coordinator, if this was in their purview, would assess various facilities that could meet the needs of the team and restaurant. Additionally, they would need to account for utilities such as gas, water, and electricity for the kitchen to be in full working condition, at all times. 2. Timeline/Schedule Management While head chefs and product managers at this stage would be focused on solidifying each detail of the product at a consistently good level, kitchen coordinators and project managers would begin setting key milestones for the duration of the project. This would include such markers as the project start date, project demo dates, time estimations, stakeholder presentations, and industry events. For PM Cafe, the kitchen coordinator could decide that a soft opening would be held on July 1st. From there, friends and family tastings could occur in the couple of weeks after the soft opening to gain valuable insight from early opinions and feedback that the head chef would need to continue improving the food. Ongoing reviews of the menu and overall state of the establishment would play a large part in informing the all important stakeholder meetings. After all, the key players investing in the venture would want to feel confident that things are going in the right direction. A critical part of this process is time estimation on project tasks. For instance, if a certain dish takes two hours to make, preparations would need to be made in advance so that if ordered, customers wouldn’t need to wait the entire two hours for the dish. On a broader level, the staff in place should be able to deliver enough throughput of dishes to serve customers in a timely manner. Finally, ensuring the head chef and team attend and are aware of industry events such as Michelin award season would round out the important dates over the years that the restaurant should take note of. 3. Dependencies While the head chef should always be at hand to help manage the kitchen workflow to get food from point a to point b, the kitchen coordinator should always be on the lookout to resolve dependencies ahead of time so that delays may be avoided where possible. On opening night, the entire dining service is now the kitchen coordinators ‘project’ and it is their job to be sure that internal and external dependencies are under control at all times. Internally, there are personnel dependencies to make sure the job that needs to be completed that night has the right person handling it. If the plating specialist calls in sick, the kitchen coordinator needs to either step in or find someone just as qualified to pick up the slack. Having the correct equipment for this plating specialist is just as important and verifying that the aforementioned utilities are up and running at all times is vital to a well run service. External dependencies are just as important and these would include making sure your truffle vendor has exactly what was asked, utility bills are paid in full, and the new version of the printed menus have been delivered, all in time for the night’s service. 4. Risk Management As the restaurant begins to grow in reputation and has been running successfully for a few months, the final responsibility of a kitchen coordinator and project manager involves looking ahead and maintaining the sustainability of the restaurant and project. Blockers on future progress should always be highlighted and there should be a direct plan to deal with them as effectively as possible. Plans to add a new section to the kitchen blocked by a dispute between chefs over who gets relocated? The kitchen coordinator should step in and resolve the matter to make sure the space is open for the impending arrival of the new equipment. The kitchen coordinator should also understand that resources are finite and keeping track of every detail from the status of every ingredient to the mints given to customers with their bill is of utmost importance. They should do everything possible to avoid any risks, but if problems do arise, then they should have a plan to mitigate them eg having a back-up truffle vendor, what to do when a glass breaks, all the way through to the worst-case scenario ensuring fire emergency procedures are in place. Product vs. Project While it is clear that there are differences between the product managers and project managers, it is also important to understand that these roles can also work in tandem. In terms of PM Cafe, the hard work of the kitchen coordinator allows the head chef to continue making forward progress with the food and culinary innovation side of things while the kitchen and restaurant stay in good shape to keep the team going full steam ahead. In the event that the head chef moves on to another restaurant restaurant, customers would likely not notice a massive change in the quality of the restaurant until a month or so goes by as there would still be items and ideas to produce that had been discussed over the past few months with said head chef. Once these ideas run out however, it is up to the staff to take up the mantle and begin thinking of new ways to keep people coming. This is where the restaurant quality and role of the departed head chef who no longer has a say in the overall vision of the restaurant, could begin to diminish. With that said, this is our hypothetical restaurant and hypothetically, the employment status of both the head chef and kitchen coordinator are in a safe place. Whether in the kitchen or in the world of product and project management, when both roles are performed diligently and effectively, the result will be a high performing team and an operation set up for sustainable success. Just don’t forget to give PM Cafe a five star rating on Yelp. George Molina is a Product Manager at Perpetual At Perpetual one of our areas of focus is the blockchain. Having built some aspects of initial coin offerings, stable coins, security tokens and several smart contracts, we were excited to learn about Facebook’s foray into this world. We’d like to share our observations on Libra below. 1. Introduction to Libra Today Facebook released the whitepaper for Libra, a new cryptocurrency designed to be a simple global currency that will facilitate access to financial infrastructure to billions of people. Libra is planned to be a stablecoin, a currency that is backed by some physical assets that give it some intrinsic value. Unlike several other stablecoins currently available, Libra won’t be pegged to a single asset type (USD, Euro, gold, etc). Instead, it will be backed by baskets of bank deposits and short-term government securities. The Libra coins will only be minted when purchased with fiat assets, and will only be burned when coins are sold back to the governing body, and equivalent underlying assets are given back in return. 2. Who’s governing the Libra Blockchain, anyway? The Libra Association has been formed as an independent, not-for-profit organization that will govern the Libra Blockchain. Each member of the association invested $10 million into the project to earn a spot at the table, and is allowed a single representative on the Libra Association council. The members will be the ones initially running the nodes on the blockchain, making it a permissioned blockchain, rather than a traditional one. They are also responsible for maintaining the Libra Reserve, a reserve of real assets that back Libra coins.  3. A look into Libra’s blockchain: what makes it different from BTC/Ethereum/other chains? Libra is a newcomer to the blockchain industry looking to shake up the current environment by introducing changes in the Libra blockchain. The biggest thing to note is that Libra is a permissioned blockchain. This means that all the nodes on the chain will be known entities, as opposed to anonymous nodes like on the Bitcoin and Ethereum chains. However, this also limits one of the core tenets of blockchain technology, decentralization. The Libra team has however promised to move towards a permissionless system within five years of initial launch. The Libra team has decided to forgo Proof of Work as it’s methodology of consensus, instead opting for its own version of a Byzantine Fault Tolerant consensus approach, called LibraBFT. This allows the network to function correctly even if some nodes are corrupted. The final notable difference to other blockchains is that Libra has introduced a new programming language, dubbed Move, to facilitate transactions and program modules on their blockchain. 4. So, what’s the deal with the programming language Move? Move is the new programming language that is being developed to interact with the Libra Blockchain. The main components of the Move language are modules and resources. Modules will be Libra’s version of ‘smart contracts’, code that is executed on the blockchain to facilitate transactions. Modules declare resource types; and define procedures for creating, destroying, and updating those resources. Resources are a specific data type within the Move language. They are scoped to the module, and critical operations on resources can only occur within the module that defines it, allowing for data abstraction of resources. Modules will be deployed to individual users’ accounts, and a user account may only have a single instance of a particular resource. Outside of these limitations, resources can be used in much the same way as a normal variable. They can be included in other data structures and passed into functions the same way a developer would with a primitive type. The Libra team has published examples for developers to get an idea of what modules will look like, including the modules that define user accounts and the Libra Coin itself. View the examples here. 5. How can I interact with the Libra Testnet? Along with the whitepaper, Libra has also released an early version of their testnet, and a command line interface to interact with it. Currently, the testnet seems pretty simplified. There is no support for third party Move modules just yet, which means you can’t deploy custom code to the testnet. So users are left with just interacting with three major commands; account, transfer, and query. The account command contains subcommands to create, list, save, and recover created accounts (user accounts on the testnet), and a command to mint testnet Libra Coins. The transfer command allows users to transfer those minted Libra Coins to other accounts on the testnet. The query command has subcommands for balances, events, statuses, and a couple other variables. Overall, it will be exciting to see the CLI expanded upon in the coming months, as currently there isn’t much to it. 6. What’s next? Libra is set to launch the production blockchain in the first half of 2020. The Association is currently focused on recruiting members, with a goal of reaching 100 members by launch. Meanwhile, on the developer side Libra is currently looking to create APIs and libraries to interact with the blockchain, while adhering to open source methodologies. They also plan on working on fleshing out the Move language, with the intention of stabilizing it enough to allow third party modules onto the blockchain. We are looking forward to digging into Move once third party modules become available. Even in this age of social media, having a website is still essential. But sometimes you want to be able to customize your website beyond the capabilities of Wordpress, Squarespace or Weebly (the de-facto destinations to create a general website). This is where Gatsby comes in. Gatsby is a static site generator that is popular in the React Javascript Framework community. The benefits of using a static site instead of a dynamic one like Wordpress are manyfold:
It would be unfair not to mention that there are some disadvantages to static site generators:
Now that you are familiar with both the positives and negatives of a Statically Generated Site Generator like Gatsby,we can begin the guide of how to create a blog using Gatsby. First you will need some Prerequisites:
1. Install the Gatsby CLI which will let you use ‘gatsby’ as a command npm install -g gatsby-cli 2. Initiate creation of your new blog: gatsby new your_blog_name https://github.com/gatsbyjs/gatsby-starter-blog Note Gatsby provides many starter kits besides the one above if you want to go for a less conventional template for your blog. 3. Now you can change into your newly created blog directory that you created and start the gatsby server cd your_blog_name Gatsby develop You should see a similar output as below after running Gatsby Develop:  You can now see your blog at http://localhost:8000/ 4. You now have a functioning Gatsby blog! There are however a few things you need to customize to really make it feel like YOUR very own Gatsby blog. Open up the gatsby-config.js file and change a few items there like the Site Title, Author, a short description of the site, the host URL and any social links you might want to add. 5. Phew! Now you’re settled in and ready to write your first Blog post. Gatsby checks the content/blog folder for blog posts with a .md / .markdown file extension and automatically converts each to its own separate post. You can go ahead and delete those three folders to make room for your posts. Afterwards create a new folder with whichever title you like, I called mine ‘The Great Gatsby’. Inside this folder create a .md file and you can start writing your first blog post.  Gatsby example blog post in markdown: --- title: The Great Gatsby Date: ‘2019-06-14’ Image:`` --- Join mysterious millionaire, Jay Gatsby in the Roaring 20’s… The parameters between the dashes are special markdown tags that will inform Gatsby about the unique title, description, date published and related image(s) for that post. As soon as you save this post, you will see the changes reflected on the localhost gatsby site you have up. 6. You should customize a few more things in order to have a unique Gatsby blog. Navigate to components > bio.js and edit the description about you living and working in San Francisco building useful things. One useful thing to note here is the {author} template tag used instead of a hardcoded name. This is received from the previously changed gatsby-config.js file. You can also take this time to edit the profile-pic.jpg file in content > assets to a custom photo. 7. You should now see something like this:  Congratulations! You’ve just created your first Gatsby.js powered blog!
With our team of experienced product designers and developers, we have been creating incredible digital experiences for our clients since 2012. Our efforts have not gone unnoticed as we’ve been recently featured as one of the leading product design firms for 2019 in New York by Clutch! Here’s what Perpetual’s CEO, Amish Gandhi, had to say about our recognition: “We strive to bring our customers world class services from our vast experience in innovative product design and software development. Clutch provides a platform for our clients to share their experience working with us, and this award is unfiltered validation of our services from the industry. Proud and humbled to be recognized as a market leader.”
“They've done a phenomenal job with the designs.” – CTO, Financial Services Research Group "They have a solid team and do high-quality work." – VP of Product and Engineering, Hospitality Company "Perpetual had a thorough, well-planned approach that they executed effectively." Clutch’s sister-website, The Manifest, also recognizes us as among the best product design companies. The Manifest provides businesses with how-to guides, business news, industry reports and other metrics. Additionally, we are also featured on Visual Objects among the top UX designers. Visual Objects displays portfolios from creative agencies to help businesses visualize a project before hiring a solutions provider. Overall, we are tremendously excited about the recent recognition we’ve received. This would not have been possible without our amazing clients and their positive reviews. We look forward to maintaining this momentum going forward!  We dedicate our win to our clients without whom none of this would have been possible.   Image Credits: Manu A few days ago, I found myself watching the horror movie, IT. Despite enjoying the film, I struggled to explain what it was about the film that I really liked. So, I started thinking about it in greater detail.
Even then, I was unable to pinpoint what it was about that I really liked. So I started to think why I enjoyed the whole horror genre. I began by drawing parallels between what I felt were important considerations to a quality user journey and active design principles, some of which I’ve listed below:
Summary: There is definitely something valuable to be learnt from this genre for anyone working in experience design. People are accustomed to seeing horror as a guilty pleasure, but after observing how it captivates audiences, designers would benefit from taking a few trips through the shadows...  Image Credits: Sergio Guba Blockchain is a decentralized database technology that has captured the attention of both technologists and businesses alike. It should come as no surprise how much traction this emerging technology has gained in the past year, so much so, that blockchain was amongst one of the most Googled terms in 2017. Yet this curiosity has led to a great deal of skepticism and apprehension, both, within and outside of the tech community. With technologists still trying to unearth the real potential of the blockchain, it has fallen to the designers to think of innovative ways to fully utilize the ability of this emerging technology.
As a Product and UX Designer, these are some of the things that should be taken into consideration when designing for blockchain:
Summary: While blockchain-related companies are investing a lot of money in marketing, and visual design not many of them are focused on improving the UX aspect. According to Ivan Braun, founder of Icons8, “usability” could be the undoing of blockchain technology.“What will destroy Bitcoin? Governments? Hackers? Winklevoss twins? Usability,” he wrote in his blog post. Users are still apprehensive when committing to the technology, with the general perception being that it is very code-centric. The skepticism that comes with it is natural. And, in many ways is similar to how other technologies initially began as a project driven by research before evolving to accommodate design, blockchain may also take the same route. If you are responsible for a website or app as part of an online business, or really in any capacity, chances are you want to track how your website or app is performing. Are you hitting sales goals? Are people interacting with your site as you planned and expected? How are they traveling through your site? Are they even getting to checkout, or reaching the pages that really matter? Where are your users, what browsers and devices are they using, how did they arrive at your website? The questions could really be endless, but getting the answers can be quite simple. Google Analytics is a great way to track metrics and analyze them over time, deriving insights to inform your product and content decisions, improving the online experience for your users and turbo charging the performance of your website. While Google Analytics has a lot of built-in help and directions to get your site connected, we’ve put together some tips that will help you set goals and track them more in depth. 1. Setting up Goal Funnels Setting up an end goal is simple, but did you know you can set up all of the steps the user would take before that final click of a button? Under the Goals section in your Admin setting, each goal breaks down into three steps:
For the first two steps, Google Analytics (GA) makes things easy for you and provides you with different templates based on the type of goal: Revenue, Acquisition, Inquiry, or Engagement. Step three is where the magic happens. While GA requires that you input a destination (the end of the URL where your users are supposed to be ending up), it also gives you an option to set up a Funnel. By turning this on, you can now input all of the steps a user would take to get to that final destination URL. So, for example, if you were setting up a goal where the user is reaching a URL ending in /checkout/thank_you (resulting in more cash money for my business!) You could then connect all of the steps the user would take to get to that purchase confirmation page. Each step need two types of information to create the funnel. First you’ll need to provide a name for the page and then the URL ending for that page. So take the following image for example:  It’s important that you input only the last backslash and the word or letters that follow it or GA won’t properly recognize the page. Once that’s set up, you can see a funnel visualization by going to Conversions > Goals > Funnel Visualizations within your dashboard panel. There you can see a vertical graph showing the number of users that leave the funnel, and where exactly they’re dropping off.  2. Tracking Clicks While you can find other sites that offer this for various price points, Google offers their very own free service via a Chrome extension. Simply install from the Chrome Web Store, link up to your GA account, and you’re good to go.  Once you’re on your site and have the plugin activated, you can see a glimpse of some relevant GA values. The real hero of this extension are the tooltips that show click-interactions throughout your site.  You can see what content is drawing the most user-interactions, and scope out underperformers. 3. Adding Milestones Annotating your reports is a great way to add some context to user behavior and traffic. They can be added right from within your admin settings, under the Personal Tools & Assets section.  Or, if you’re within an individual graph, you can click the annotations toggle link and add from there.  To explain jumps and drop-offs in traffic or conversions, you can include notes and specific dates as to holiday events, feature launches, campaign runs, or when edits to your site were made. If you’re working and building your site iteratively it can be nice to have a timeline built right into your analytics graphs. 4. Adding Secondary Dimensions to Your Reports Dimensions are another great way to add context to your analytics. Within any report, right above the data table, there will be a dropdown for a secondary dimension.  From there you’ll see a drop with a variety of sections.  Once you select an item, a new column gets added to your data table. For example, rather than simply viewing all pageviews for your site, you can view data as to what site referred users, what their screen resolution is, how many sessions they had prior to transactions, among many other variables. 5. Learn What Devices Visitors are Using One last hidden gem in GA is the ability to track what percentage of your users are on desktop, tablet, or mobile. Within the Reports sidebar, you can find this information inside the Audience menu under the Mobile > Overview dropdown. Here you can see the total number of users on each device as well as things like their bounce rates and total revenue per device type. Knowing this can be incredibly helpful with dividing up your design and development resources. If you know that the bulk of your users are on desktop, but only a very tiny percentage are on tablet, you can work harder on optimizing desktop instead of shifting more resources into a version of your site that only 5% of your traffic will ever see. Google Analytics is a powerful tool that has super insightful data, giving you x-ray vision into how your website or app is performing. With the tips we’ve outlined here, you can put your reports and traffic in context, helping you take your website to the next level. |
AuthorGeorge Molina Archives
January 2020
Categories
All
|
RSS Feed
Perpetual |
|
|
© 2019
|
