Tag: Front-end

Just like many other large, established companies, AT&T finds itself in an interesting situation of needing to deal with a world of dramatically increasing scale and complexity. For decades, experienced company veterans have been able to address these challenges manually with the knowledge, skills, and intuition they have built over a career in their roles.

However, we are now reaching a scale where this is no longer feasible, and we are facing a host of problems that cannot be manually addressed. By building intelligent systems, we bring radical efficiency changes to how AT&T operates. These are orders of magnitude improvements, where something that may have taken months manually, may now take only an hour.

Along with my user experience research and design skills, my team built one such intelligent system to manage this complexity for network capacity engineers as they decommission legacy machines on the network. Our tool was extremely well received by our colleagues in the field and is currently being used in decommissioning to save unnecessary hours of labor and costs.

AT&T’s legacy telephone wire system is made of automated, interconnected switches on a nationwide scale and has been around for decades. Maintaining this vast network requires a significant amount of money spent towards power. Naturally, AT&T is interested in finding equipment that can be decommissioned or replaced with newer, more efficient equipment in an effort to reduce this large footprint, all with an active, live network that must remain fully reliable through this process.

Currently, decommissioning a machine requires weeks or months of tedious, manual planning by highly experienced and trained engineers, each with their own personalized workflow.

We created an assistive tool for network capacity engineers to reduce this time to hours by recommending better alternatives to free them for their other responsibilities. Our tool helps discover and recommend plans for removing equipment from the network.

Our project focused on two primary objectives:

1. Evaluating network equipment to establish a priority order for decommissioning.
2. Creating and recommending a valid circuit reassignment plan for operators to take into consideration.

While my colleagues were developing the machine learning aspects to this project, I conducted user interviews to better understand the needs of a network capacity engineer to inform our product decisions.

As themes in their workflows arose, I developed quick mockups to encapsulate the needs I was hearing.

I continued to iterate on them as our understanding of the user needs evolved.

As we were on a short timeline, my colleague quickly began implementing a working web-interface prototype as per my designs to connect the command line into a more user-friendly experience. Within a few days, we had a fully functioning version of the tool that we could share with our users.

Through usability testing with network capacity engineers, we identified tens of changes to our working prototype and continued to iterate.

Today, this internal tool is used by network capacity engineers across the company and is radically changing the way AT&T works. This product was so successful in creating an efficiency disruption within the company that more work of this nature is being requested by internal teams. I found this highly impactful project extremely gratifying. With just a few months of applied work, we were able to disrupt an internal process to save costs and significantly change how the company and employees operate day to day.

Summer of 2015, I joined Esper, a small startup working on improving time management and productivity, as a consulting Product and Design Strategist. In collaboration with the founders, I guided the company through several key strategic pivots, including shifting us from providing services to focusing on building great products. I also led the team’s Product Design by conducting user research interviews and creating interaction flows, wireframes, and mockups. The journey of working in a small, roughly six person startup environment, where my voice has a significant impact on our direction, has been extremely fun and fulfilling.

Over the course of my two years working with Esper, I have been fortunate to influence several iterations of company direction. When I joined, the team had built a productivity product for Executive Assistants. To better improve their product, they dogfooded it on themselves by creating essentially an Uber for Executive Assistants, where Executives would be matched with Esper Executive Assistants 24/7, and the EAs hired by Esper would then use the Esper product to perform quality and efficient work.

Soon after I joined, I realized that we had learned what we needed from our service. As a team, we decided to close the service and shift our focus back to building an amazing product for EAs and Executives. We also discovered some unique insights into how the best of the best EAs worked. For instance, these EAs not only handled tactical scheduling for their Executives, they also strategically managed their Executive’s time.

I took findings like these and proposed several strategic directions beyond our scheduling and calendaring assistant product. One of these, in particular, stuck with the team, and we dove into building our next product, Esper Charts. With Charts, anyone can strategically manage their time by quickly analyzing how they are currently using it. We essentially built a Mint for time. Our users were more than just individuals interested in upping their productivity, but also entire groups that wanted to manage their time as a team.

As we focused more energy on Charts, we decided we needed some more tactical products that our users could use daily. Hence, we opened up our suite of products beyond longer-term time management and created short-term hooks with Esper Ratings and Esper Agenda Check.

Esper Ratings on Slack

Esper Agenda Check on Slack

Check out a TechCrunch blog post on Esper.

In the Fall of 2011, I had the opportunity to re-design and develop a new website for an Indian medical electronics startup. Along with a friend of mine, we conducted initial user and market research, designed the user experience and interface, created all graphic and visual design assets, and developed the website using HTML, CSS, and JQuery for a remote client half-way across the world in India. We both had full-time positions as Mechanical Engineers at the time and used our evenings and weekends to work on this project.

Every minute, two people in the world die from Anemia–a completely curable disease! One may think that perhaps the cure is not well distributed, but that is not the case. In fact, the weak link in the chain boils down to lack of accurate diagnosis. With a false positive diagnosis and treatment, dangerous complications occur. With a false negative diagnosis, no life-saving treatment is offered.

Biosense’s TouchHb product addresses this key moment in the chain by providing a reliable, portable, non-invasive diagnostic to healthcare workers. TouchHb targets mobile healthcare workers in rural India with its low cost and minimal profile.

Our client asked us to re-design the existing Biosense website so that it was easier to use and more engaging.

After determining that the website’s target audience would be the health care workers in the field and potential investors as opposed to the rural patients, my partner and I began with researching how to best design a site that could convince our target audience that TouchHb was a valuable product in which to invest.

We studied the history of anemia, key statistics, and existing solutions. We learned that though information was plentiful, it was not common knowledge and scattered.

We interviewed potential website viewers. With investors, we found that our biggest obstacle with was demonstrating the importance and need of TouchHb for people of the emerging world. Investors often did not realize the extent of the problem and how a solution was right at their fingertips. As we interviewed healthcare workers, we learned that many were entrenched in the mindset that reliable anemia diagnostics were only available at larger hospitals and had to invasively draw blood. We needed to make it clear that that was not the only option available to them. A portable and non-invasive solution could now be purchased by individuals at a fraction of the cost.

We researched how to best share our knowledge and achieve these goals, and came to the conclusion that our website needed to tell a story. From there, we began designing and prototyping what an immersive storytelling experience might be.

As we dove into the storytelling and user experience, we worked to simplify our story down to absolute essentials. A full-page, immersive slideshow analogy began to form as our chosen tool of expression. We strove to make our design friendly, engaging, informative, and a clear call to action. We wireframed various iterations out on the whiteboard as we cycled through this process.

Since my partner and I were both the designers and engineers on this website, we were careful to design a website that achieved all our goals independently from engineering challenges. After we were confident in the framework of our design, we determined what the best way to code our solution. Naturally, we faced some key engineering tradeoffs. For instance, we wanted to use a CMS, but realized that our schedule and resources would not allow us to complete the design we wanted with a CMS.

When we handed off the completed website design to our client, we provided them with all the final code, visual assets, and a
guide to the code.

On the visual design side, we followed a similar process of iterative design with colors, graphics, photography, and individual page layout. Throughout the process, we checked in with our client to make sure that they were satisfied with our progress and we tested our designs through interviews, usability tests, surveys, and A/B testing.

We settled on using a theme of warm colors that had earthly tones along with a red to subtly reference the blood associated with anemia.

Let’s dive into our process for the front landing page. Our process for all the other pages was extremely similar.

For the front page, we created initial wireframes of full-screen slideshows as well as framed sliders. We explored where we wanted information to be presented, and how we wanted to indicate how a user was to interact with and move through our story.

As we regularly checked in with our client, we created prototypes to share our progress. We started with simple static prototypes and gradually progressed into functional prototypes.

Once we were confident with the framework of our website, we began prototyping our visual assets. We had several photoshoots where we played with colors, framing, and composition. In our first photoshoot, we rented a nice lens and photographed ourselves in preparation for when we hired a model and on the off chance we did not need one. After looking through our shots, we needed a model.

In our second photoshoot, we hired a model and coached her through the session. We played around with various backgrounds, attire, facial expressions, positioning, subjects, lighting, and composition. At the end of our session, we had a massive library to chose from for our story.

After choosing our top images, we created rough static mockups of key pages side by side for feedback. We used side by side comparisons to determine our final combination of photographs.

If you would like to learn more about Biosense’s ToucHb, watch their TEDx talk: A 20 second blood test without bleeding from 2013.

Design and build a full-functioning boat and controller that can cooperatively strive to harvest a crop of virtual crab during a series of crabbing “seasons” within three weeks for less than $150.

Our team of three created our pirate ship in the Spring of 2010. Our pirate ship was a sleek fiberglass boat that was quickly maneuverable through dangerous waters.

For more details on our pirate ship, check out our project website.

We integrated a variety of disciplines to create our pirate ship, including design, electronics, mechanical, and firmware skills.

Stanford Smart Product Design Lab

Design and build a fully-functioning robot that can knock off targets as specified by a radio-controlled Target Commander device within three weeks for less than $150.

Our team of four created Alice in the Winter of 2010. Alice is a fully autonomous, wall following, PID controlled robot that can knock off targets as specified by a radio-controlled Target Commander device.

For more details on Alice, check out our project website.

We integrated a variety of disciplines to create our Queen-defeating Alice, including design, electronics, mechanical, and firmware skills.

Stanford Smart Product Design Lab

In eighteen days and with an impossible budget of $150 USD, create a full-functioning, robust, interactive, electro-mechanical portrayal of a scene or image from pop-culture.

With a team of three in November 2009, I created a micro-controlled arcade game based off of the film The Italian Job, complete with driving around a red Mini Cooper and cracking a safe!

For more details on Project Mini, check out our project website.

Using our design, electronics, CAD, mechanical, and firmware skills, we created a fully functioning, fun, and immersive game for children and adults.

Stanford Smart Product Design Lab

In the Summer of 2009, I moved to Beijing, China to work for Microsoft Research Asia (MSRA) as a User Experience Design Researcher. I worked on a team of two Psychologists and two User Experience Designers/Researchers.

My time at MSRA was divided into two primary projects: Cross-Cultural Design Research and designing an Enterprise Social Networking Platform.

With our design research, we strove to understand how to design better digital experiences for a Chinese audience. Using qualitative and quantitative research methodologies and usability studies, we honed in on elements that resonated with our target audience. Specifically, we conducted market research and competitive analysis, surveys, interviews, A/B testing, card sorting, walkthroughs, task analysis, facilitated brainstorming, and participatory design.

We conducted much of our research with our Enterprise Social Networking Platform, the Twinkle Project, which in turn informed our design choices and directed our next iterations.

Social networks are a fantastic way to generate and share knowledge among large groups of people. Social software has the potential to build and maintain strong communication and collaboration channels. Yet, why do enterprise social software solutions still leave something to be desired?

There is a huge opportunity to apply social software within the Enterprise. The Twinkle Project explores exactly that. Could we redesign and reinvigorate Social Enterprise Software? How can we enable users to connect, collaborate, share content, knowledge, and expertise, manage information, and increase productivity across an enterprise?

As a designer for Twinkle, I was responsible for design research and strategy and UX and UI design.

A blurb about our work on Twinkle was featured in the 10 Year Anniversary MSRA Book (pg. 28).