Blog

How I came up with Proud interface look?

This post is one that’s close to my heart; because today I’m going to talk about app interface design. It’s what I do, and a subject I love to talk about. I’ve been successfully working in the field for many years now. So I want to share what works for me, and maybe it will give you your own ideas, or help you try new workflow methods that might be more efficient for you.

My app interface design workflow

I have my own workflow for designing app interfaces. First off, I start with market research. I study the big players; I’m looking for those eye-catching designs, you know the ones that really draw attention. Obviously these are the big rollers so they get the attention of millions, right? I take note positives and negatives of every app I look at. I also pay attention to any user reviews that are available. After doing a little research, I jot down my users’ problems and frustrations, then I analyze how an app can solve the problem. I write the most important features on one list and least important on another.

Once I have my two lists, I’m ready to start sketching. At first I was too proud of myself; once I had an idea, I was blindly convinced I knew exactly what the interface should look like. So I immediately started working in Photoshop. What a big mistake that was. I did that three times and the interfaces were not even slightly as good as last and best one I made when I sketched it with my pen.

Interfaces

1. Duolingo style

I love Duolingo. When I used their iPhone app I was really surprised it was free, beautiful, useful and the animations and transitions were outstanding. I decided I would use their rounded corners style, bold font and vibrant colors. At that moment, I hadn’t even named the app yet. The “Proud” name didn’t even figure into the scenario yet.

ui-duolingo-5

As you can see, I hinted a lot of features there: tags, people tagging, sublists etc. The design was strong and stable, but a bit empty for me, a little too simplistic, without a proper soul.

2. iOS7 style

After doing the first design, I showed it to a friend named Sebastian. He said it was nice but when I showed him the Swipes app’s interface he thought it was amazing. I knew I wasn’t there yet with mine. Swipes represented typical iOS7 interface style. So I started to watch WWDC2013 Videos about App Interface Design. I made lots of notes. Then sat down and created this interface:

ui-ios7-14-1024x605

What I personally loved about it is that the navbar hinted the app’s flow. Also the app does not have any visible icon: it is only text based. This is something that seemed to stand out for me.

3. Medium style

I’m a big Medium app fan. I love the simplicity of the app, great typeface and what’s most important: the content they provide to their readers. The articles written by people, for people were terrific and a joy to read. I didn’t start the interface with the list here. I decided to do a Dashboard for a list first (I didn’t even know Proud needed dashboard then):

ui-medium-03-1024x605

As you can see, I transformed the previous navbar flow of the app into a 3 part task. From this screen, I designed the list view:

ui-medium-02-1024x605

A bit too simplistic, boring and ugly in my opinion. This was another project my trash bin was happy to eat :).

4. The ultimate vision style

I didn’t know whether this one would work or not. For many weeks I knew I need to work on next style as I was still not sure which design was the best one. But as I was struggling with my Master’s Thesis, an idea came to me. Ahh this creativity process :D. Distract your attention with boring stuff and great things will come into your mind. Quickly I grabbed my pen and started jotting the ideas down:

photo-1024x768

I looked for some inspirations on rounded style and shapes. After some research I came up with this:

GUI-merged-1024x605

I loved it. I showed it to my girlfriend, my friends and everyone. They all thought it was the best. After showing the interface to several people in the business world, they all agreed, this one was the best design. Someone even suggested it was a “Sexy design.” A nice clear and big font, engaging colors (blue: organization, orange: action, green: relax), the Proud logo in the navbar. I decided I would put the Medium app’s Dashboard:

GUI-merged-3-1024x605

Yeah, It was working here like a charm. Warning: the dashboard will not be available in the first beta versions. There is so much more work needed before I make it available.

This is mainly about the feel, not the look

This is the stationary interface design only. I’ll know if it’s good after people will use it. I will listen to their feedback, ask for features, craft better versions etc. But I needed a starting point. The things I show you here are just the look of the app. The feel is much more important for me and the user. And it is something I’m in process of designing right now, together with volunteer Interaction and Graphic Designer: Tomasz Jędrak. I hope to write more about the results in a few weeks.

I want to focus on developing the MVP (0.1) version of Proud. If you wish to apply for beta that will run very soon, go to http://useproud.com/beta/ There are still some places left. If you like the way Proud looks and you are curious about how it’s going to feel when finished, don’t wait and subscribe now to Proud’s waiting list. Use the form on the bottom-right hand side of the website, or on the main webpage: http://useproud.com/

Leave a Comment

Your email address will not be published. Required fields are marked *