Redesign the ODK-X Services app icon

[maprehensive]

The current Services 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 https://github.com/odk-x/tool-suite-X/issues/355)
• can be distinguished as the Services 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

[Cveman1]

I'd like to try my hands on this @maprehensive

[julian55455]

Hi @maprehensive @wbrunette @elmps2018.... Can you assign this to me please

[julian55455]

@maprehensive @elmps @wbrunette can you take a review at this!

[maprehensive]

@julian55455 @Cveman1 you're assigned. Thanks :)

[maprehensive]

@julian55455 That's a good start!

My suggestions:

• review at small sizes
• try some variations on the blue cloud – I don't think it does a good job of communicating the function of the app
• write some explanation of your design decisions with the next iteration

Good job - keep going!

[Oluwatobi1992]

Hello @maprehensive I would like to be assigned to this task too

[jessjaey]

@maprehensive Can I be assigned this too?

[elmps2018]

@Oluwatobi1992 and @jessjaey assigned you as well! Look forward to seeing everyone's ideas!

[jessjaey]

Thankyouuuuuu

[jessjaey]

@maprehensive @elmps2018 I made different variations for the service app icon Please look through and review.

[Daveojoe]

I am David Joseph (davejoe) and I am an outreachy applicant, I will like to be assigned on the services app icon @elmps2018

[elmps2018]

Hi @Daveojoe I assigned you as well!

[Daveojoe]

Thanks @elmps2018

[Augusta2]

Hello @maprehensive I would love to work on this

[salmasabo]

I made different variations for the service app icon Please look through and review. Hi Jess.! I'm salma and I'd like to connect with you if you don't mind

[jessjaey]

I made different variations for the service app icon Please look through and review. Hi Jess.! I'm salma and I'd like to connect with you if you don't mind

Yes Ofcourse If you're on the slack channel, Send me a message: Jessica Alexandra jide

[maprehensive]

@maprehensive @elmps2018 I made different variations for the service app icon Please look through and review.

@jessjaey This is great. Love to see the variations and notes on design choices.

For the next iteration, I would focus on making the idea work at a small size. The ODK-X logo won't be clear if the overall icon is 20x20px.

Thank you!

[jessjaey]

@maprehensive Thankyou for your feedback , Noted! I'll work on the next iteration with this in mind

[Cveman1]

Hi @maprehensive, here's an iteration of the ODK-X logo.

I took the reduction route to make the logo more simple and minimal. This follows Dieter Ram's 10th principle of design. that says 'Good design involves little design as possible.

Since the Services app provides services to be used by all the other ODK-X tools and allows the exchange of data, I figure the Wifi icon with the visual style of ODK might just be enough to represent the Services app.

Description:

• This logo concentrates on the essential brand aspects and its communication.
• It maintains the brand’s visual language and colours
• It is easily memorable as a logomark and leaves a lasting impression on users.
• It's scalable for any size and screen
• It's simple.

I'm certain more iterations will lead to more improvements in the logo.

What do you think?

[JessicaItepu]

Hello @maprehensive may i please be assigned to this task... i would really appreciate

[JessicaItepu]

Hi @maprehensive, here's an iteration of the ODK-X logo.

I took the reduction route to make the logo more simple and minimal. This follows Dieter Ram's 10th principle of design. that says 'Good design involves little design as possible.

Description:

• This logo concentrates on the essential brand aspects and its communication.
• It maintains the brand’s visual language and colours
• It is easily memorable as a logomark and leaves a lasting impression on users.
• It's scalable for any size and screen
• It's simple.

I'm certain more iterations will lead to more improvements in the logo.

What do you think?

I like how your brain works.. this is nice

[jessjaey]

Hello @maprehensive may i please be assigned to this task... i would really appreciate

Hi Jessica Our mentor says You can contribute to any issues without being assigned.

[JessicaItepu]

Hello @maprehensive may i please be assigned to this task... i would really appreciate

Hi Jessica Our mentor says You can contribute to any issues without being assigned.

Oh wow. Thank you

[jessjaey]

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

[JessicaItepu]

@maprehensive @elmps2018 kindly review this, i would love to get a feedback. Thanks in advance.

[Augusta2]

Hello @maprehensive I did my best to redesign the icons following the ODX-K design guidelines. This is my first time designing a logo and I am open to corrections and critiques. Thank you

This is the first Icon I am proposing

This is the link to the Project Proposal

[Augusta2]

@maprehensive This is the Second Icon i came up with. This is the link to the Project Proposal

[Cveman1]

Hi @maprehensive, here's an iteration of the ODK-X logo. I took the reduction route to make the logo more simple and minimal. This follows Dieter Ram's 10th principle of design. that says 'Good design involves little design as possible. Description:

• This logo concentrates on the essential brand aspects and its communication.
• It maintains the brand’s visual language and colours
• It is easily memorable as a logomark and leaves a lasting impression on users.
• It's scalable for any size and screen
• It's simple.

I'm certain more iterations will lead to more improvements in the logo. What do you think?

I like how your brain works.. this is nice

Thank you @JessicaItepu, you are smart-much too!

[maprehensive]

Hi @maprehensive, here's an iteration of the ODK-X logo.

I took the reduction route to make the logo more simple and minimal. This follows Dieter Ram's 10th principle of design. that says 'Good design involves little design as possible.

Description:

• This logo concentrates on the essential brand aspects and its communication.
• It maintains the brand’s visual language and colours
• It is easily memorable as a logomark and leaves a lasting impression on users.
• It's scalable for any size and screen
• It's simple.

I'm certain more iterations will lead to more improvements in the logo.

What do you think?

@Cveman1 Strong concept and design process, very well explained.

Considerations for the next iteration: Try with different treatments:

• in the header with the app name next to it
• in the status bar when Services is synching (screenshot below)

And think about whether it is recognizable enough with / without the color? There may be a need to integrate something more from the ODK-X logo to increase the recognition factor.

Great work!

[maprehensive]

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

@jessjaey Nice iteration – that's a good improvement with a good rationale.

Some thoughts for the next iteration:

• create smaller size versions and view them on a phone, this can help check whether the icon will work in different conditions
• because the lines are quite light, the icon doesn't have a strong presence. You could try filling in the container (cloud / rectangle), or thickening the lines you use to make it visually more pronounced

Good work, keep it up!

[maprehensive]

@maprehensive @elmps2018 kindly review this, i would love to get a feedback. Thanks in advance.

@JessicaItepu Nice work, I like the ideas and the presentation is good.

I'd like to see this at smaller sizes to see if the three elements - logo, cloud and 'wifi' thing - will all be clear when the whole icon is at 20 x 20.

Because you've got a lot of ideas in the icon, you could try taking something away to strengthen the overall execution. For example - reduce the colors used, or try without the cloud or wifi thing.

And note that you've used the ODK logo - which is different project - so you should update that to the ODK-X logo.

Good stuff. Look forward to another iteration!

[maprehensive]

@maprehensive This is the Second Icon i came up with. This is the link to the Project Proposal

@Augusta2 Great work exploring multiple ideas and showing your design rationale. I can see a lot of work has gone into this.

I would try these icons at smaller sizes and see how the smaller elements - the cog, the wifi thing - hold up when they're reduced in size. It may be a challenge to get all the elements to work well together at the small sizes.

Try with different treatments:

• in the header with the app name next to it
• in the status bar when Services is synching

And note that you've used the ODK logo - which is different project - so you should update that to the ODK-X logo.

Thanks! Can't wait to see the next version.

[Cveman1]

Thanks for your feedback.

I perfectly understand what you mean, I'll put them to different use cases and test in my future iterations.

Hi @maprehensive, here's an iteration of the ODK-X logo. I took the reduction route to make the logo more simple and minimal. This follows Dieter Ram's 10th principle of design. that says 'Good design involves little design as possible. Description:

• This logo concentrates on the essential brand aspects and its communication.
• It maintains the brand’s visual language and colours
• It is easily memorable as a logomark and leaves a lasting impression on users.
• It's scalable for any size and screen
• It's simple.

I'm certain more iterations will lead to more improvements in the logo. What do you think?

@Cveman1 Strong concept and design process, very well explained.

Considerations for the next iteration: Try with different treatments:

• in the header with the app name next to it
• in the status bar when Services is synching (screenshot below)

And think about whether it is recognizable enough with / without the color? There may be a need to integrate something more from the ODK-X logo to increase the recognition factor.

Great work!

[JessicaItepu]

Thank you @maprehensive for your kind feedback, i tried to put your suggestions into these redesigns. I changed the logo used from ODK to ODK-X and tried reducing the colours to strenghten the overall execution like you said. I also presented these in smaller sizes and showed them in dark modes. I hope this iterations are to your liking. Thank you very much.

[JessicaItepu]

@maprehensive These are what some of the designs look like in the header with the app name next to it like you suggested.

[jessjaey]

Thankyou for your feedback I'll work on it✨

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

@jessjaey Nice iteration – that's a good improvement with a good rationale.

Some thoughts for the next iteration:

• create smaller size versions and view them on a phone, this can help check whether the icon will work in different conditions

• because the lines are quite light, the icon doesn't have a strong presence. You could try filling in the container (cloud / rectangle), or thickening the lines you use to make it visually more pronounced

Good work, keep it up!

[jessjaey]

@maprehensive Please review my design,I put your feedback into consideration for my iterations of the app icons

[Augusta2]

Good day @maprehensive

I changed the design based on your instructions and added the icon to the status bar and the Header.

[maprehensive]

@JessicaItepu That looks really good!

All variations look strong to me. The outline weight is good, and simplifying to blue makes it clearer.

This is great for your application. You can keep iterating if you like, but this is plenty if you'd like to look at other issues.

Thanks!

[maprehensive]

@jessjaey This iteration is really clear and simple - nice work!

I think the ODK-X logo is still a little hard to see (my eyesight is quite bad 🤓). One suggestion is to slightly increase the whitespace around the logo – that can help bring clarity at small sizes.

But this is minor feedback - it's a good iteration and the icon has really progressed. This will make a good contribution to your application.

Thank you!

[maprehensive]

@Augusta2 Good work - great to see the variations in context.

I have one suggestion - try removing the white background behind the ODK-X logo - if you can integrate the logo with a transparent background it will give it extra 'polish'

Thanks for iterating on this, it's really good to see the progression of the work!

[Augusta2]

@maprehensive I wish I can get the SVG of the logo. Can anyone help me out?

[JessicaItepu]

@JessicaItepu That looks really good!

All variations look strong to me. The outline weight is good, and simplifying to blue makes it clearer.

This is great for your application. You can keep iterating if you like, but this is plenty if you'd like to look at other issues.

Thanks!

Thank you so much.. @maprehensive see you in other projects

[Augusta2]

@maprehensive This is my design without the white background.

[Joyfro]

@maprehensive Kindly review my services app logo redesign. I would appreciate a feedback , thank you

[Karimatu05]

hello @maprehensive what do you think on this? Please i will be waiting for your feedback, thank you.

[BlueSkiez-dev]

Hi @maprehensive @wbrunette Here is my submission for the services icon redesign.

I'd love to know your thoughts on this.

[JessicaItepu]

Hi @maprehensive @wbrunette Here is my submission for the services icon redesign.

I'd love to know your thoughts on this.

Let me be the first to say this is absolutely beautiful

[jessjaey]

Hi @maprehensive @wbrunette

Here is my submission for the services icon redesign.

I'd love to know your thoughts on this.

This is sleekkkk I love it!!! Nice one✨

[BlueSkiez-dev]

@JessicaItepu @jessjaey Thank you 🥹