Redesign the ODK-X Survey app icon

[maprehensive]

The current Survey app icon is not branded ODK-X, and do not clearly communicate the core app function.

This task is to redesign the app icon to be:

• Recognisable as applications in the ODK-X suite of tools
• Ideally incorporating the ODK-X logo (note this issue for Logo refresh Refresh the ODK-X logo #355)
• can be distinguished as the Survey app without accompanying text
• Preferably does not rely on the app name in the icon

App icons should be created as SVG format and be clear and legible at small sizes, such as 20x20px

You do not need to be assigned to this issue to work on it for an Outreachy application

[Karimatu05]

Hi, am Outreachy applicant. I would love to work on this please @maprehensive

[Redeem-Grimm-Satoshi]

@maprehensive sent a PR for the first issue, Can I draft out different versions of this ODK-X Survey App Icon?

[maprehensive]

@maprehensive sent a PR for the first issue, Can I draft out different versions of this ODK-X Survey App Icon?

Yes, that's a good way to approach this task. We will then provide feedback on the designs and you can iterate again.

[maprehensive]

Hi, am Outreachy applicant. I would love to work on this please @maprehensive

Sure thing @Karimatu05 , I will assign you.

[jessjaey]

@maprehensive can I be assigned this

[Thimmo]

Hello @maprehensive Can I also be assigned to join @Karimatu05 in fixing this issue

[Karimatu05]

Hi, am Outreachy applicant. I would love to work on this please @maprehensive

Sure thing @Karimatu05 , I will assign you.

Thanks but am a UI\UX designer so would i also send a pull request or i can attach my contribution to the issues am assigned ? @maprehensive

[Karimatu05]

@maprehensive can u send us where we can get the complete design so that we can make the icons changes

[jessjaey]

@maprehensive
Please review my design on the Survey app icon icon

[Karimatu05]

@maprehensive this is what i came up with. Your feedbacks are welcome thank you.

[Augusta2]

Hello @maprehensive I would love to work on this

[jessjaey]

I put your feedback into consideration for my iterations of the app icons

[Cveman1]

I put your feedback into consideration for my iterations of the app icons

I love your new iterations, a bit sleek

[jessjaey]

I put your feedback into consideration for my iterations of the app icons

I love your new iterations, a bit sleek

Thankyou for your feedback ✨

[Grace-io]

Hi @maprehensive . this was what i came up with

Looking forward to your feedbacks

[Itsmiracle1130]

Kindly review this I would like to know what you think

[Thimmo]

Hello @maprehensive,
Here is what I have come up with for the survey app icon.

For accessibility, I also tested the logo for distortion in different sizes.

I'd also appreciate your feedback.

[maprehensive]

@jessjaey Great work!

Your concepts are very polished, the gradient gives it really professional look.

I like the way the first iteration promotes the document / list icon – it focusses on the function of the app.

A question to help with the next iteration – which icon communicates the function of the app better - the document icon, or the document with the list?

Great work, this is really good.

[maprehensive]

@Karimatu05 Good job.

Great to see the iterations, the use of the brand colors and seeing the icon placed in the header is really helpful - we get to see how it will work!

For your next iteration see if you can bring your ideas together into one strong icon:

• selecting the color you think will work best
• choose between the outline or solid color treatment
• choose between having the ODK-X logo in the icon or sitting underneath

The ideas are strong – look forward to see how you bring it together!

[maprehensive]

@Grace-io This is a really unique idea - well done.

The presentation and rationale is really good. The explanation of the technical design choices is a good thing to include – it shows how much thought has gone into the idea.

And showing the icon in different treatments – mono, white background, color background – really helps show how it will work.

In your next iteration you could try:

• using fewer colors - simplifying can really strengthen a design
• showing the icon in context - e.g. the app header with the app name next to it

Look forward to seeing where you take this.

[maprehensive]

@Itsmiracle1130 This is a very distinct and eye-catching design.

The incorporation of parts of the logo and clipboard is well done.

I would be interested to see:

• some of your design rationale / decisions written down
• your summary of what the final icon shape is meant to represent
• versions using fewer colors - simplifying can really strengthen a design
• showing the icon in context - e.g. the app header with the app name next to it

Well done, this is very inventive.

[maprehensive]

@Thimmo This is a nice execution, I like the way you've brought your ideas together.

Good communication of the design rationale, and it's great to see the different sizes.

I would be interested to see:

• an iteration on the sizes of the elements in the icon - the checkboxes, list lines, ODK-X logo - the balance doesn't feel quite right
• Could the tick be incorporated into a check box? that may still communicate the idea, but simplify the overall execution
• versions using fewer colors - simplifying can really strengthen a design
• showing the icon in context - e.g. the app header with the app name next to it

Congratulations, this is looking very promising.

[Grace-io]

@Grace-io This is a really unique idea - well done.

The presentation and rationale is really good. The explanation of the technical design choices is a good thing to include – it shows how much thought has gone into the idea.

And showing the icon in different treatments – mono, white background, color background – really helps show how it will work.

In your next iteration you could try:

• using fewer colors - simplifying can really strengthen a design
• showing the icon in context - e.g. the app header with the app name next to it

Look forward to seeing where you take this.

Thank you for the feedback @maprehensive
I will ensure that I implement them in my next iteration.

[jessjaey]

@maprehensive Thankyou for your feedback
I'll work on it✨

@jessjaey Great work!

Your concepts are very polished, the gradient gives it really professional look.

I like the way the first iteration promotes the document / list icon – it focusses on the function of the app.

A question to help with the next iteration – which icon communicates the function of the app better - the document icon, or the document with the list?

Great work, this is really good.

[Itsmiracle1130]

@Itsmiracle1130 This is a very distinct and eye-catching design.

The incorporation of parts of the logo and clipboard is well done.

I would be interested to see:

• some of your design rationale / decisions written down

• your summary of what the final icon shape is meant to represent

• versions using fewer colors - simplifying can really strengthen a design

• showing the icon in context - e.g. the app header with the app name next to it

Well done, this is very inventive.

Thanks for your feedback @maprehensive ,all observations are duly noted and will be effected as requested in my iteration

[Karimatu05]

@Karimatu05 This is great. Clean and simple, and I like the consistency you've got across your different app icons.
The icon is a little big in the mockups compared to the navigation icons - it's approx twice the height now. You could try bringing the size down to see if it still works well in the app header.
Nice work, this is looking really good.

okay sir, i would make some changes now. thank you

@maprehensive here is the correction what do you think about it please your feedbacks are welcome and please the project timeline are we explaining our design brief more, that's our contribution or we are doing something different?

[Grace-io]

@maprehensive Thank you for your feedbacks. In this iteration, I reviewed the spacing of the list and changed the strokes to solid lines.

[Itsmiracle1130]

@Itsmiracle1130 Great iteration with a very clear explanation of the thought process.

The use of the X is clever, but it is not standing out, especially smaller sizes. You could explore how to make this more prominent by reducing the lines, changing color, size or something else!

Good to see the color variations – which color do you think works best, and why?

Thank you!

@maprehensive I tried to work around the x like you said and I came up with this, I'll really like to know what you think about it

.

[AnishaSingh0118]

Hello @maprehensive I have came up with these ideas in non copyrighted manner.
Kindly provide feedback.

Design 1 :

Design 2 :

Design 3 :

Design 4 :

[010220010]

Hello @maprehensive, this is to present my little bit on the survey logo redesign I'll be waiting on your review , thank you.

[Redeem-Grimm-Satoshi]

@maprehensive Feedback Appreciated.

[Techxie-bc]

Can I work on this issue?

[maprehensive]

Can I work on this issue?

@Techxie-bc Yes, go ahead 😀

[hamna456]

Hey @maprehensive, I'm eager to contribute! Could you assign me to this task, please? It's something I'd really enjoy working on.

[maprehensive]

Hey @maprehensive, I'm eager to contribute! Could you assign me to this task, please? It's something I'd really enjoy working on.

Yes please go ahead

[hamna456]

@maprehensive, I have devised these designs for your consideration. Should you wish for any alterations or adjustments, I am completely open to your suggestions. Your feedback is invaluable to me.😊

[siva224513]

i would like to working on this issue

[Arnav2824]

Hey @maprehensive, I have designed the following logos, taking inspiration from the earlier suggested designs. I would really appreciate it if you could review them and give me your feedback.

[maprehensive]

@maprehensive, I have devised these designs for your consideration. Should you wish for any alterations or adjustments, I am completely open to your suggestions. Your feedback is invaluable to me.😊

Lots of good ideas in these designs!

Things to think about:

• Will the design work well at small scale?
• Do you need the app name incorporated into the logo?
• Which is your preferred design and why?

[maprehensive]

Hey @maprehensive, I have designed the following logos, taking inspiration from the earlier suggested designs. I would really appreciate it if you could review them and give me your feedback.

This is a good start. Simple and clean.

Things to think about:

• Will the design work well at small scale? The lines are quite fine and detailed.
• Do you need the app name incorporated into the logo?
• Which is your preferred design and why?

[hamna456]

@maprehensive, I have devised the design for your consideration taking into consideration your previous feedback. Should you wish for any alterations or adjustments, I am completely open to your suggestions. Your feedback is invaluable to me.😊

Previous Design

Incorporating App Name into Logo

While it's crucial to maintain visibility even at smaller scales, I personally believe that since the application name is already present within the app itself, there might be less necessity to include it in the logo. It seems that the icon alone effectively communicates the identity of the app.

Preferred Design: Enhanced Clarity and Color Scheme

Among the designs, Design 3 stands out to me due to its clarity and adherence to the ODK-X theme colors. I've further refined this design to enhance the visibility of the logo. Utilizing similar and lighter shades from the ODK-X logo's color palette, I've adjusted the design for better visual appeal. Additionally, I've introduced a subtle blue shade in the background to accentuate the logo further.

Modified Design

Below is a visualization of modified icon :

Modified Design Small Scale Visualization

Below is a visualization of how the icon would appear on a mobile device:

[Arnav2824]

Hey @maprehensive , after your feedback I reconsidered my designs and also modified them a bit.

Earlier Designs

Integrating Application Logo

I considered integrating application name in the icon but that would just make the icon too cluttered. That's why I think it would be better to just let the designs and then maybe the splash screen can have the name of the application, that should be enough for the users to recognize the app.

My preferred design

To be honest I preferred the second variation more because of its simplicity and cleanliness. I have tried to modify that design a bit in an effort to make it even better ,

New Designs

I also tested them using certain mock-ups.

Mock-ups

I would really appreciate it if you could go through them and provide me with your valuable feedback.

[maprehensive]

@hamna456 Nice work.

The rationalisation for the preferred logo is good, and you've made good improvements. It's looking good.

[maprehensive]

@Arnav2824 Good improvements!

The updates give the logo a stronger presence and improved clarity.

Do you have the latest ODK-X mark in there? It looks like the old version with lighter strokes.

And a minor note - since ODK-X is an Android only app it's better to use Android for mockups, not iOS.

[hamna456]

@hamna456 Nice work.

The rationalisation for the preferred logo is good, and you've made good improvements. It's looking good.

@maprehensive I apologize for the delay in responding; I was preoccupied with exams. Thank you for your valuable feedback.😊