Bike MD Web App Style Guide

GRID SYSTEM

Simplicity everywhere! Since Bike MD starts off as a questionnaire to narrow down the bike and the problem type, the grid system is very simple as the screen changes as the user makes selections.

BikeMDGrid

TYPE SYSTEM

BikeMDFont

COLOR PALETTE

Because we selected some grunge – vintage looking images for backgrounds, I decided that the color palette should stay simple, with 3-4 colors at most. I knew we would need font colors, and highlighting colors.

BikeMDColors-01

LOGO

I tried a few things {as sampled here}, but eventually we narrowed down to this design because it not only feet the theme and brand, but the vertical design also served itself as a perfect mobile-ready image. Where you see charcoal is transparent, so the image goes over the background photos for a truly unique and cool look.

BikeMDLogo-01

IMAGES

Early on during the brainstorming aspect of this project, I started searching for images that would inspire me, {as I always do}, and an image collection appeared on my search that was the beginning of this entire style guide. The images captured exactly what the team discussed, so we purchased them and they became the background images of our pages.

BikeMDBackgroundImages-01.png

ELEMENTS

Primary Navigation links = $white text over image;

Screen Shot 2017-09-02 at 9.58.08 PM

Primary Navigation links: hover = $seafoam solid top border;

Screen Shot 2017-09-02 at 9.58.01 PM

Secondary Navigation links = $white text; header two size;

Screen Shot 2017-09-02 at 10.26.05 PM

Secondary Navigation links:hover = $seafoam text; header two size;

Screen Shot 2017-09-02 at 9.59.17 PM

CTA Buttons = $charcoal background; $white text;

Screen Shot 2017-09-02 at 10.27.37 PM

CTA Buttons:hover = $white background; $charcoal text;

Screen Shot 2017-09-02 at 10.27.47 PM

Selection Buttons = $white background; $charcoal text; Header 2;

Screen Shot 2017-09-02 at 10.27.57 PM.png

Selection Buttons:hover = $charcoal background; $white text; Header 2;

Screen Shot 2017-09-02 at 10.28.08 PM.png

Fun element: I know, I know, this may not be super kosher, but, my team and I thought it would be fun to add an unexpected element to this process, once the client makes the different bike style selections, they are prompted to select the type of problem they are having, we decided to change things up a bit, the circles are white, once you make a selection they turn seafoam, they also spin, also, as you see on the top of the bar, the user can now see what brand, year, and model bike they are researching.

Screen Shot 2017-09-02 at 10.28.25 PM.png

 

Salesforce App Building Day!

 

I love developing, I love designing, but most of all I love product design. Ever since I attended The Iron Yard, I always knew that my next step would be app-design. I mean, even on my everyday life {you can probably relate} I use my phone for pretty much everything.

My current job wants me to build them a customer-facing app, I’m a long way from being able to do that code-wise,  but when I read that Girl Develop It RDU was offering an intro class for app development with Salesforce, I knew I had to jump in. We use Salesforce at work for email marketing, so, I’m pretty well-versed in email design with the product, however, I also know that there are so many more services we could be taking advantage of!

Screen Shot 2017-06-25 at 2.38.11 PM

The class was held at Pendo’s location, which is a beautiful office in Downtown Raleigh, I was totally yelly when I saw their comfy desks, and awesome cranberry-modern pink accent colors. But most of all, I fell IN LOVE with their Dino!

What I walked away from this class was that, creating a customer-facing app is a little bit closer to me than I anticipated with this system so long I’m ok with not coding it {but, if you knew me, you would know that I would do it for a project I’m in a crunch to finish, but I would not be ok with it, and I would make it a point to hack the heck out of it}. If you are unfamiliar with Salesforce, you should check it out, I’m very interested in learning some more, this was an excellent class!

Final Project: Bike MD

Phew, how long has it been? So many projects, meetups, workshops, job fairs, interviews, rejections, offers, events, friendships, new connections, new technologies since then!

For my Iron Yard final project, I was paired with two really cool guys, one was a fellow UI design student, one was a python student. We created Bike MD. A motorcycle troubleshooting community.

For this project, since we only had 2.5 weeks, we decided to divide and conquer, we all had our strengths, so my UI friend took over most of the front-end coding, the python student took over the back-end, I took over the design direction and then moved to the second seat for front-end coding.

This project helped me dive into the user experience and the importance of testing. We created several user stories that helped us determine the needs of the project and we managed to tackle them beautifully in the end. Below you will see some of our user stories and the process:

Working with these two guys was amazing, we really made a great team, I managed to experience the music of Prince for the first time {don’t judge, I’m not from the US nor did I grow up in English speaking countries!} which turned into our anthem. We really pulled together day and night, pushed through and made a killer presentation and I’m super proud of it!

screencapture-bike-md-herokuapp-login-1497064773705

 

Prototyping is the best thing invented, like, ever!

Week 4! Survived it! Yeah! Currently looking for T-Shirts online that can describe how satisfying this week has been, will update on that later on, when I actually find one.

We did some Photoshop training, I’ve been using Adobe products for 15 years, so, this was kind of a breeze for me, which is great because I was able to focus on other things I needed a little polishing in {like CSS Codepens which I had a lot of fun making small landing pages in}.

For the bulk of the week though, remember the wireframe we created last week? Well, we used that to make an app design prototype. This was both incredibly fun, but I think I also drove myself a little crazy. I’m a color-lover, a funky, whimsy type of designer, and our app was for a bank, gah! If you knew me well, you’d find the humor in this, but let’s just say I’m not super awesome when it comes to grown up stuff like banks and whatnots. That aside, making sketches, wireframes, and then prototypes is something that’s not only super important, but a MUST for a UI designer. It’s a little time-consuming, but I learned very quickly the value of investing the extra time in the process when you start, so that the rest of the project goes smoother.

When we started this project, all we knew was that this fake bank was founded by a person who had no time to bank, so the name of “branchless bank” was invented, the idea was that it was all online-based. If you’re interested in viewing the research we did to create our projects, here’s mine. In sum, I wanted to create a banking app that would be easy to use to all people, keeping in mind all of the very busy customers out there, customers who travel a lot, customers that work from home, with kids, many meetings, or anyone who just plain-ole does not want to go to the bank! {me?}. I looked at some “competition” where Paypal, USAA and Simple were the biggest contenders.

 

I researched colors, which is a very wide topic, blue is very prevalent, but I also wanted to use grays and oranges, they just communicated “new”, “modern”, “different” to me, and, I really appreciated that, this is the color scheme I went with to start off, some slight variations on tones came after:

 

branchlesstypography

I made my first mock up using the old wireframe, then a second one, then a third one

screen-shot-2016-11-13-at-9-20-59-pm

 

Here’s when things got a little interesting, I was just not.happy with this design, there was “something” missing, I could not pinpoint what this was. Friday was here, and I only had the weekend to figure this out, as my project was due on Monday. On Friday, I created my first prototype, and, gave myself a pep-talk:  I have other homework, piles of laundry to do at home, 2 kids, 7 dogs, bunnies, hens … do I really need to beat this dead horse? Of course not!

However, I did beat the horse, I beat that poor horse so much, it felt like a scene of The Revenant {which, if you haven’t seen, just know it’s not really a “feel good” movie}. I asked a couple of my fellow students to take a look and let me know their thoughts, they did, and gave me great feedback, so I made a few changes; then, I showed my next prototype to another student, a couple of other changes, finally to a friend, she was underwhelmed with the design, this sent me on a spiral … she said, in her words, and I love her for it “it’s not the flashiest app I’ve seen, but you did a good job”.

Wait, what? No “wow” or “It’s so great”?! I love my friends, I love my friends, I love my friends.

Saturday came, and after a few hours of rest, I woke up to do a little more research, found the great work that the Capital One app team made in their banking app, you can read all about it here. And got just so inspired that I revamped the prototype, and, yes, I am happy with it now.

From this project I learned a ton of really cool things, Invision app is just beyond awesome and I’m sure I will be using it all the time. But the most valuable lesson I learned was patience. Patience to take my time to do comprehensive research, to plan designs with both the user and the developer in mind, patience to make changes to my initial plan as the process moves forward, and not whine about it {which I didn’t, I promise I didn’t, just ask anyone, I’ll give you names}. So, without further ado, here’s my final prototype. I hope you enjoy it, but if you don’t, that’s ok too, please let me know what you liked and didn’t like about it, I’m supposed to be OK with this feedback 🙂

This slideshow requires JavaScript.

Full Github repository can be found here.

Overnight, my 7th grader helped me to get crafty and make a little sketch work:

BranchlessSketches

WireframesBranchless

 

Designing all of the things…

Ah, week three, I love you!

This week we dove into design, which is my favorite subject, there is something so special about artwork, capturing ideas, creating emotions … just awesomeness.

The week started off with Illustrator, creating new logos for consideration on a real-life pet shop, I created three, but this one was my favorite:

paws

 

We were also introduced to a little bit of company identity planning and creating wireframes:

 

screen-shot-2016-11-06-at-10-05-09-pm

The funnest part for me was following Dribble’s UI Design Challenge, you have to be “invited” to be a designer on Dribble, so, as a class we joined Behance.com to submit our work, and I’ve been so excited about the welcoming comments and messages from the community at Behance, I think I will continue uploading designs there regardless because they are a really cool bunch of friendly people!

I designed a ton of fun things and uploaded them on there, I think my favorite one was the 404 page:

screen-shot-2016-11-06-at-10-13-43-pm

Lastly, we also met Jason Draper from Thoughtbot, and discussed the infamous “Imposter Syndrome”, it was so cool to be able to discuss this subject, it seems like it’s a very important thing to keep in mind as we grow into our careers, I also think that everyone, in most careers, have a level of this syndrome, but I think that unfortunately they translate into lots of negativity, poor leadership and just terrible workplace because nobody has named this issue as such in other industries. Very interesting.

I’m excited about what next week has for us, we will be starting Photoshop!

 

 

GitHub, let’s meet again!

IMG_0898.JPG

My last job was as the buyer at an e-commerce company, whenever I had technical issues, I’d contact engineering, who then politely requested me to “open a GitHub ticket”. Coming from the financial field, my next question was “what the heck is a GitHub, and, why can’t you just fix it”.

I once described submitting issues via Github as the “black whole of desperation”, because quite frankly, it was ridiculously difficult to understand this site, I couldn’t even understand the “why” this site existed to begin with. To someone who is not in the technical field, this website is very difficult to maneuver through, in retrospect, I think that the engineering team secretly knew this, and had a little fun with it.

Fast forward to now that I’m taking classes in The Iron Yard, I almost fell off my chair when our instructor announced we would be using it heavily. The only thing I could think was “how do I get out of this”, the answer to that was “you don’t, Eloisa, get a grip”.

Anyway, I think that learning GitHub last week was one of the biggest hurdles, but, I survived it … I still don’t know why I was asked to use it in my last job, but I know I will learn to love it, and will use it daily moving forward. I do adore the kitty mascot, and invested in their stickers, so, I’m committed now! No turning back!

Let’s see what next week has in store for us!

github

Other things I learned this week were more intensive CSS commands, including media queries, and Bootstrap, I’m super excited about what we will get to do this coming week!

“Good luck designing all of the UI’s”

No blog should start without a proper introduction, therefore: hello, there! Thank you for taking the time to get to know me a little bit, I hope you enjoy this ride!

I’m Eloisa, a surface design aficionado, seamstress,  artist,  meal-burner, self-appointed social media firecracker, and mom of 2 teenage girls, 11 hens, 7 dogs, 2 bunnies plus a guinea pig. I’ve started this blog as part of an assignment for my UI Design class at The Iron Yard Raleigh.

The idea of dropping everything I was doing, and run with this class actually came the day I was promoted in my last job. You see, I worked at a super fun, fresh, creative startup, I was constantly surrounded by like-minded people, wonderful work atmosphere, benefits that would make anyone jealous, an obvious growth path within the company in the finance field, and still, I hated my job.

The real problem was not the job, the problem was me, I somehow saw this job opportunity or a window to work in a creative field. I thought that maybe if I stuck to it long enough, I’d be able to switch gears within the same company but doing something creative like I always wanted. But, after 3 years, and having recently been turned down for a JR designer position, it was clear to me that the answer to my problem was to get all of the skills I needed, to get the job I really wanted.

We are all born with sets of skills that make us unique and good at what we do, I have always known I’m my best doing creative work, the idea of actually making a living out of it took almost 40 years, but, here I am.

I turned in my resignation, and, the day I left my husband was laid off his job — I could not think of a worse time for me to go back to school than this, luckily, my husband is also someone with special, very different, skills, and he landed a job within just a couple of weeks. Phew!

Emergency adverted, needless to say, this took a pretty heavy weight off my shoulders, and, after a couple of months of being “off”, I am now a proud survivor of week 1 training of UI design!

The night we met to install a few programs and welcoming the team of students to The Iron Yard, they were kind enough to take us out for dinner, as we left, our waiter says “Good luck designing all of the UI’s“, so, I really hope I do have luck with me!

My head is still spinning from all of the material we learned last week, I will note those at a later post as this one is starting to get a little long, thank you for reading, and, if you are a current or future UI Design student, Good luck designing all of the UI’s to you too!

Placeholder Image