Hi, I'm Tyler

I Believe Great Design Is Guided by Empathy

Portfolio

VoxDirect: New Product Launch

UX/UI Design & Research

VoxDirect was born from the realization that it’s hard for small businesses to form relationships with their customers via text message. We sought to change that by creating the first all-in-one product that combines a fully featured business phone system with advanced texting tools for small businesses. What resulted was a dramatic rise in ARPA compared to our original cloud-based phone system product, and a solid foundation for further growth.

Click below to continue reading how I took this project from idea to execution as a solo designer!

Continue Reading

CloudPhone: Calling Options

UX/UI Design & Research

CloudPhone is a Voice Over IP (VOIP) provider that allows people to place and receive calls with a second phone number for their business. VOIP calling works great and has many advantages to normal calling, but only when you have a good wifi/data connection. Our customers were reporting call quality issues related to having a poor connection. The task here was to enable users to place calls using their regular calling app (which uses a cellular connection), but while using their business phone number instead of their personal number.

As you can imagine this was a challenge to educate users and make the process simple and easy to use. Click below to see how I went about solving this complex problem.

Continue Reading

CloudPhone: Activation

UX/UI Design & Research

CloudPhone is a service that works like Google Voice but with more features and is targeted to micro-businesses. In just a few minutes you can sign up and get a business phone number that when called, can ring any of your employee’s cell phones or desk phones. You can also setup a recorded greeting that will present callers with options like, “For sales press 1, for support press 2.”

When I first started on this team, the on-boarding process for new customers was severely lacking. We noticed many customers signed up and never got started using the product. In order to get to the bottom of this I enlisted…

Continue Reading

CloudPhone: Growth Hacking

Web Design and Experimentation

In May of 2017 I attended the Growth Hackers conference with several colleagues. Soon after, we established a cross-departmental team called the “Growth Team”, dedicated to running experiments with the mission to improve our product and marketing efforts. The insights and adjustments we made through these efforts were very impactful. In a year and a half we were able to double our prices while increasing conversion 300% and nearly halving our churn.

The Growth Team consisted of a designer (me), marketing specialist, developer, analyst, and lead. Each week we would meet...

Continue Reading

Shield Compliance Banking Portal

UX/UI Design

This application was built to enable banking for businesses in the cannabis industry. It ensures banks that their clients are in compliance with state law and allows banks and businesses to interact within the portal to resolve compliance issues, keep tabs on in depth financial information, and to manage legal documents.

I was brought in at the very beginning of this project to guide decisions on usability and workflow and design the look and feel of the user interface...

Continue Reading

Emu Study

Concept Development & Branding

Emu Study is a concept mobile app that provides students a way to study on-the-go. Once users input their course material, they can press play and use voice commands to engage in a flashcards style learning experience. This way the user’s hands, arms, and eyes are free go on a run or wash the dishes while they study. I was inspired by user experiences that actually relieve you from interacting with a screen. I wanted to rethink how apps could be incredibly useful but demand less of our attention. There is a lot of opportunity in rethinking our reliance on visual interfaces to solve problems. I created a visual identity for the project that is playful and bright so that users can feel more light hearted in their studies.

TRXN - Grip Designer

UX/UI Design

The Grip Designer is an e-commerce concept project that allows customers to put together a custom package of self-adhesive foam cutouts for their surfboard. These foam stickers provide traction while surfing and are an alternative to surf wax. I created a prototype that allows customers to set the dimensions of their board, and create a layout of how they want their board to look using TRXN's available foam stickers. Once the user is done designing, they can calculate the total cost of the stickers they've used, and click "add to cart" when they're satisfied.

THOTSWOP

UI Design & Animation

This is a concept project that I created to explore how illustration and animation can bring liveliness to tasks that might be annoying. Requiring people to identify themselves before engaging with a product is a user experience that is often neglected. Logging in often leads to frustration when users get their password or username wrong. I created this interaction to try to make the process surprising and enjoyable. Users are rewarded as they fill out the fields by completing the animation. Log in and sign up screens are often a user's first impression of a product, so it is a unique area to show some personality and set things on the right foot.

Skills

Sketch App, Illustrator, Photoshop, InDesign, InVision, Principle, Flinto, Hubspot, Mixpanel, HotJar, AppCues, Jira, Confluence, WordPress, HTML, CSS, Javascript

About

Born this Way

I’m a dreamer, thinker, experimenter, and doer

I find inspiration everywhere and have a life practice of putting myself in novel situations in order to liven my senses. I find dedication in my work and find extreme joy and fulfillment in working towards goals. I’m at at my best when I have a high degree of ownership and responsibility for a positive outcome. I’m a team player and natural collaborator but can easily dive deep into solo projects, sometimes forgetting to blink.

Design Ethos

My design ethos in two words: “be humble”

Too often I see ego get in the way of good design. It is hubris to think you can design a perfect solution without feedback. Instead I believe in a transparent design process that allows for critique at multiple stages. I’ve never regretted going back to the drawing board. It is also important to identify your assumptions, and abandon them if they cannot be validated.

Contact


VoxDirect: New Product Launch

Company Background

VoxDirect combines a business phone system with automatic & bulk texting features for solopreneurs and micro-businesses.

Problem

  • Cloud-based phone systems are becoming commodified
  • We are being outbid by too many competitors
  • We need a product that people are willing to pay more for

Solution

Launch a new service that combines our original cloud-based phone system with a new suite of automated texting and bulk texting tools for micro-businesses.

Challenges

  • The service needs to co-exist with our business phone system offering
  • Launch this combined offering under a new brand name
  • On-boarding new users to a wide array of functionality

Team

I carried the design side of this project from start to finish largely on my own. I leaned on the insights of a market researcher who helped paint a picture of who our target user was. The researcher, product director, and I spent countless hours discussing the high level requirements for the MVP. The engineering team gave us feedback and ideas on how to cut scope, and how to get this out in multiple releases so that we could learn from beta users.

User Research: Quantitative

We started the project by sending out a survey to users of our original product, CloudPhone. We asked them if they were interested in bulk/automated texting tools. Then we asked how they would use it.

User Research: Qualitative

I followed up with a phone call to several of the users who were enthusiastic about the idea, and got good qualitative data that gave more insight into who our target user was.

Personas

Through the exercises shown above, I created several personas based on real user data. This is Direct Sales Justin. He’s an extroverted 21 y/o who is a natural salesman. He is constantly on the phone and texting so anything that can save him time and make him look more professional is worth considering.

He currently uses two separate services for text marketing and a business phone system. The problem with this is:

  • It’s costly
  • He can’t ask people he’s texting to call him
  • And his contacts and engagement history are in two different systems

Competitor Research

This is a feature comparison chart that shows how we positioned VoxDirect compared to other top providers in the text marketing space and cloud-based phone system space.

Site Map

After the initial research phase, I started designing in low-fidelity and putting together a site map. On the right is the pre-existing phone system side of our product. On the left, are the new text marketing features.

One requirement we had was that each side of our service must be able to function independently of the other. The reason for this has to do with our company’s strategy of white-labeling our products and the need to have flexibility for different markets.

Wireframes

After the site map I started creating user flows and wireframes.

User Testing with a Wireframe Prototype

After I felt like user flows and wireframes were in a good place, I wanted to create a prototype to do some user testing. Instead of making a prototype in high-fidelity, I thought I’d be able to gain insights quicker and iterate faster with a low-fidelity prototype. So I created a clickable low-fidelity prototype using Invision. I built the prototype to mimic the onboarding process to the new application, that way I could test how people unfamiliar with our application were able to figure it out after signing up.

Task Analysis

Each time I got someone to test the prototype, I wrote down my observations on a task analysis sheet. I would take notes on each area that seemed like the user was struggling or confused. After I had tested the prototype a couple times, I would make changes and create a new prototype and then start testing again.

Mockups

After I felt comfortable with my wireframes and low-fidelity prototypes, I moved on to making mockups and interaction designs. One of my constraints was that I had to use the same UI elements as CloudPhone, our existing product in the market.

Product Launch

Finally it was the big day and we launched VoxDirect. It was sort of a soft launch since we wanted to learn from customers and make sure we had product-market fit before trying to make a splash.

User Testing & User Interviews

Once the product was in the market, I started interviewing real customers. I sent select customers an offer to meet with me for an hour in exchange for an Amazon gift card. We joined a video chat and I asked the customer to share their screen while I asked them to perform various actions in our web portal and mobile app. I also asked about their business and what they hoped VoxDirect would be able to accomplish for them, and if the service was meeting their expectations.

Mouse Tracking and Heat Maps

Another way I got user insights was through a tool called Hotjar. Hotjar enabled me to see screen recordings of people using our product. This became a favorite lunch time activity of mine. I could put Hotjar on 2x speed and set it to skip pauses and simply watch and wait to see if I could find usability issues. Hotjar also generates heat maps that show you where most people click on a given page and how far down the page most people scroll.

Measuring Retention & Feature Use

I used an analytics tool called Mixpanel to see which features were being used frequently and correlated with high retention. We learned that customers who sent a blast text were likely to send more and continue using our service. So we focused our onboarding to channel customers into this “aha” moment.

Nav Redesign

One of the biggest usability issues I identified was our navigation was confusing. We originally designed VoxDirect to be two separate products that could be independent of one another. So we had a “Phone System” product and a “Text Marketing” product. So the idea was that you could switch between the two products by hovering over the logo and selecting the other product from a drop down. We later decided to only market the combined version of the two products and I had an opportunity to redesign the navigation.

This coincided with a rebranding of VoxDirect so you’ll notice a new color palette and UI styles.

Onboarding Dashboard ✨ Released

Instead of showing the real dashboard, new users see steps they have to complete before being "activated".

Onboarding Dashboard with Steps Completed✨ Released

Onboarding Tour Steps ✨ Released

I used a tool called Chameleon to present new users with a step by step tour to get started.

Dashboard: Animation After Steps Completed✨ Released

Regular Dashboard✨ Released

Composing New Bulk Text Message ✨ Released

Creating a Drip Campaign ✨ Released

Bulk Texting in the Mobile App ✨ Released

What's Next?

Some of the things we are planning for future improvements are:

  • Contact management in the web portal
  • Personalization of messages using variables
  • Chatbot that can answer basic questions and connect to live agents for more complex tasks
  • A calendar for managing event based communications such as event reminders and follow ups

Measuring Success: Messages Sent

One of our leading indicators of success is how many messages are being sent using our service. We track this and have been seeing steady growth. However, most of the messages sent are bulk and automated texting. This shows low levels of engagement between the businesses who use our service and their customers. So this is a metric we are trying to improve by creating ways for businesses to text their customers more personally and by focusing more on handling inbound messages through automations. We have also put in greater controls to make sure businesses are only texting people who have agreed to receive their messages.

Measuring Success: ARPA

One of our business objectives when starting VoxDirect was to create a product that people were willing to pay more for than our cloud-based phone system product. We were able to demonstrate great success in this regard.

Our monthly average revenue per account, or ARPA, for CloudPhone, was only $15.49. Since rebranding to VoxDirect and adding the text marketing tools for micro-businesses, we have been able to increase our ARPA to $75.75. This represents a 492% increase.

So we are thrilled with the results here. Having a higher ARPA means we can afford to advertise our product more aggressively and invest more time and resources into making it better.

CloudPhone: Calling Options

Company Background

CloudPhone is a Voice Over IP (VOIP) provider that allows people to place and receive calls with a second phone number for their business.

Problem

CloudPhone calls have quality issues when the user has a bad wifi/data connection.

Solution

Allow users to place calls with their phone’s native calling app, but while using their business phone number. CloudPhone uses a wifi/data connection to place calls and native calling uses a cellular connection which is more reliable in low-bandwidth conditions.

Challenges

  • Users have to be educated about these two calling options
  • It needs to be easy to choose between the calling options
  • Users will have to leave the app in order to place their call

Team

I was the only designer at my company at the time of this project. I was designing our iOS, Android, and web applications, and at the same time doing the design and development for our marketing website. Needless to say I had my hands busy!

Educating Users About Calling Options

In order to allow users to place calls in low bandwidth conditions, we needed to create an alternative way for users to place calls outside of our app and in the native phone app instead. This presented a major challenge in educating users about these calling options and how to do it.

User Flow: First Phone Call

Here is a user flow I created for when someone places their first call in CloudPhone. Using progressive disclosure to not overwhelm the new user experience, we wait until the user is ready to place their first call before showing them these calling options.

First Call Screen

Before a user places their first call we ask them in this screen, “Please choose a “call method” to place your first call”. I spent a lot of time getting this messaging right. I was looking for a balance of clarity and briefness, explaining only what I needed to, so the text would be more likely to be read.

Validating Mobile Number

The first time someone chooses “cell service” as a calling option, we need to check that the phone number we have for them on file is correct. We collect their number during sign up but there is no authorization step. I made it so that the keyboard is already popped up, so if they need to edit it, they can do so easily.

Leaving the App to Place a Call

This was a part of the flow I was nervous about. When a user places a call using “cell service” as their calling option, an action sheet pops up prompting them to call a number. But the number in the action sheet isn’t the number they dialed! This number is used to “bridge” a call so that their business number - and not their personal number - will show as their caller ID to the other party.

Complicated telephony aside, it’s necessary for this feature to work. But I was torn because I didn’t want to over explain with multiple steps telling users what to do, but I also didn’t want them to be confused.

I hypothesized that users would just tap the number and continue placing the call. And indeed users seem to be figuring this out without issue.

One thing that helped though, was saving this number in their contacts as “CloudPhone Call” so when they flip over to the call screen of their native calling app, they get a cue that everything is working correctly.

Video Prototype of First CloudPhone Call

View Prototype on Invision

Making it Easy to Choose Calling Options

The next challenge I want to show is how we made these options easy to use for users who are already on-boarded.

Redesigning the Keypad

In order to make calling options accessible on the keypad screen, I had to rearrange elements. This shows my process exploring UI options.

Redesigning the Keypad (iOS)

Here is a before and after that shows how I transformed the keypad screen to make room for an option to change their call method. The screen on the right shows the new screen.

If you look under the number, there is an indicator of your call method (wifi/data or cell service). If you click on this area, you will go to a screen where you can change your call method.

I also realized there was an opportunity to show the phone number the user was calling from. Our users often have multiple phone numbers for their business or businesses. So it’s nice to bring this to a more visible location instead of being buried in the settings menu.

Redesigning the Keypad (Android)

I’m mostly showing the designs I made for our iOS app, but I made a tailored set of decisions for our Android app. The new design on the right uses Material Design guidelines, and is similar aesthetically and functionally to the Android native calling app. This was paired with a larger UI update to our Android app to make it feel more Android native.

Video Prototype of Choosing Call Method

View Prototype on Invision

Designing for Other Areas Where Calls Can Be Placed

Showing the options to change call method on the keypad isn’t enough, because there are several other areas where calls can be placed. I needed a more comprehensive design solution so that users could choose their call method when initiating a call from Contact Card, Recent Calls, and Messages.

Introducing "Call Setup"

I created an option in the Settings menu called, “Call Setup”. With this option turned on, each time you place a call, a dialog will allow you to change your call method and caller ID.

User Flow for “Call Setup”

I created a simple user flow to demonstrate how the same flow gets triggered in all the different areas where calls can be initiated within the app.

Video Prototype of Using Call Setup

View Prototype on Invision

Lessons from the Wild

I created a simple user flow to demonstrate how the same flow gets triggered in all the different areas where calls can be initiated within the app.

Measuring Success

All in all this feature has been pretty successful. By using mixpanel to dig into user data, we are able to see that 38% of our activated users have used cell service as a calling option, and 18% of calls are made using the cell service calling option.

CloudPhone: Activation Improvements

CloudPhone is a service that works like Google Voice but with more features and is targeted to micro-businesses. In just a few minutes you can sign up and get a business phone number that when called, can ring any of your employee’s cell phones or desk phones. You can also setup a recorded greeting that will present callers with options like, “For sales press 1, for support press 2.”

cloud phone value prop: Let your phone do the work for you while you focus on growing your business.

Graphic from CloudPhone’s website describing value proposition.

When I first started on this team, the on-boarding process for new customers was severely lacking. We noticed many customers signed up and never got started using the product. In order to get to the bottom of this, I enlisted several friends to sign up for the product and talk out loud what they were thinking. I also called customers who looked like they were at risk of not activating, and asked them if there was anything I could help explain. And finally I used an analytics tool called Hotjar to view heat-maps of clicks and screen recordings (to maintain our user’s privacy, sensitive information like names and IDs were obfuscated). Through these practices I developed an ability to guide people towards CloudPhone’s value. I also identified a lot of areas where I could minimize friction and streamline the user’s discovery phase.

screenshot using hotjar

Heatmap of clicks in our web portal using Hotjar. We discovered most people were not even looking at how to configure their menu actions. We realized we needed to do more to educate users.

The first thing I did to tackle this problem was to create a dashboard on our web portal. This might seem like more of a retention thing, and it is, but it is also very important for activation. Dashboards are useful to new users because they offer a familiar place to return to and jump from one area of the application to another. The dashboard I designed features large buttons that take you to areas necessary to configure your account. The dashboard also features fun illustrations with verbiage that steers users to doing the two actions we have linked to high retention (placing their first call in the mobile app and creating a custom virtual receptionist greeting).

screenshot using hotjar

CloudPhone’s dashboard gives new users a comfortable place to return to and encourages activation steps.

The next big project for activation was setting up an effective tour. I designed an interactive tour that prompted new users to click on elements and navigate to different pages for a long thorough explanation of all of the features and services. But after deploying this tour we found that a very small percentage of people were actually completing the tour. So I tweaked the design several times and settled on a version that is less linear and allows users to discover at their own pace and encourages but does not demand next steps. We also made our tour multi-session so that we could introduce advanced tips and tricks and up-sell users who were further along in their activation journey. Our growing activation rate show this tour strategy has been very effective.

screenshot using hotjar

I designed a tour to guide new users towards CloudPhone’s core value.

screenshot using hotjar

Tinkering with the design of the tour improved our tour completion rate from 10% all the way to 54%! This might not sound like an impressive percentage, but people have different learning types. People who would rather explore and learn on their own are empowered to do so.

There were several other things we did that lead to increased activation. I reorganized the navigation of the web portal to be more intuitive. I convinced the team to get rid of one of our features in the web portal that didn’t work well and was a huge distraction to the new user experience. I also got rid of unnecessary form fields and took steps to minimize clicks and actions needed to accomplish tasks.

In a one-year time span we improved one of our activation metrics, people who signup and place a call in the CloudPhone app in the same day, by 385%! As a major side bonus we saw a dramatic reduction in churn, going from 4% to 2.4%. Now when I talk to new users about their experience, the conversation is much different. There is still room for improvement, but it is clear from the qualitative and quantitative evidence that we have made major strides.

screenshot using hotjar

Mixpanel funnel data showing 385% improvement in the amount of users who show signs of activation within 1 day.

CloudPhone: Growth Hacking

Web Design & Experimentation

In May of 2017 I attended the Growth Hackers conference with several colleagues. Soon after, we established a cross-departmental team called the “Growth Team”, dedicated to running experiments with the mission to improve our product and marketing efforts. The insights and adjustments we made through these efforts were very impactful. In a year and a half we were able to double our prices while increasing conversion 300% and nearly halving our churn.

cloud phone value prop: Let your phone do the work for you while you focus on growing your business.

Slide from the Growth Hackers conference explaining the basic process behind growth hacking.

The Growth Team consisted of a designer (me), marketing specialist, developer, analyst, and lead. Each week we would meet and discuss potential tests we wanted to run and present our analysis of the tests we had running. We had a scoring system for prioritizing our ideas that considered: impact, confidence, ease, and time needed to reach statistical relevance (ICE-T). This ensured that we were only working on tests that had a high probability of success.

Some of the things we tested turned into larger projects once we had proof that we were on to something. For example, we changed the call to action (CTA) text on the buttons on our marketing website to be more focused on choosing a business phone number, rather than the larger task of setting up a business phone system. This resonated with visitors to our site and we saw a greater amount of clicks on those CTAs that were focused on choosing a business phone number.

cloud phone value prop: Let your phone do the work for you while you focus on growing your business.

We changed our call to action button on our website to be more focused on choosing a business number rather than being more vague with “Get Started”. Our observations showed this call to action was more effective.

In our previous implementation, users would choose a plan in the marketing website, and then enter a signup funnel where they chose a number and filled in their personal info. We realized we needed to move number choosing further up in our funnel. Now our homepage features a form to get started choosing a number. We made it so that you can either choose a number first or choose a plan first. I did all the design and front end development for this project.

cloud phone value prop: Let your phone do the work for you while you focus on growing your business.

After learning the effectiveness of enticing customers to choose a business phone number, we decided to create a new signup flow that puts number choosing front and center.

cloud phone value prop: Let your phone do the work for you while you focus on growing your business.

This is the next step after you decide you want to choose a number. Now the visitor is in a very focused flow so that they aren’t distracted by anything else. You can see there is a breadcrumb above showing the sign up process.

Another thing we tried that had huge results was switching from a free trial to a money-back guarantee. By analyzing our users we realized we had a lot of new users who were not very motivated. Our theory was that if we switched to a money back guarantee, we would probably be lowering the amount of new users, but the ones who did sign up would be more motivated to give it a try and would turn into long lasting customers. Our hypothesis was correct and this lead to a huge boost in paying customers. I contributed to this project by analyzing user behavior on our various analytics platforms, and also changing messaging and graphics in our website to communicate an upfront payment.

cloud phone value prop: Let your phone do the work for you while you focus on growing your business.

I redesigned the plans page and other pages to showing a money back guarantee instead of a free trial.

cloud phone value prop: Let your phone do the work for you while you focus on growing your business.

Some of our experiments were not successful. In the experiment depicted above, we tried to separate visitors to the website depending on the type of phone system they needed so that we could cater to them better. We think this alienated our base customer (micro businesses who don’t need desk phones) and lead to fewer conversions.

Shield Compliance Banking Portal

About My Process

This application was built to enable banking for businesses in the cannabis industry. It ensures banks that their clients are in compliance with state law and allows banks and businesses to interact within the portal to resolve compliance issues, keep tabs on in depth financial information, and to manage legal documents.

I was brought in at the very beginning of this project to guide decisions on usability and workflow and design the look and feel of the user interface. When I started the project, the requirements were loosely defined. I spent a lot of time trying to understand how bank compliance officers and cannabis businesses operated so that I could design a workflow that could be easily managed by both parties.

cloud phone value prop: Let your phone do the work for you while you focus on growing your business.

Me, deciphering requirements.

I worked with a team of finance technology consultants to create a very rough wireframe on Google Slides. I decided Google Slides would be suitable for creating an early stage wireframe because it wasn’t daunting and I could get the consultants and stakeholders involved by leaving comments. This was a huge win because it helped the management team sharpen their requirements and I was able to improve upon this initial wireframe with a higher degree of confidence.

screenshot using hotjar

Rough wireframe using Google Slides to encourage team cooperation.

When I was ready to move to color, I spent some time looking at other finance applications, and played around with some styling options. I made some quick improvements to a logo they were already using, threw together a header area and some basic components, and landed on some colors and fonts. This gave me a basic idea of the look and feel. Then I shifted gears and went granular to design the individual components that would make up my design framework. I followed Atomic Design methodology to create a consistent and flexible library of user interface components.

screenshot using hotjar

Illustration depicting the Atomic Design Method that I use to develop a consistent UI

Once I was satisfied and had approval on a few screens, I made sure to setup my design workflow to be as efficient as possible. The application I use, Sketch, allows for a lot of programatic ways to setup design documents to speed up my design workflow. This way I don’t need to think as much about spacing, or creating components form scratch, or what colors to use because I already made these decisions upfront and setup my document correctly.

screenshot using hotjar

I setup my design documents to work efficiently and create consistent mockups.

I presented my designs regularly by video conference so that a remote team in India and around the US could give feedback. I made animations using a prototyping app called Principle so that I could show the development team how certain interactions worked. I also gave feedback as it was being developed when things were out of sorts. I would often send my feedback as css snippets so that it was unambiguous for the frontend developers.

screenshot using hotjar

Notes I made to assist the QA and development teams.

screenshot using hotjar

Prototype animation I created with Principle to demonstrate scroll behavior.

As things often go in the MVP stage, requirements shifted sometimes, which would require me to create new mockups. The application is now being beta tested by a large bank in Washington.