Rethinking and redesigning my first app after 6 years!

Pineapple
The Pineapple Slice
5 min readOct 23, 2019

The benefits of having OCD are simple, it took me 15 minutes and not hours to dig through my files to find my very first app designed back in 2013. I did not have any design background then and the only software I learnt was Coreldraw.

I took up a small project where I had to create a form during the Era where User experience and User Interface were mere words for me. Let’s call it the ‘Form app’

I took over to Photoshop with the idea of creating something that was easy on the eye and understandable. The results? Not so satisfying.

Here are the times where I use modern apps like Sketch and Adobe XD for all of my design work. However, when I look back, I understand that all it took was determination and an eye for detail to be where I am today. I still solve for all my clients in a similar fashion, I look for something easy on the eye and something that is understandable. However, with time I have added a few factors like uniqueness and disruptive user experiences that go behind every project.

What was the app about?

The old Sign up page

The form app removes the dependency of the signing up processes or filling any form in the future on any website or a mobile application.

Sounds ostensible, but it isn’t. It followed a simple idea, where a user would have to fill one form that is provided by the Form app which would then generate a unique ID.

Provide the Unique ID with password authentication and all the future forms would be filled in automatically.

Just the way how Facebook enables logins today. However, this app will also let you fill in Education details, job applications etc.

Let’s dig into the revamp of this application.

#1 The user experience

The form is a simple concept, however, it is still a dataset that consumes a considerable time of the user. While creating forms, it becomes imperative to inculcate a great user experience. The application created previously was confusing, without any hierarchy assigned to it.

Following a few basic principles, in the new designs, I have allowed the interface to guide the user across the entire application. Every step is labelled which makes the application more user-friendly.

#2 The layout

Although a wireframing is the standard way to determine the UX of the product I just dived into sketching out the layout which is a quick way to help me move into the visual elements required next.

The older design had no layout sketched out or heck, I didn’t even know what a layout was.

However, in the new design, I was inspired by material design since the application was on an Android phone but I also thought of mixing it up with some new elements to break away from the monotony of material design.

#3 The typography

I love type. The essence of type, when used effectively can take overtake the essence provided by other design elements like illustrations, icons and imagery radically.

The name of the app itself signifies the importance of the use of the correct typography in this application. The font utilized 6 years back in the app was “Building”, which is a condensed font. Such a font would not suit a content-heavy application as it would make it difficult to read continuous content. I switched the font to “Poppins” which is a clear and a rounded font, which does not display any harshness. The font is fun, light and so beautiful to look at, I thought it would be the perfect balance to keep the application simple yet engaging.

#4 Visual elements

To keep the visual identity of the application feel modern, I thought of going with lined, light iconography like Instagram and using illustrations instead of images.

In any indulging application, a sense of personalization is directly correlated to the amount of time the user spends on an application. Using light and delightful elements encourages users to go ahead and press the “Next” button.

Visual design is an extremely important part of UI that a lot of young designers miss out on. Visual design is not just the way the application looks but it has a lot to do with emotions of a user, it almost humanizes a mundane process like form filling.

At the same time, for applications like these should be made simple, and avoid heavy artwork which can serve as distraction points.

#5 Colors

I think a lot of upcoming design trends include a lot of lively colours. It helps users feel wonderful looking at positive colours like light blue, pink or yellow and so on. I didn’t want to lose the applications original colour; purple so I thought of just making it lighter and using lilac instead.

The final outcome!

As you can see, with just 5 simple steps you can give any of your designs a makeover. You just have to keep going at it, watch out for trends and develop your own style. I always tell my colleagues, design with 60% your heart and 40% of your head and you will bring any design to life!

The sign-up page. Using an illustrative approach.
The decluttered and simplified Homepage.
The form — Showcasing the clarity after adding the visual elements

If you like what you read, do clap for us and check out the articles recommended by us below :)

The effective utilization of white space in UI design

6 important UX considerations in a dashboard design!

5 UX tips that help you design forms correctly

5 secret tips for beginners on design wireframing

Want to say hi? Drop us a line on hello@pineapple.design

Check out our work!

--

--

Pineapple
The Pineapple Slice

We design holistic digital experiences that enrich human lives and help businesses grow. Let’s connect at hello@pineapple.design