3 Simple Design Practices for Maintaining Sanity at a Start-up

Startups often have a barebones team — one marketer, one engineer, one customer service rep, and so on. It’s always a skeleton crew, all the time.

Each member takes on a lot of work that would in larger organizations be delegated. This means wearing a lot of hats, learning on the fly, and pushing workloads to maximum capacity.

While exciting and fulfilling, the structure carries an inherent danger, sometimes referred to as mental burnout. Take on too much work, spread yourself too thin, and suddenly quality takes a hit and productivity dives.

At RealCrowd, I’m the Director of User Experience and the one designer in house. Like everyone, I make keeping sanity in check — while being as efficient and productive as possible — a big priority. It’s a delicate balance.

Here are three simple processes I’ve implemented, along with the rest of the RealCrowd team, to mitigate mental burnout.

1. Enlist the Help of Non-Designers

We are fortunate to have a CEO and business team who have Photoshop and Illustrator installed on their machines and know how to use them. This has made it easy for them to create fliers, banners, and other collateral.

Once they have prototyped a design that they feel good about, I’m able to perform a quick design review or quick tweak to finalize the design. This helps speed up the design process and untangle competing deadlines between application and marketing needs. This also allows me to know which files should be templatized for reuse by the team so that I can focus on designing for the harder design problems.

2. Create a Product Design Backlog List

Coming from the corporate world, product backlogs can seem daunting, especially for a team that wants to be agile and flexible. Our Product Design Backlog contains design priorities that cover both product and marketing design projects.

There are so many projects that the product team, the business team, and I want to complete. Some need to be planned or designed prior to our weekly scrum. We now have a list of conceptual, redesign and branding work that we plan to complete.

A backlog list makes it easier to visualize similarities in projects, prioritize, and see when we need to call in additional help or scale back.

3. Assign Days for Important Aspects of the Job

At a startup, designers have to do more than deliver wireframes and high-resolution designs for the application. Depending on the day, I may need to help update our homepage, create a mobile-only solution, create an ad banner, or create an infographic. There’s a lot to do, but if you’ve already created your backlog, you probably see there are a few themes – product design, marketing design, and UX-led initiatives.

Once you know what’s in your backlog and have a good idea of your velocity, consider setting aside specific days for your major themes.

Currently, my week looks like this: product design on Monday, Tuesday, Wednesday, marketing on Thursday, and design-led initiative on Fridays. As our backlog shifts, this may change, but for now, it’s working well.

These quick tips have really helped me through times when I was close to burnout. If you’re a designer, hopefully you’ve learned a few tips that will make your design process smoother and more productive.

If you’re a RealCrowd user, hopefully you’ve noticed some of the changes that we’ve made with the help of these methods. As always, we’re itching for any feedback you might have, so don’t hold out. We’d love to hear it.


 

For more information about how you can fund your deals through RealCrowd, access the platform’s investor and transraction management solutions, or become a participating investor visit www.realcrowd.com or email info@realcrowd.com.

 

Using Mailgun’s email address validation service with AngularJS

(Note: This article has been updated to use AngularJS 1.0.8 and Bootstrap 3.0.0. If you are using earlier versions the syntax may be slightly different.) Email address validation is hard. The RFC’s are complex, implementations of them vary, and regular expressions you find lying around the internet fall short. In fact, don’t tell anyone, but the validation we do on our web site today is not correct by a long shot. But it has decent coverage over the most common address formats that normal people use.

We want people to use our service. So, we make it as easy as possible to sign up. Investors only need to provide an email address and password to get started. We don’t make an investor type either their email address or their password twice. A typical verification email is employed after an investor signs up on the site and it’s very straightforward to reset your password. Of course, we see a > 0 bounce rate on those verification emails. Even the most well intentioned person types things wrong occasionally. The validation service Mailgun announced today should be a step in the right direction, and we’re excited to try it out!

Our web application uses AngularJS on the front end, and we have spent some time tweaking the user experience of its form validation. We’ll certainly be testing out the Mailgun API, so we decided to see how it might fit in with our form UX.

Andy threw together some code loosely based on the Mailgun jQuery example project. If you’re eager to get started, have a look over on our Github or play around with the Plunker.

The tricky part about a validation system such as this is that it is asynchronous by necessity as you are calling a remote service. You need to provide status to the user, or confusion will ensue. We disable the default form validation, and use the AngularJS system instead.

In order to work around the asynchronous problem we set both an “in progress” and “is valid” validation flag on the model and adjust the UI accordingly. Rather than re-create the functionality, we use the Mailgun jQuery library as-is. We simply wrap the callbacks to modify the state of our AngularJS form validators. Angular magic takes over from there, and the form’s $valid flag remains false until both the call to Mailgun is complete and the email address is valid. The user also sees status updates as to what is going on.

Use the directive by adding a rc-mailgun-valid attribute to your email input.

   <input class="form-control" name="email" type="text" placeholder="Email" 
          ng-model="session.email" rc-mailgun-valid />

We control the messaging to the user by simply using the ng-show directive to display different html based on the progress of the transaction. Did the user enter anything? Is the address valid? Are we in progress validating the address? Was there an error?

   <span class="help-block">
     <span ng-show="loginForm.email.$error.required">Required</span>
     <span ng-show="loginForm.email.$error.rcMailgunEmailValid"> Invalid Email Address</span>
     <span ng-show="loginForm.email.$error.rcMailgunInProgress"> Validating Email Address</span>
     <span ng-show="rcMailgun.mailgunStatus"> Validation Error: {{ rcMailgun.mailgunStatus }}</span>
   </span>

And, finally, disable the submit button until the form is valid, which includes waiting for the call to the Mailgun validation service to complete.

   <button type="submit" class="btn btn-primary" value="Login" title="Login" 
           ng-disabled="!loginForm.$valid">
     <span>Login</span>
   </button>

And there you have it. A much-more-accurate email address validation system, able to be applied to your AngularJS powered form by just adding a couple directives. For a better UX, tie this in with rc-submit and rc-attempt as described in our last dissertation on AngularJS form validation.

Available on Github

Play with it on Plunker