Rampa

RAMPA
APP DESIGN

ROLE UX + GUI DESIGNER CONTEXT EASY FACEBOOK POSTS FOR SMBS DATE Nov 2016

INTRODUCTION

Mark and I met back in my previous job, as the UX-UI Designer of the company, and we made good friends. A few days before I left, he approached me with this fantastic idea of his: a brand new app. And he wanted me on his team.

The very next day I quit my job, Mark contacted me on Skype for our new enterprise together. It would be called RAMPA.

RAMPA is a ramp (in Spanish). And, besides the meaning Mark gave this name as a ramp-up for smbs to Facebook’s marketing world, he totally loved it! (lol)

THE MARKUPS

Mark is a Senior Developer. He started developing RAMPA from the back-end before, so he sent me a few screenshots of what it looked like until then.

Here they are:

So these where the mark-ups for the project:

1 RAMPA needs a logo.
2 RAMPA is intended for SMBs wanting to use Facebook as their online marketing tool, without the extra effort of having to write content.
3 Many of the SMBs RAMPA targets, don’t even have a business Facebook page up, so the system will work also for personal pages.
4 RAMPA will provide quality and segmented written content for business posts that will run viral on Facebook.
5 RAMPA is a wysiwyg app, very simple and straight forward. There are 2 main things you can do with it: a) Choose a post that suits your business needs / write a post. b) Upload a picture inside a designed frame, with your business signature on it.

THE LOGO

and a few ideas that helped defining…

Based on our target market, I assumed a thick, prominent logo with sharp, clear colors, would do better than a delicate one.

I had plenty of freedom to choose regarding fonts and colors. So I thought of shaping RAMPA’s logo with a high-techy approach yet without falling into the same old dark blue or gray most of the IT companies fall for.I went for PURPLE. A sharp yet friendly purple.

Here are the different options I gave Mark to choose from:

After some drilling and polishing, we finally had RAMPA’s logo!

OKAY…

Time to have some fun!

Mark and I searched for an image that would represent the idea of the app: the immediate; someone using his mobile device “on the go”, and a ramp in the background. Well, I happened to run into a great picture. We bought it!

And RAMPA’s look & feel was born…

ITERATING

RAMPA was getting its shape, but we were still far from reaching our second milestone. There were a few features required for editing the text and the image, and they were going to change the way things were until now.

Edit buttons: There were 3 edit buttons: text editing, phone number and website address.

Edit buttons: When tapped, the text editing button will become hovered – its background color changes to purple – and all the editable fields will get a purple tinted background.

Phone edit button: When tapped, the circled icon will turn into an ellipse to give room to type in the phone number that will appear on the post. The numeric keyboard will pop up as well.

Website address button: When tapped, the circled icon will turn into an ellipse to give room to type in the web address. With one tap out of the field, (in a range of 44px round) it’ll go back to be a circle and the information typed will be saved (I’ll take care of the feedback in short).

THE FLOW

RAMPA is an ongoing project that keeps iterating and developing.

Here’s a first flow of the visual design:

A FEW MORE SCREENS

The ERROR screen (404)

Within the markup of this project, I had to design a 404 error page for the app.

So I searched the net for ideas for Mark to choose from.
Here they are:

Thanks for watching!

See you on my next project…