danajwright

[danajwright]

Whether aware of it or not, designers bring values and belief systems into the design practice based on their position in the world, and this influences the design in a particular way. Arguing that designers influence their design is not a controversial argument to make, but when design deliberately engages with power, social change, and the political condition, it seems increasingly important that designers critically reflect on their agency and position.

[danajwright]

How to make a white (255, 255, 255) background and preserve natural shadows in Photoshop

This is a quick screencast I created on how to treat images for the TierraCast product catalog. It took a lot of trial and error to arrive at this series of steps which achieves the all white background as well as natural shadows from the photoshoot. There were 390 product images total, so once I figured out the process I used this demo to direct the team at Clipping Path India to complete the batch.

[danajwright]

V1 Prototype for adopting a Tamagochi pet in Facebook Messenger

I helped my friend hack together this prototype of a simple game on Facebook Messenger. I used Sketch and Framer.js for the animation and dynamic data updating. The idea: Friends can adopt a pet together, giving them a reason to interact that is collaborative and persistent. In a messenger conversation, you can start a game by tapping the cat icon. We only spent two days on this, so all you can do is feed the cat or make him chase a laser pointer. Additional activities could be a hamster wheel for exercising, chasing a string, clawing a cat tree, etc.

[danajwright]

Hackathons for the non-technical hacker: A quick primer

I have participated in a TON of hackathons, especially since working at Facebook where they are held regularly and are a huge part of the culture. My roles have included coding, design, project management and every combination of the three. Based on my own observations and experience, here are a few ways that you (the non-technical but highly motivated entrepreneur) can participate in a hackathon:

1) Solve a problem

Your first challenge/ opportunity to participate as a non-coder is pitching your idea to engineers. Find a problem that you are passionate about solving or have expertise in and share your ideas with others in the hackathon's group or event. Engage with anyone and everyone who takes an interest in your idea, and try to demonstrate your "product intuition" along with management skills. I've found that having a visual design as well as a detailed description makes your odds of getting the right people on your team about 1000x more likely. Also, responding quickly and thoughtfully to questions shows potential teammates you are serious and committed to the project. Here are some product pitches I made where I was successful in recruiting Facebook engineers to help me:

Spontaneous discovery of nearby devices using Facebook

Food recommendations in Facebook newsfeed


Facebook travel mode

The Facebook travel mode idea did not have a visual, but it addressed a hot-button issue that was getting a lot of attention in the news. There is definitely a “sexiness” factor that can help a lot in recruitment, as well as winning prizes in the end if you can actually pull it off.

2) Project manage a hack

Every team needs someone to help them get organized. The project manager's role is to make sure that the team understands the “people problem” they're tackling, is aligned around the solution they're building, and has clarity around what each team member is working on. Determining what skills your team will need and recruiting the right people is a major skill in and of itself. I once was late to a hackathon and didn't have time to recruit people, so I ended up rolling my app solo. I don’t recommend doing that. With a clear idea and decent presentation, you should have no problem recruiting people. You would be suprised how many very talented coders show up to a hackathon with no ideas of their own looking to join a team. Once you have a team (even if it’s just one other committed person), draft a shared doc that clearly defines the project and the problem it will solve. If you have seen features in other websites/ apps that are relevant to your app, start linking to those in the doc so you can point to specific examples of the functionality you have in mind. The doc serves as a roadmap the team can use when thinking through features. Everyone should be in agreement on the “non-negotiable” core feature set, as well as the “nice-to-haves” which you may be willing to sacrifice in your prototype. The roadmap can and will change throughout the hack, but your role is to make the team as efficient as possible and make sure everyone is aligned on changes. You create the lines of communication for your team, whether that’s a slack channel or Facebook group/ chat. It's becoming much more common at hackathons for teams to work partially or entirely remote. A typical pattern is to have a flury of communication leading up to the hack, an in-person kickoff/ planning meeting where everyone gets their environment up and running, and then the team disperses to do the actual work. As the MVP nears completion, you start thinking through next steps and take the lead on drafting the presentation to share your project. You will work closely with the team on this. There are usually a ton of bugs in the MVP that need to be carefully navigated to pull off a successful presentation. This too is an artform in and of itself.

3) Learn a new skill

While the team is working away, you have an opportunity to work on a new skill you wouldn't normally develop during your day-to-day. You could improve your SQL skills, learn how to code in Python or learn how to design with Sketch. A great way to engage is to set up your environment the same as your engineers, download any necessary software/ libraries and make sure everything works as expected. Get on the github repo as a contributor, sync up with the team whenever there’s a significant progress, and watch your thing come to life!

In conclusion

There is plenty of serious work for someone with no programming chops at all to do at a hackathon. In fact, the softer skills of managing and keeping the team focused are incredibly valuable, and can make the difference between success and failure of a project.

[danajwright]

Making ad product demo videos for the Facebook Business website

I created twelve ad product videos for the Facebook Business website which live on the homepage and different ad format pages. I created this video tutorial to show other members of the team exactly how I did it. The process uses Facebook's internal ad search tool, Photoshop, After Affects and Media Encoder:

[danajwright]

Working across functions to build pages on the Facebook Business website

My role at Facebook was to create new pages on the Facebook Business website, taking them from rough sketch to high fidelity design with technical specs for the engineering team, and to get/ maintain buy-in from stakeholders across the organization along the way.
 I worked on an agile team of two designers, two copy writers, a content strategist and an offsite engineering team. Each page went through roughly five phases, although there was often overlap and the designs were constantly being updated. Sometimes engineering would get started using my first draft comps while copy and content were still being ironed out. The challenge was to always keep things moving no matter what. 
1) Rough sketch 
 Sketching out the basic outline of the page and ideas for content types is where I had license to explore creative direction for the page, Most of it would not be used, but I like to get a visual representation in desktop and mobile for every idea I can come up, keeping in mind the existing style guide and shape system.


2) Deploy real content
 Once I received content from stakeholders, I started placing it in the design and getting a better sense of what’s realistic for the page. Stakeholders are the teams within Facebook Global Business Marketing being represented by these pages, and who will ultimately be responsible for maintaining the content. I worked closely with the copy team to flesh out content and design. I refered to the module library to see if there were viable solutions already built by the engineering team. If so, I put those on the page first. Example: For the events index page, there was content for several past events and two upcoming, with high resolution photos and high quality video. Because events accumulate over time, I decided there should be just one post format flexible enough to accommodate a range of conditions: Such as if an event is past or upcoming, if it has a microsite with subpages, if it has a simple signup page, or if it has a video recap, etc.

3) Internal review and module selection
 In this phase, the team reviews the page and identifies what content could be presented with existing modules, where new ones should be developed and how this will effect timeline.

The Facebook Business site uses modules and a custom CMS, so designers keep that in mind from the earliest sketches. As pages were built, we added new modules to the module library which could then be deployed on any page across the site.
 We organized the library as Sketch symbos, so they could be kept up to date in one central place.

4) Final stakeholder review
 They were usually involved at every stage, watching the pages progress and providing feedback on tasks. This was their last opportunity for input before the the page is locked in and sent to build.


5)
 Technical specs Finally, once we had thumbs up from stakeholders, engineering, design director and copy team, I produce the final design with technical specs. This includes redline instructions describing all states, interactions and responsive behavior in detail. I use the SpecKit plugin for Sketch to handle basic red lining quickly.

Once engineering work is done, we have design review where more issues often come to light once seen in browser. Facebook's QA team tests the pages on a variety of browsers and devices. Facebook employees can report bugs directly from the page, and there are always updates coming from stakeholders. So the fun never truely ends!

[danajwright]

Rough Admin Flow for Flatmates App

Just a quick flow I did for an app my roommates and I came up with called Flatmates. The app is going nowhere fast, I mostly did this to practice a new library in framer.js called Flow Component, which provides state control in the Framer project.

[danajwright]

Retracting/ revealing nav for Facebook Business website

The goal for this: Scrolling down moves the navigation out of the viewport naturally. But when you scroll up a little bit, the navigation is unveiled without the need to scroll to the very top of the page where you left it before. Couple optimizations I've made: Added an offset defining how many pixels a user needs to scroll up until the navigation is unveiled. This prevents distraction from content when user scrolls up just a bit. Once scrolled to the very bottom, the navigation is unveiled, giving users new opportunities for where to go when finished reading the content.

[danajwright]

A sampling of icons I designed in Illustrator and contributed to the FBB icon library

[danajwright]

Filters subnav breakdown for Success Stories index page

When one clicks Success Stories in the primary navigation, they land on the index page:

Here are the interaction states on the subnav:

When filters are applied:

When filters are applied and there are no results:

[danajwright]

A sampling of finished pages I designed for the Facebook Business website

Homepage [facebook.com/business] Industries index page [facebook.com/business/industries] Industries Technology page [facebook.com/business/industries] Instagram business page [facebook.com/business/products/instagram] Success Story page for the Las Vegas Convention and Visitors Authority [facebook.com/business/products/instagram]

[danajwright]

Working across functions to build pages on the Facebook Business website



My role at Facebook was to create new pages on the Facebook Business website, taking them from rough sketch to high fidelity design with technical specs for the engineering team, and to get/ maintain buy-in from stakeholders across the organization along the way.
 I worked on an agile team of two designers, two copy writers, a content strategist and an onsite engineering team. Each page went through roughly five phases, although there was often overlap and the designs were constantly being updated. Sometimes engineering would get started using my first draft comps while copy and content were still being ironed out. The challenge was to always keep things moving no matter what. 
1) Rough sketch 
 Sketching out the basic outline of the page and ideas for content types is where I had license to explore creative direction for the page, Most of it would not be used, but I like to get a visual representation in desktop and mobile for every idea I can come up with, keeping in mind the existing style guide and shape system. 
2) Deploy real content
 Once I received content from stakeholders, I started placing it in the design and getting a better sense of what’s realistic for the page. Stakeholders are the teams within Facebook Global Business Marketing being represented by these pages, and who will ultimately be responsible for maintaining the content. I worked closely with the copy team to flesh out content and design. I refered to the module library to see if there were viable solutions already built by the engineering team. If so, I put those on the page first. Example: For the events index page, there was content for several past events and two upcoming, with high resolution photos and high quality video. Because events accumulate over time, I decided there should be just one post format flexible enough to accommodate a range of conditions: Such as if an event is past or upcoming, if it has a microsite with subpages, if it has a simple signup page, or if it has a video recap, etc. 3) Internal review and module selection
 In this phase, the team reviews the page and identifies what content could be presented with existing modules, where new ones should be developed and how this will effect timeline. The Facebook Business site uses modules and a custom CMS, so designers keep that in mind from the earliest sketches. As pages were built, we added new modules to the module library which could then be deployed on any page across the site.
 We organized the library as Sketch symbos, so they could be kept up to date in one central place. 4) Final stakeholder review
 They were usually involved at every stage, watching the pages progress and providing feedback on tasks. This was their last opportunity for input before the the page is locked in and sent to build. 
5)
 Technical specs Finally, once we had thumbs up from stakeholders, engineering, design director and copy team, I produce the final design with technical specs. This includes redline instructions describing all states, interactions and responsive behavior in detail. I use the SpecKit plugin for Sketch to handle basic red lining quickly. Once engineering work is done, we have a design review where more issues can come to light when seen in browser. But we usually go live shortly after. Facebook's QA team tests the pages on a variety of browsers and devices. Facebook employees can report bugs directly from the page, and there are always updates coming from stakeholders. So the fun never truely ends!

[danajwright]

Facebook should have a “travel mode”



I would love to see Facebook and other social media sites develop a travel mode feature that reduces contact list and history to a minimal subset of what the site normally offers. This would protect people forced to give their passwords at the border, an increasingly important concern in this darkening political climate. And it would mitigate the many additional threats to privacy we face when using social media accounts away from home.

To work effectively, a travel mode feature would need to be easy to turn on and configurable so the user may choose how long the protection is on for. It must be irrevocable for that amount of time. There’s no sense in having a ‘trip mode’ if the person demanding the password can simply switch it off, or coerce the user into switching it off.

Importantly, the feature needs to be undetectable. If it were, a customs agent inspecting the phone could just detain the user until their social media account is restored to full features.

Our phones and devices should be protected against unwarranted search and seizure, but that’s not the world we live in. A travel mode done well would demonstrate a commitment to user safety in the face of clear and present threats to civil liberties.


[danajwright]

Typography guide for Facebook Business

Typography articulates the Facebook Business message, expressing both what we say and how we say it. We couple Freight Sans LF Pro with the web-friendly Helvetica to achieve continuity between consumer and business brands. Using a range of sizes and weights allows for a clear hierarchy, making pages easy to scan and digest.

[danajwright]

My design process for ZuumApp, an iOS application that connects shippers with independent freight drivers

[zuumapp.com]

During an 18-week sprint, I worked closely with the Founder and CEO of Zuum to learn the complicated business of US shipping and logistics, conduct first hand field research, create high-fidelity wireframes, and collaborate with the offshore development team on building a working prototype. Full emersion I spent the first two weeks of the project working the phones as a Freight Broker, coordinating load deliveries with shippers, drivers and other brokers. From this perspective, I learned that shippers sell their freight to brokers, who then turn around and sell the freight for a much lower price to drivers. The broker raises the prices for the shipper and also takes a portion of the driver’s commission. The broker tracks the freight, controls the billing invoices, and distributes the money when drivers deliver freight. With this understanding, I was able help the team map out touch points and storyboard the pieces of the process that could be automated. The solution we landed on was a mobile app (for drivers) and web app (for shippers) that would provide real-time transit ETAs, online freight tracking, digital proof of delivery and detailed invoicing. Essentially, it would replace the costly intermediary between drivers and shippers (freight brokers).

Competition With my vision for how an automated freight app should work more-or-less locked in, I researched and downloaded the main competitor solutions that were available. The problem I discovered with our competitors was that none of them provided an end-to-end solution. They each addressed certain pain points in the process, but none offered an all-in-one product for shippers and drivers. Furthermore, Cargomatic, Convoy and Echo were completely reliant on the freight broker, which is widely known to be the root cause of perversion in the market.

Design With a better sense of the landscape, we decided that building the end-to-end solution would make Zuum the clear winner. Zuum was already a full service brokerage with a fleet of 60 trucks operating in 48 states. Once the wireframes were complete for the mobile app (130 views), we deployed it in the field with a handful of our drivers as if it was the completed app. This helped us establish the “red routes,” or most frequent/ critical activities that users would perform on the app, and also exposed a ton of edge cases we hadn’t accounted for.

Finalizing the design I spent hours on the phone with Zuum drivers and dispatchers validating my expectations for how this would function and fleshing out details at each touchpoint. I also received a ton of interesting user feedback. Everything from how drivers expected the app to function, when they wanted to receive/ not receive notifications, and at which points they would rather interact with a human and simply check off that the step had been completed outside the app. After filling in the gaps from our field test, the wireframe doubled in size to 260 views. The pickup touchpoint alone included 17 views and 36 state changes.

Development Our CTO retained an offshore team of developers to build our prototype, which was located in Hanoi, Viet Nam. He and I worked closely on tasking the initial build. We used Basecamp for task management and had complete visibility as features rolled out. I am still assisting with interaction design and new features as needed. Zuum received a Series A funding round in March, 2017 and is set to launch in the app store in June, 2017.

[danajwright]

The new HelloMD look and feel

Homepage:

User profile:

Medical landing page:

Medical funnel:

[danajwright]

Building the HelloMD component library

I took inventory of every UI component accross the site and created a stndard set of components that would work for all purposes.

All the elements were grouped so they could be evaluated and standardized.

For example, buttons:

Standardized button components: