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

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s