simpledotorg / simple.org

Simple.org website
MIT License
54 stars 9 forks source link

Brand Design for "Simple": Step 2 #4

Closed dburka closed 5 years ago

dburka commented 6 years ago

Step 1 can be found here...

One month ago, we called for open source design contributions to develop an identity for Simple. The response has been beyond what I could have hoped for. Many designers from all over the world submitted concepts and, best of all, people picked up ideas from each other and built upon them. It's been really amazing to see the collaborative spirit.

Thank you for all of the work so far

Thank you everyone who contributed ideas so far. I'd like to call out @dannnn, @kellyjepsen, @tdrach, @webalys, @designernaut, @mheesakkers, @ToferFlowers, @Uppalled, @HarlowRaven, @bryansellersdesign, @friendlyduck, @philhammel, @kylejohnston, @menachemkrinsky, @csosebee, @jamtrash, @patrickhill, @sambaines, @hckmstrrahul, @jarridb, @lbinhammer, @aentan, and @rickymetz. I love how this has felt like real teamwork so far... I'm so appreciative of all of the hours and heart you have put into the project.

Next steps

A typical brand process looks something like this. We're at Step 2.

Step 2: Narrow

We would like to try ideas based on three of the options generated during the Exploration phase. The following three options are closest to solving for the creative brief.

concepts

Let's take these three concepts and:

  1. Refine the mark. Try new ideas based on the options and try refining the options to optimize them.
  2. Try the mark in common touch-points. We should try the mark as an app icon, an icon inside the app, a logo on a website like simple.org, as a 3D trophy, as a printed mark on a PDF report.
  3. Try color and type treatments. Keeping the touch-points above in mind, try colors and type options that would be suitable.

Here is an example of a color treatment and a quick experiment with a logo in a couple of typical touch-points — download the Sketch file as a starting point, if it's helpful (download Roboto and Roboto Condensed fonts)

image

Let's go!

Please submit your ideas and options below as an issue. Again, if you're willing please mark your ideas with a CC0 license by writing "CC0 Licensed" with your submission.

philhammel commented 6 years ago

Great that the project is moving forward and starting to come together. Excited to see what people come up with!

Here's a link to the .ai file and font I used for anyone that wants to kick it around.

sgarrity commented 6 years ago

All three options look great. This is a bit embarrassing to bring up, but Option 2 looks slightly phallic to me (don't judge me! I said I was embarrassed!).

Option 3 is my favourite (but Option 1 is great too).

dburka commented 6 years ago

@philhammel Thanks for sharing the files and for your experiments of placing Option 3 into the examples! Awesome start. I'm also trying some ideas for all 3 options.

@sgarrity You bring up a good point. It's easy to find negative connotations with simple shapes, but it's a concern for sure. If we work with Option 2, we should work to reduce that risk.

crystalcyan commented 6 years ago

Hi! 👋I'm a little late to the party but had a quick question: do we know what apps are popular in India and other markets Simple will launch in and what they look like? (to ensure healthcare workers and patients don't confuse it for another app) Or is that something that would be more relevant at a later stage?

dburka commented 6 years ago

@crystalcyan Wonderful question. So far, we're most active in India. We have only rarely seen nurses and healthcare workers who use professional apps on their Android devices. Where they are using professional apps, they're basic medical records and we don't need to worry about brand differentiation. Most healthcare workers have the default Google Android apps and have installed WhatsApp and use it regularly. Some have Facebook, some have Instagram, and a handful were using popular consumer apps in India like Zomato, Ola, Flipkart, etc.

philhammel commented 6 years ago

@dburka Ah yeah. Wasn't meant to share them yet. Not quite done yet but I have a 6m old son and in the processs of moving house so trying to find the time finish :)

crystalcyan commented 6 years ago

@dburka That's helpful context, thanks for sharing. It's been a few years since I lived in Bangalore and Delhi so I figured the app market has changed a bit.

dburka commented 6 years ago

I took a stab at a bunch of palette options today based on Option 1. Posting here in case others find it helpful to build on... and to get feedback. I'm leaning towards more "Professional" and "Healthcare" type palettes. There will be a lot of skepticism in some quarters about this app and it may be important to steer away from consumer type palettes.

image
crystalcyan commented 6 years ago

@dburka I like the "Low key" color palette for its neutral, muted colors throughout the app with a brighter brand color for accent. For me at least, this evokes the feeling of a brand personality that is "smart, insightful, careful with your privacy, and treats you as a human being". The other benefit is this palette lends itself well to one-color physical prints. To that end, I started playing around with a few ideas here that similarly have primarily neutral colors with a brighter brand accent color.

simple

Note: I'm making a few assumptions here since I don't know much about hypertension, but as I started thinking about the brand personality and what a healthcare provider/clinician might want to feel in the moment they use Simple, I'm guessing that some patients see a clinician to get their blood pressure checked during a routine health check-up, while others see a clinician to get their blood pressure measured after experiencing acute symptoms. In either scenario, my hypothesis is that a clinician wants to be able to calm and reassure the patient they have the ability to control and manage their blood pressure in the future, and confidently provide actionable advice for how to do so. The colors I explored are meant to capture that feeling, but I would love to see if others think of other colors that might be even better suited for that.

philhammel commented 6 years ago

Hey everyone.

Solid hypothesis about the clinician wanting to be able to calm and reassure the patient @crystalcyan. Great stuff!

Nice work @dburka. I really like how you've categorised your colour palettes and choices. Really nice idea.

Finally got round to playing with some colour variants for option 3.

For the most part, I tried to simplify the colours for the brand and app by just using one. I chose the colours by taking red as the base colour (the colour of blood) and then applied complimentary, triadic, analogous colours based off it which gave me the variants (solid colour and white versions)

I tried to keep them professional but with a hint of personality and friendliness. I also made sure that the contrast ratios are clear and passes accessibility standards as the information here is incredibly sensitive and critical so should be easily scannable at a glance.

Curious to see what anyone else has been playing around with?

simple

dburka commented 6 years ago

@crystalcyan and @philhammel Wow! This is great work.

Just to help bring us all on the same page about the common use of the app. Hypertension is mostly non-symptomatic, so patients are visiting to get their blood pressure checked as a routine matter or they're often visiting the clinic for another issue and are asked to have their blood pressure taken. Many people will be discovering for the first time that they have elevated blood pressure. Unless your BP is extremely high, this isn't a panic situation but a "Hey, you need to take you blood pressure seriously, or you'll have problems down the road" kind of issue.

I like the calm colors in your ideas @crystalcyan and this might be the way to go. Yellow is going to be difficult to read (especially with white text) but the others are nice and clean. I'm not sure we can change the droplet logo to anything other than red without losing the "blood" look... or it's a raindrop or drop of liquid (it's one of the downsides of using that logo). In terms of usability, it's awfully nice to have blue links and blue buttons... there is no mistaking them. One thing worth thinking about: although the calm, neutral look is obviously calm and clean... it would be awfully nice claim an iconic color. WhatsApp has the pine green thing, Foursquare pink, Spotify green, etc.

@philhammel These ideas are great. That deep blue is particularly strong with the S logo. Again, having the link and button color in that hue is super clear, which is great. I love that you're thinking about accessibility as well... it's really important.

It's interesting in the "white" examples on the bottom row. I tried a few similar and it feels like the contents start looking really complex. I know a bunch of Google's default apps go white, but they mostly have a lot of visual content (e.g. Google Photos or even Calendar). At least in our current iterations, with all of this data content, I worry that the app looks even more complicated than it really is — kind of the antithesis of "Simple", ya know? I love that you're experimenting with it and I'm happy for you to push back if you think I'm wrong.

philhammel commented 6 years ago

@dburka Yeah I think I agree with the white versions seem look more fussy and complicated than necessary but thought I'd throw them in there to show some exploration and thinking. What do you think the next steps are from here? It seems like the group has perhaps gone a little quiet? Happy to explore further if we think it's worthwhile?

crystalcyan commented 6 years ago

@dburka Agree with claiming an iconic color and the importance of readability. One thing I just realized 😞- the droplet logo concept looks somewhat similar to the HipChat logo. Even if this isn't a potential user confusion concern, not sure if this is similar enough that this could be a potential legal concern.

sgarrity commented 6 years ago

Interesting to see the new Google Fit logo and how similar it is to the 3rd option here. Might be reason enough to avoid that option.

image

tdrach commented 6 years ago

Hey gang 👋 I took another stab at this with the feedback we got from everyone. I refined Option 2 a bit more. I feel like if there's a heart metaphor somewhere, it makes sense to have it be some shade of "red", right?

@dburka to your point about "owning an iconic color", I think it could be almost a pinkish shade of red.

While messin' with the checkmark + heart, I found this almost like, bandaid type thing? 🤷‍♀️ I think there might be something there as well. Font I used was Source Sans Pro. Check it out! Excited to hear everyones feedback.

simple r2

akshayverma1 commented 5 years ago

Hi everyone!

I'm posting here on behalf of the team at Uncommon. We have been working with Resolve to Save Lives since May 2018, and have been iteratively building and testing the app. We have now started working on the visual design, basing our design decisions on the discussions here and the insights that we've been gathering in our user studies. Here is what we have come up with:

brand presentation

Design Intent

Colour Scheme From our user studies, it seemed that blue was a good choice for action items like buttons and links. So, we chose that as our starting point and decided to use it exclusively for actionable elements.

Next, we chose green for positive actions and information, and red for negative ones. These colours were hue shifted towards blue to harmonise the palette.

App Bar We chose to use a dark app bar to maintain high contrast between the chrome and the content. Also, since our target demographic is most familiar with WhatsApp and other stock-like apps, and we wanted to leverage that familiarity.

Furthermore, we wanted to avoid using a colour with strong cultural connotations, so black, yellow, orange and red were ruled out. After some experimentation, a deep navy seemed to work best for these constraints, and also provided good contrast with white text and complimented the red logo.

Cards Initially, we were using cards in certain places and lists in others, but it was not very obvious to our users that the list items were tappable. So, we decided to use cards everywhere there are self contained, expandable packets of content, like in search results, patient summaries and the overdue patient list.

Buttons To avoid any confusion between buttons, banners and cards, we have avoided using full-bleed buttons and have maintained slightly skeuomorphic buttons in most places.

This is still work in progress and we would love to hear your feedback and comments.

[CC0 Licensed]

jcklpe commented 5 years ago

@dburka This is super dope. I'd love to see how the design could evolve directly through a git based approach IE starting with a framework that can be forked and iterated upon by individual contributors etc, and even forked for use by other orgs etc. In the way that a design system blurs the line between code and design, I would be interested in seeing a similar process evolve for more traditional design branding etc. Obviously working with binary files etc presents some limitations on how useful a git solution can be for that stuff etc but I'd be curious to see the concept pushed in that direction.

dburka commented 5 years ago

I'm sorry for the lack of communication over the last couple of months everyone. We have been heads-down deploying the app in India. The communication around this brand project has been the most challenging part of this and, if we do something like this again, we will try to improve with more focus.

But! The brand has landed in a really wonderful place. I'm extremely grateful to each of you for your help and I'm really proud of what we've accomplished as a collaborative team. Congratulations to each and every one of you.

I wrote a post on Medium about the project and the final result: https://medium.com/p/474f03a7fc15/