Selection of various user interface elements from the application presented in a large collage

red e app

Red e App is a startup based in Louisville, KY, that empowers communication for the non-desk workforce via a mobile app. It’s used by GE, Magna, Hard Rock, Panasonic and more.


Alongside the mobile app is a separate web application that allows companies to manage and communicate en masse with their workforce. Company administrators can send messages to individual employees and groups, manage resources, see analytics, easily manage staff roles, and much more. See Figure 1 for an example screen from the app.

Example screen from the app showing the main messages view, rows of incoming messages showing the senders avatar and first line of the message.
Figure 1

Main messages view of the admin.

I designed and wrote the front-end markup and CSS for this application and prototyped the intended functionality with jQuery. The designs were built according to specifications that came from detailed user stories as part of the internal Lean Product Management methodology.

The prototype was set up on an S3 bucket so the entire Red e App team could access it whenever they needed it. It’s a PostCSS project run via NPM with various HTML views that corresponded to the application screens. Another one of these views is shown in Figure 2.

Screen from the app prototype showing a conversation view between multiple people. Each person’s avatar, name and message are shown stacked chronologically.
Figure 2

Example of a message thread. This same conversation would be reflected on the mobile app as well albeit in the more traditional mobile messaging format.

Documentation

Rather than just build a bunch of pages and leave the design knowledge in my mind alone, I began to document the available classes and markup patterns for future front-end developers and designers to pick up where I left off.

I also set up the prototype to reference style variables from a single file for all of the fonts, colors, spacing, sizing, etc. Together this constituted the beginnings of a design system for Red e App to utilize not just for the web admin but for the main mobile app as well.

The CSS library and documenation were modeled after Basscss. (See also: Tachyons.)


Bonus!
Brand Design

I also designed the Red e App logo in 2015. Their product had matured and they needed a refreshed identity to reflect this sophistication along with future aspirations. The process was highly collaborative and the end result was well received by Red e App’s staff and their clients and has surprised even me with its versatility.

There were two requirements for the logo refresh: (1) the red color must remain the accent color, and (2) the “e” mark was required to stay in near form to its existing state. The first requirement was easy — one is hard pressed to find a better color scheme than red, white and black. The second requirement made sense and was where I started.

The “e” Mark

I identified three areas of the “e” that needed optimization work:

  1. The crossbar needed to be thicker. It was the same width as the rest of the letter (more or less) which made it appear thinner than the rest of the letter stroke.
  2. The end treatment of the crossbar stood out too much. I decided to match the curvature of the inside of the open counter to move the focus from individual elements of the construction to the entity as a whole.
  3. The points were too… pointy. I rounded the corners of the end arrow a bit and also tucked in and rounded the bottom right corner of the crossbar to give it more of a natural flow and (again) make the entire form more unified.

The end result of this is shown in Figure 1.

Comparison of the e marks.

Figure 1

The old “e” is on the left, the new one on the right. It now had a more coherent and unified shape (and held its form at various sizes).

The Logotype

The idea of typing out “redeapp” and replacing the letter e with the mark wasn’t the first idea — lots of options were explored, a lot of them very bad — but fast forward and the form of the logo had been settled as well as the preferred typeface: Sharp Sans No. 1 Semibold (see Figure 2).

Note: What was the Sharp Sans typeface then is now called Sharp Sans Display, and Sharp Sans now is a wholly new typeface.

Initial logo proposal: red e app set in Sharp Sans with the brand mark replacing the letter e

Figure 2

“redeapp” set in Sharp Sans with the mark replacing the letter e.

Below (edited for clarity) is what I wrote when I sent it the logo to Red e App for review, which was the first time they were seeing the updated brand mark as well.

Mark

The “e” mark has changed little. I just rounded the left end of the crossbar of the e and reworked the overall geometry to make the weight of the mark equal throughout.

Logo

The logo is set in Sharp Sans No. 1 Semibold with the letter e being replaced with the “e” mark. The weight of the the letters is the same as the mark so the entire entity flows together well. I did the logo as lower case because of the complexity of the word mark. The branding of Red e App as far as I can tell based on the existing work is capital word, lower case letter, capital word. This makes for a sometimes jarring experience in my opinion because most people aren’t used to seeing a name this way.

The lower case plus capital word is usually mixed with the lower case letter in front: eBook, iMac, iPhone, etc. You can’t run the words together because the e gets lost: RedeApp. You could camel case it: RedEApp, but then you lose the harmony with the mark being a lowercase e. On that note, I think Red E App reads better than Red e App but of course again you lose the connection with the lowercase e. (Editor&#8217s note: I was wrong here in retrospect, Red e App is the better typesetting option.)

All that to say, that’s why this option goes with all lowercase. For that reason, Sharp Sans No. 1 was chosen as the logotype because its lowercase letters are fantastic.

Overall they were very happy with the proposed logo. However, they wanted to see a couple more options with typefaces similar to Sharp Sans. I came back with one using GT Walsheim and another FF Mark. These are shown below along with the original Sharp Sans version.

red e app set in Sharp SansSharp Sans (original)
red e app set in GT WalsheimGT Walsheim
red e app set in FF MarkFF Mark

For the final version they chose FF Mark. Their reasoning was two fold: (1) The letter ‘e’ in the logotype wasn’t as similar in form as the “e” mark, and (2) the letter widths in the logotype were more narrow than the “e” mark. Both great reasons.

Today the logo seems perfect and I can’t imagine it being set in any other typeface. And somewhere in this sentiment is also the lesson that the visual strength of a brand comes from being used frequently and consistently.

Finally, a couple years later MasterCard typeset their new logo in FF Mark. Just sayin’.

Photo of a handmade pottery coffee mug with the Red e App logo on it.Photo of Red e App merchandise.Photo of a table banner with the Red e App logo.Photo of a t-shirt with the Red e App logo.

The final Red e App logo.


Albert Mohler

Built with React and WordPress, I worked with the engineering team at Southern Seminary to build a forward-looking website for a hugely popular and highly-trafficked website.

Testimonial

David is one of the best designers to work with, especially if you’re an engineer. He understands both sides of execution so well.

Jason HeathVP of Campus Technology, Southern Seminary