Task : I was hired as an in house designer for a research group "GRIP" on the University of Michigan campus in order to update and modernize their logo, login page, and to further develop features in their apps.
What is LessonSketch : It is a learning tool for teachers that allow scenario based teaching to be produced online in order to better guide teaching performance.
When I joined the team of mathematicians, computer scientists, and researchers, I was given a color palette of 15 colors, a mixture of gradients, and a logo that looked like pic-art from Microsoft Word. I had my work cut out for me.
I stripped the color palette of the website down to 6 colors and began to create a logo that could be memorable and representative of their work. The focus was on dialogue and it was a requirement that there was a speech bubble in the logo. However I argued that through the website there is no real speech, it was rather about communicating through written word. I thought it was also important to show the admirability of working hard to try to make the learning environment in the USA a better place for students. Out of these ideas came a triangular shaped pencil tip that also looks like a speech bubble as well as a the superman logo.
After a good month of creating a new clean logo, my boss was worried that the logo was too simple. I explained to him that a logo shouldn't be too complex because people will not remember it if it has a lot of things to look at. To convince him, we came to a compromise inspired by what Google does for holidays - and I created three holiday illustrations for each month to be used for their website.
When I joined the team, the login page was a mess of colors that didn't work. The page also lacked a grid or a sense of hierarchy. There were 5 different typeface sizes, 3 typefaces, 5 different weights, 4 different typeface colors on top of 3 different background colors that were on top of a tacky gradient. It was also not user friendly on other mobile devices. A person coming across this webpage, wouldn't have been able to understand what it was for. Also, if one looked at that website, they wouldn't have realized the quality of the work that was being produced or wouldn't have known that millions of dollars were going into this project.
New Design: I designed a template for a scrolling webpage, that gave far more space for more information. It now had a grid, and made use of one typeface Helvetica Neue (not my choice). It only used colors in our color palette and only two colors and two weights for typeface. The outlines around each shape was taken away and the rounded corners were changed into pointed corners. To make the triangular shape of the logo to work with the webpage, I angled each section and this allowed for a more dynamic look as a user scrolled down. The page was now user friendly and and provided needed information to potential clients. They looked more professional for an older audience while also looking fun for a younger audience through the use of bright colors.
Look below to see the template that I designed. While not all of the design decisions I made were kept, check out : http://www.lessonsketch.org/ to see the drastic change that occurred since the initial design of the website.
I was asked to design a look for a voice recorder that would allow teachers to have a new way to communicate with other teachers. I was free to decide on the design as long as it had some specific features: Something to show that it was picking up sound, a timer, a reset button, a save button and then the usual play, pause, record buttons.
Using the new style of the login page I designed this blue recorder that has lines running across its white circle to show that sound is being picked up.
Next I was asked to design a formula creator that made it easy to build math problems for teachers to create for their students.
The formula creator was to be called Formulate and it would have 6 tabs for different categories of functions/ letters/ brackets/ symbols. As the user clicked on the formulas, they would appear below and the user would have the option to fill in the grey space with the number of their choosing, thus creating whatever formula they wanted.I tried to create a grid so that the line up of the formulas was cleaner. Each tab was also given an example icon to help users find what they need much faster.
The characters used to depict storylines in LessonSketch were all a light blue color. However, it became important to LessonSketch's clients to have the option to choose skin tone colors as well as other colors besides blue.
I made a system that allowed you to drag your mouse around on a color wheel and it would show you how the inside of the characters would look and how the outlines of the characters would look. The last color a user chose would show up as the outlined color around the color wheel. The user would be able to click on any of the last ten colors that would stay on the color wheel to reuse specific colors that they have chosen. There would also be the opportunity to use the eyedropper tool so that the user could use images of people and match their skin tone exactly.
The issue with working with skin tones is making sure that everyones skin color would be included and that there was no chance that a single tone was left out. The solution to this problem came from Neil Harbisson, a man who has an antenna in his head and uses it to hear colors in the form of frequencies. He created a color wheel of all of the frequencies of colors present in human skin. And this is the wheel that is used for our skin tones.
To ensure that every character's outline was the same amount of tone darker than the inside, I created an algorithm or adding 50 to R, G and B and this would be the color that was used for the fill color of each character. In circumstances that the outline color that was chosen was too light, the algorithm would switch and 50 would be subtracted from RGB so that 25% of the characters would not look like ghosts. In this way we could keep consistently colored characters!
After designing skin tones, facial expressions were designed to give more personality to the characters. They were based off of images of humans expressing each emotion and the eyebrows and mouth width and angles were made to reproduce the angles and size of the human eye brows and mouth in the images. Each new expression needed a front view, and two side views. Because some expressions required the eyebrows to be higher or the mouth to be lower, I had to go through and measure x and y coordinates in pixels to make sure the faces always fit the face correctly once they were uploaded to the website.
This is essentially what the app looks like redesigned to work with the colors of the login page. It is basically like an online powerpoint sketches out a lesson (hence LessonSketch) to create dialogue between educators and to teach teachers.
This was my very first paid job for graphic design, so it came with a lot of trials and errors.The most important lesson I learned in the year I worked at this job was how to work with people who don't quite understand design and how to compromise what I think looks great for what everyone thinks works better on a functional level.
A major part of this job was to stand in front of the team and present my ideas through the use of PowerPoints, so I learned a lot about communicating my ideas clearly. So by the end of the year my presentations became more of a place of discussion not just constant questions.
Sometimes I went along on demonstrations of the website to schools and would get to film the events so I got to practice in basic filmography and got to observe the way in which the company networks and teaches how their program works. I also learned how to make stylesheets for future designers to be able to build on the style I had created for the group. Not to mention I helped them organize the mess that they were before I joined the team. We moved our files onto google docs into project folders so that team members could always access files from anywhere.
I was also lucky to work with people of multiple disciplines which aloud me to think about things like "is this possible for the computer scientist to code with the deadlines we have" and "will the mathematicians have a problem with this formula being next to that one?" or "Does this website meet the demands and aspirations of all of the team members?".