Complete iPhone App UI redesign from start to finish
Hello Everyone,
I submitted my first app (Flo Hydraulic Calculator) to the app store in July and it was released on August 2nd. The was doing pretty well considering it is targeted for a small group of engineers. The app was featured in two civil engineering magazines. Even though it was gaining popularity among civil engineers but i was not too happy with the UI. For the first update I added an animation feature and an email report feature.
Then I decided to do a complete redesign of the app and my experience is as follows:
First I placed an add on 99 Designs, I selected the top tier service, it was $1000 . This apparently would attract the top designers. After about three days I received a few designs but I was not too happy with the work. I descried in detail what I was looking for and provided a screenshot of all the current views of the app. As well as a link to my webpage so they could read more about the apps features. Being detailed in your requirements is very important to anyone considering using 99 designs.
I decided to pull the design project because I was not happy with the submissions I was getting, some were nice but my main problem was the designers were not understanding iPhone design guidelines. I felt that if you are designing for the iPhone you should at least understand what segmented controls are for example and how they work, or tab bar controllers etc...
I thought to myself only I really know what I am looking for in the redesign of my app and decided to embark on the redesign myself. The entire process took 4 weeks from start to finish. Here is the breakdown:
2 Weeks - Graphic Design work in Photoshop
1 Week - Implementing all new graphics/animations in the App/Xcode
1 Week - App Store approval time
Some of the special features that I really am proud of are the custom Segmented Controls, and I know you cannot tell from the static images but the tab bar controller is fully animated. When the user clicks the tab bar item it goes from the alpha mask image to an animation of the pipe filling with water in color. Also some other things you cannot see without using the app, all of the buttons emit a glow when they are pressed. For example the info button has a blue glow, and the calculate button emits a green glow.
Although the app was the only one of it's kind for civil engineers, I wanted to do the redesign so the app could be the best it possibly could be. I have other apps that I am working on at the moment but decided that I wanted to get the app to a point I was happy with before proceeding.
Wow, severe graphics improvement in the app, and it looks so much better than the originals!
However, the icon is horrible!
Lol, I appreciate the feedback. The icon is supposed to represent a pipe with water in it... More specifically the bell (end) of a concrete pipe. What do you not like about it? Or is it just the whole thing?
The whole thing :S I have a very high critique of design, so maybe I am being too harsh. The 'pipe' looks more like the window to a submarine where there is water with a dodgy perspective outside of it.
Quote:
Originally Posted by dana0550
Lol, I appreciate the feedback. The icon is supposed to represent a pipe with water in it... More specifically the bell (end) of a concrete pipe. What do you not like about it? Or is it just the whole thing?
The whole thing :S I have a very high critique of design, so maybe I am being too harsh. The 'pipe' looks more like the window to a submarine where there is water with a dodgy perspective outside of it.
I see, I considered drawing the water flowing out of the pipe. But that may be too artistic for my skill set. I may have to get a professional to design the icon or go back to the original.
I can see what you mean about the window thing, I thought that while I was drawing it but in the end I thought it would be a better visual of pipe than an image from a front view perspective.
By the way I think the perspective of a 3D is correct, I actually do a lot of 3D drawing work in the engineering field.
I see, I considered drawing the water flowing out of the pipe. But that may be too artistic for my skill set. I may have to get a professional to design the icon or go back to the original.
I can see what you mean about the window thing, I thought that while I was drawing it but in the end I thought it would be a better visual of pipe than an image from a front view perspective.
By the way I think the perspective of a 3D is correct, I actually do a lot of 3D drawing work in the engineering field.
Looks like the users do as well, yesterday was a good day in sales and today it broke into top 200 grossing for the productivity category. Again showing that great design is worth it.
Yer I kinda agree that the icon does look a bit outdated. When I look at it I notice the round circle looks so basic. To me it looks like it is just a grey circle that had been given the effect of some bevel with depth, and then adding like a texture and some noise to it. If that was for $1000 then its not worth it. But alas it is an improvement to the previous Icon and I also agree that screenshots and Icon have a huge impact on sales and earnings. Congratulations..
Yer I kinda agree that the icon does look a bit outdated. When I look at it I notice the round circle looks so basic. To me it looks like it is just a grey circle that had been given the effect of some bevel with depth, and then adding like a texture and some noise to it. If that was for $1000 then its not worth it. But alas it is an improvement to the previous Icon and I also agree that screenshots and Icon have a huge impact on sales and earnings. Congratulations..
Thanks,
I did all of the design myself, the submissions I was receiving from 99 designs were not that great so I canceled the project. It was also because I do not think they were too familiar with designing for the iPhone.
As far as complexity, I think that is irrelevant. You are only looking at the pipe, there is the water effect, and the text and the gradient. I say it is irrelevant because simple does not necessarily mean it's bad.
Just take a look at the dock on your mac, the iTunes icon is simple to make for anyone who knows photoshop, for that matter even the photoshop icon is simple to make.
I made the icon to capture the civil engineer's attention. Any civil engineer who see's the smooth concrete texture knows right away, oh that is the end of an RCP.
And I think if anyone else did it, it would have cost at least a few thousand dollars. The number of images that went into the redesign from the tab bar to the segmented controls were quite a lot.
It all looks better when you see the app in person, a lot of the images are animated like that tab bar, and the segmented controls give off a glowing effect when selected.
As far as the screenshots go, I did not post them here but if you see the app page you will see that I tried to grab the users attention with them. I realize no one reads the description so I put some of the main features in the screenshots.
The main reason for this post was for people who wonder what goes into app redesign, I learned that it is a lot of work. It is not just a few images if you really want your app to be unique.
Like I said one of more interesting features is the tab bar, it is an empty pipe/channel and then when user clicks on it the color of the pipe fades in and then it fills with water.
If you have any other suggestions about the icon as far as what could be changed, that would be appreciated.
WOW, the updated UI is sexy as hell! Those designers did a great job, you paid them well!
I plan on updating my most popular App's GUI; from Tabs and ListViews to Buttons and a background. I hope to see a pretty good increase in sales!
Thanks Newb!
Sales been at least double every day from what they were before the update. I will also say the app itself is unique as far as the calculations go so I think the fact that the app is great coupled with the UI really help people make the $9.99 plunge.
I decided to redesign the app originally because I wanted the app to look as amazing as the features of the app itself. The sales increase was a nice surprise. I did no marketing so it must be engineers showing other coworkers. Word of mouth sales sort of thing. Quite interesting...
How long did it take you to do the design? I also find that pople on 99 designs don't have the experience designing iOS apps... It is like a small category on there.
Complete iPhone App UI redesign from start to finish
Linear Mode
