Gaming
Entertainment
Music
Sports
Business
Technology
News
Design
Fitness
Science
Histoy
Travel
Animals
DIY
Fun
Style
Photography
Lifestyle
Food
2018-01-23T17:48:15.691Z
0
{"feed":"Viget-Articles","feedTitle":"Viget Articles","feedLink":"/feed/Viget-Articles","catTitle":"Design","catLink":"/cat/design"}
In our last article, we explored reasons you might need a Design System and how they can help. If you’re interested in the promises a Design System can offer, you might be wondering if you need help and where to start. This article is written with that in mind. Why hire an agency? Why not DIY? It’s true that many large companies are beginning to address the need for Design Systems from within their organization. So, why work with an agency when you can start working on this yourself? Here are a few important reasons: Scale We can scale according to your needs—either by doing everything for you or by supplementing your in-house team. An agency has, by design, a diversity of roles—everything from UX, design, copywriting, and development. We have specialists who can consult on your work who you wouldn’t otherwise hire. Maybe you have developers but zero to few designers. Maybe your designers are already at capacity on internal projects or focused on other matters. Timing Hiring and ramping up a solid team is a lengthy process. An agency has a team that can begin immediately. We regularly adjust our long-term planning to account for schedule fluidity and can usually assemble a team quickly for pressing needs. If you need additional resources, it’s far more likely for us to have availability by someone winding down a project than for you to go through another long hiring cycle to find exceptional talent....
For those who don't know, we've been working on our own React framework here at Viget called Microcosm. Development on Microcosm started before Redux had hit the scene and while the two share a number of similarities, there are a few key differences we'll be highlighting in this post. I've taken the Todo app example from Redux's docs (complete app forked here), and implemented my own Todo app in Microcosm. We'll run through these codebases side by side comparing how the two frameworks help you with different developer tasks. Enough chatter, let's get to it! Entry point So you've yarnpm installed the dependency, now what? Javascript // Redux // index.js import React from 'react' import { render } from 'react-dom' import { Provider } from 'react-redux' import { createStore } from 'redux' import todoApp from './reducers/index' import App from './components/App' let store = createStore(todoApp) render( , document.getElementById('root') ) Javascript // Microcosm // repo.js import Microcosm from 'microcosm' import Todos from './domains/todos' import Filter from './domains/filter' export default class Repo extends Microcosm { setup () { this.addDomain('todos', Todos) this.addDomain('currentFilter', Filter) } } // index.js import {...
Requesting an external resource on a website or application incurs several round-trips before the browser can actually start to download the resource. These round-trips include the DNS lookup, TCP handshake, and TLS negotiation (if SSL is being used).
Depending on the page and the network conditions, these round-trips can add hundreds of milliseconds of latency, or more. If you are requesting resources from several different hosts, this can add up fast, and you could be looking at a page that feels more sluggish than it needs to be, especially on slower cellular connections, flaky wifi,...
Why do you need a Design System? In a previous article, we shared our thoughts on why Design Systems may be on the rise. Now, let’s further explore why you might need one. What are some of the common problems organizations face without a Design System, and how can one help? Common Problems Here are a few warning signs that might indicate you need to think about implementing a Design System: Process bottlenecks Through agile development methodologies, rapid release cycles have improved the ability for organizations to make timely and recurring updates. This means that individuals in organizations have had to do things more quickly than they used to. The benefits of speed often come at a cost. Usually, that cost is a compromise in quality. How will you ensure quality without introducing bottlenecks to your release cycles? Design inconsistencies Because your design needs have had to keep up with your development cycle, you’re left with a mess. Things as simple as having a dozen different versions of a button that could be simplified down to a few—component management. Maybe you have five different versions of a similar color or twelve different font styles when you could be using four—style management. Perhaps you’ve built a check-out flow that works differently in different places creating a nightmare for your customer support team—operational management. How will you establish and maintain consistency? Scaling challenges Perhaps you’ve focused on one platform when you first designed but are now scaling to multiple...
There are few things I fear more than rejection. In the past, my method for dealing with the dreaded “no” resembled my method for dealing with spiders: if I saw one coming, I ran. Why? Because rejection hurts. It makes us blush, fidget, and fantasize about sinking beneath the floor (where there are undoubtedly spiders). It makes us feel small and worthless. And avoiding it isn’t all that hard. You can not ask for things that might result in rejection. You can apologize profusely before asking for anything. You can make yourself feel small and worthless before anyone else has a chance. But, as I discovered during my copywriting apprenticeship at Viget, that approach can be problematic. After roughly a week, my advisor sent me a TED talk by Jia Jiang on overcoming the fear of rejection. She then told me that I would be devoting the following week to “rejection therapy.” The goal was not to run away from rejection, but to run towards it. I was to rack up as many rejections as I could, simply by asking for things. Once my fight-or-flight response had subsided, I decided to make a list. I scheduled my rejection attempts for lunch breaks and after work. It looked like this:   Request a tour of the Phillips Collection from the curator Ask for a free meal refill from a restaurant I likeGet a ballroom pro to waltz with me (preferably to the...
According to SoDA’s recent study, “acting on the data” was the most common data challenge — ahead of “getting the data I need,” “accuracy,” “timeliness,” and “interpreting the data that I have.” If an organization has necessary, accurate, timely, and understandable data, shouldn’t acting on it be the easiest step? And if an agency can’t act on its own data, can it credibly guide clients to do so? The “actionability” challenge seemingly occurs at the end of the data collection and analysis process, but the underlying issues often happen earlier. Three upfront factors, described below, must be in place before people can take action on data. 1. Prioritized goals that clarify assumptions Stakeholder feedback should focus on asking: will this approach best achieve our target outcomes, compared to other possible approaches? Instead, stakeholders’ differing assumptions about goals and priorities often cause conflicting feedback — each person may be solving for a different outcome.  Establishing upfront consensus on project goals — before they’re discussed in the context of a specific deliverable — will set up your team to receive more productive feedback in the future. Ahead of a project kickoff, we survey stakeholders about all known goals: from the RFP, sales discussions, or otherwise. Stakeholders force-rank the goals ahead of the kickoff. We prefer Surveygizmo because it provides results visualizations like this:
...
In our recent collaboration with the Ad Council and AARP, we created a chatbot experience to walk users through a set of questions and serve them personalized action items to prepare for retirement. The tricky thing about retirement is that few people are truly prepared for it. To address this issue, we created an animated character that felt alive, showed empathy, and helped users stay engaged with the conversation. It’s name? Avo! Below is a set of emotions we needed to animate and bring into our web experience. Enter Lottie-web. Lottie-web is an After Effects plugin that exports animation data and translates it into Javascript. Lottie-web is exceptional when animating complex vector-based animations, especially with all the parts of Avo’s face.
Unmoderated user testing is an important tool in any user researcher’s toolkit. At Viget, we often use Optimal Workshop’s unmoderated tree-testing tool, Treejack, to make sure that users can find what they’re looking for in a website’s navigation menu. In this article, I’ll be talking specifically about Treejack, but you can substitute in the unmoderated testing tool of your choice. There are two basic ways to use Treejack: to evaluate the labeling system of an existing site, or to evaluate a new, proposed labeling system. But the most powerful way to use Treejack is to do both at once. That way, we can not only identify problems with the existing information architecture, we can see if our proposed redesign actually solves those problems. The existing tree acts as a benchmark against which we can compare our new tree.
Job searching is daunting. Polishing your cover letter(s), perfecting your resume, and finding a professional photo for your LinkedIn is practically a full-time job in itself. Sure, college career centers and bootcamps have great resources and networks, but most job seekers are doing the majority of the legwork themselves. As a recent(ish) college grad who now sits on the other side of the job search, I want to debunk some of the myths that I had heard coming into my first job search. If you’re applying to a small or medium-sized agency like Viget, you can confidently disregard these myths and, hopefully, have a more successful job search. #1: Job Applications Go Straight Into the Ether Most applications go through an Applicant Tracking System (ATS) or into an HR specific-email. It’s easy to think that because you’re not submitting your resume directly to a person that your application just disappears into an abyss of other resumes. While a company might get a massive volume of candidates at once (we receive anywhere from 5 to 40 applicants a week here), they do go somewhere. I spend most of my day in our ATS, so I’m always in the know about our candidates pipeline, whether they’re first applying or updating me about their availability for in-person interviews. Even if an application doesn’t come directly into a recruiter’s inbox, you should feel confident that it does, in fact, get reviewed.  #2: Does Anyone Read These??? A tip...
This week, our first cohort of apprentices wrap up their 10 week-long Viget experience.  The apprentices are filling out feedback surveys, their advisors are preparing their final review lunches, and Erica is starting to connect with applicants for our next cohort.  Before we all move on to our next challenge, I want to take a step back and reflect on our program design and the exceptional folks who joined in our first official cross-disciplinary apprenticeship class. Our Program We designed the Viget apprenticeship program with three main areas for learning, each one reinforcing the other: Discipline-specific learning & trainingGlobal curriculumClient work
One of the most frequent dilemmas I experience as a Digital Project Manager (DPM) is whether something warrants having a meeting...and if it does, who do I invite? Nobody likes having too many meetings, especially if they aren't valuable, but we also don't want to have epic Slack or Basecamp threads on one topic that could have been easily resolved with a quick meeting. That balancing act is tricky, but it's important. When you find the right balance and schedule meetings for your team only when needed, you will likely see a couple of benefits. First, there will be a higher level of engagement within the meetings, and second, the team may experience a positive morale boost given they are able to better focus on their work. Here are four things I consider when deciding whether to schedule a meeting or not and four things I consider when determining who to invite. Should we have a meeting?
Who will this meeting be valuable for? And how valuable will it be? When it comes to ad hoc meetings, it can be tempting to schedule them to gain clarity for yourself or a single team member. Before gathering everyone for a "quick check-in," consider the true purpose of the meeting. As...
Slack is a core part of my day-to-day. It's the tool that I spend the most time in and it's how I handle all internal communication, including project, team, and company discussions, from 1:1 conversations to group chats. It's increasingly become a primary client communication tool, as well.  With so many purposes and so many participants, it can be challenging to not only stay on top of Slack discussions but balance meetings, communication in other tools (Basecamp, Github, email), and work itself. I've found these five features to be key in cutting through the noise and making Slack a valuable communication tool: /leave This one's going to earn me some 👋  reactions, I know, I know. I'm still going do it though, and here's why: It's important for me to be present in project channels and client teams when I'm playing an active role. When that time has passed, though, I've found that I can reduce Slack noise simply by leaving channels that I no longer need to be a part of. Sure, I could stay in every channel and try and follow along on what's happening on every project, but the time required to keep up isn't met by a large reward. I'm better served by clearing my Slack (and my brain) and allowing teams to loop me back in when necessary. /mute Not ready to commit to /leave or fear the public shaming that comes with that exit? Mute might be more your speed....
What is XR? Extended Reality (XR) refers to all real-and-virtual environments generated by computer graphics and wearables. The 'X' in XR is simply a variable that can stand for any letter. XR is the umbrella category that covers all the various forms of computer-altered reality, including: Augmented Reality (AR), Mixed Reality (MR), and Virtual Reality (VR). Virtual Reality For ease, let’s start with a topic many of us are already familiar with—Virtual Reality (VR). VR encompasses all virtually immersive experiences. These could be created using purely real-world content (360 Video), purely synthetic content (Computer Generated), or a hybrid of both. This medium requires the use of a Head-Mounted Device (HMD) like the Oculus Rift, HTC Vive, or Google Cardboard. VR has its own spectrum in and of itself. On one end you have WebVR, the simplest and most accessible form, and on the other you have Fully-Immersive VR, like Multi-sensory Cinema. Don't ask me how they incorporate taste, but apparently "Virtual Vineyards" are a thing now. Augmented Reality Augmented Reality (AR) is an overlay of computer generated content on the real world. The key note here is that the augmented content doesn't recognize the physical objects within a real-world environment. In other words, the CG content and the real-world content are not able to respond to...
Starting a new job is hard. You have to get to know new people, follow new processes, and learn new tools all within an unfamiliar environment. You have to learn what is expected of you, how expectations are communicated, and how to gauge your progress. On top of all the other stress, there is the challenge of navigating the dynamic of simply being new. I’ve noticed some people are more comfortable than others in this dynamic. I think it’s a skillset worth considering more closely. Being good at being new isn’t the same as being a great teammate, or being great at your specific discipline.  If you’re good at...
Imagine a world where your charitable donations always made a difference. A world where a charity could be run with minimal overhead. This charity would allow you to see what path your donation took, from the moment it was given, to the moment it was spent by the boots on the ground making a difference. A better charity is possible with blockchain technology, and ethereum. Using these technologies we can build a decentralized autonomous charity that can accept donations in any currency, hold onto its funds in a non-volatile form and deploy them globally while maintaining complete transparency of individual donations. There’s a set of problems a better charity needs to address, we’ll look at three of them. If I donated a Bitcoin about a month ago it would have been worth less than half of what is worth now, and if I donated it yesterday it would be worth $400 less today. This is The Volatility Problem. This isn’t exclusive to cryptocurrencies, it applies to fluctuating foreign currency markets and donations in the form of stocks. Next, The Triage Problem: we have a pool of money, we need to make decisions on how to use it. Some things will get the funding they need, but others won't, who makes that decision? Finally, the The Transparency Problem, how do you know your money didn’t mostly go to a giant painting of the charity’s namesake? The Volatility Problem If only we had a...
In the fight for the short attention span of our users, every performance gain, whether real or perceived, matters. This is especially true on mobile, where despite our best efforts at performance, a spotty signal can leave users waiting an interminable few seconds (or more) for content to load. Design’s conventional answer to unpredictable wait times has long been the loading spinner; a looping animation that tells the user to “Hold on. Something’s coming,” whether that something is one or ten seconds away. More recently, a design pattern known as progressive loading has gained popularity. With progressive loading, individual elements become visible on the page as soon as they’ve loaded, rather than displaying all at once. See the following example from Facebook:
In the Facebook example above, a skeleton of the page loads first. It’s essentially a wireframe of the page with placeholder boxes for text and images. 
This summer, we built an interactive art installation in the middle of a college campus — a journey designing, manufacturing, and installing Abilene Christian University’s Lightwalk. Now that it’s complete, and since the opportunity came by way of sharing knowledge, I thought I would do the same here and pause to reflect on our process and lessons learned along the way. Vision The vision for the Lightwalk installation at Abilene was nearly two years in the making when we first had a conversation with their team. In that time, a good amount of consideration had already been given to various aspects of the installation, including a concerted effort from Abilene to prototype their vision and actually bury it in the ground. We knew the installation would be located below-grade on the East side of a jagged concrete path and consist of many “reeds” or light poles that would illuminate. The twist to all our previous work was that it would also have to be hackable so students could continue to improve the installation over time. In all frankness, it would be a one-of-a-kind installation that couldn't easily borrow from stock components — it was custom art on a massive scale. Constraints We visited the site and kicked the project off on-site in Abilene, Texas. We settled on a rough vision, discussed high-level...
We just wrapped up development on Lightwalk, an interactive art installation living at Abilene Christian University in Abilene, Texas. For a number of reasons, this has been one of the most interesting projects I've ever worked on. There is the obvious wow factor of the installation itself, but we also developed a whole suite of dev tools running behind the scenes that not only keep the installation running, but also enable engagement from ACU students in multiple ways. It's this tie between hardware and software that makes the project truly shine, it's taking art and making it sm-art, it's the internet of things but it's actually interesting, and it's what I'm going to be talking about today. So what are "dev tools" anyway? Short for "developer tools", the system we built to power the Lightwalk installation provides a couple of critical services: Allow students to choose the effects and colors on the installation Allow students to create new effects Provide health metrics and historical data of devices in the field Let's take a look at each of these items more closely. The Power of Interaction The hardware packed into waterproof boxes buried under the ground offer motion detection as one layer of interaction. If motion is detected anywhere along the path, the entire installation knows about it. What it does with that information however, is up to the students. There is a list of effects that students can choose from, and options for...
Low volume manufacturing can be a logistical nightmare. You might think that vendors who could help you simply won’t because you don’t represent a significant quantity of work. You might also think that you’re doing something incredibly brainy and only YOU can tackle the challenge and ensure quality. To a degree both of these are valuable and tempering thoughts. But what these thoughts often mean is that you’ve started to think about sourcing towards the tail-end of a project. These thoughts actually represent a totalitarian go-it-alone-until-it’s-perfect-in-my-eyes approach which is consequently 100% ignorant of vendor capabilities and appetite. The reality, as i’ve seen it, is that strong vendor relationships underpin success. I look at manufacturing sprints as crucial to the design and engineering process, even, if for no other reason, it gets me or another engineer on a real phone with a real person talking about real tangible things. It helps get my head out of the clouds and it helps to build real relationships. At the end of the day shipping hardware requires many hands no matter how much is automated. The stronger those relationships are the more the manufactured solution will represent the most appropriate solution. Here are some practicals tips for finding the right vendor and working together:
After spending about a year experimenting and blogging about how HTTP/2 is going to improve performance and finding ways it can be applied to projects, we have added an HTTP/2 upgrade to Blendid so you can try for yourself. If you are unfamiliar with Blendid, Blendid is full-featured modern asset pipeline powered by Gulp that utilizes many helpful stand-alone tasks. At Viget, we use it for many front end builds for its ease of use and simple configurability. To use Blendid with the HTTP/2 upgrade, follow these steps: On a new project, run yarn init from your terminal in the project’s directory, which adds a package.json and yarn.lock file to your directoryThen run yarn add blendid to add the Blendid package to the projectAfter that, run yarn run blendid -- init to ensure the Blendid directories are in placeFinally add in yarn run blendid -- http2-upgrade and you are donezo The Blendid HTTP/2 upgrade takes advantage of multiplexing, which allows for multiple assets to be called at once without bogging down the network. HTTP/2 can take multiple requests and fetch them simultaneously. Previously, Blendid concatenated all of your stylesheets and JavaScripts into single files to be loaded on every page. Now, the HTTP/2 upgrade processes CSS and JavaScript as separate files so that you can load them individually and only on pages where they are needed. One large point before you get going is that this HTTP/2 upgrade will...