Optimize/Redesign layout of web app, especially mobile

Contest Brief

I need someone to help optimize the layout/design of my web app. The two app pages are 1) transform, and 2) artist browser. I've included pictures of my existing layout.

As a summary of what this interface is used for - people will choose an artist, select their controls, hit 'Generate Vocal', and then their resulting audio will appear under 'Output Audio'.

I've had a hard time determining how to layout desktop vs mobile, and it just doesn't feel great. For this contest, I'd like to see mockups for desktop screens, tablet screens, and mobile screens, for both the transform and artist browser pages. Wireframe is fine if it shows off everything properly. If you are good at TailwindCSS, we could also discuss further compensation to modify my existing design to fit the design that I choose.

The general issue is I don't feel the flex design works great I resize the screen. I have wondered if I should opt for a more fixed layout (with breakpoints for screen sizes) instead of the current setup.
Specific areas I need fixed/optimized:

Transform Page:
- The 'browse artists' button feels a bit out of place to me, but i don't know if there's a better place to put it
- There's empty space below the Artist Info section, which feels wrong to me
- For desktop view: Generate Vocal button is arguably the most important button on the whole app, yet feels a bit tucked off to the side, and the Output Audio section is also very important and seems a bit pasted onto the bottom of the window. I'm wondering if there's a better way to lay this all out.

Artist Browser Page:
- The 'preview' section is where people can listen to four different audio demos showing off the artist they're interested in. The current design of that element feels bad to me, especially on mobile - it's hard to even press the play buttons. Also, it just takes up a lot of room, which is an issue on smaller screen sizes. I'm wondering if there's a way to rethink how people listen to demos - for example, maybe there could be a single small play button, and the genre selection is part of the section above the artists (the "Filter by Tags" section). Open to ideas on that.
- The filtering by tags section doesn't work well on small screens either. I'm wondering if this should be re-designed, maybe with a filter button that pops up a selection of filters. Again, open to ideas.
- The select artist button is huge on desktop, but i'm not sure how to deal with that
- The text "Find the sound you want and hit Select to view transformation controls' is currently under 'Artist Browser' and i'm wondering if it could be in a better place than being right under the title of the window.


I think that covers my issues, please let me know if you have any questions, and I just want to reiterate that I am open to modifying the entire layout if needed.

Recommended Skills

Employer Feedback

“A+, would work with him again”

Profile image vocalistai, United States.

Top entries from this contest

View More Entries

Public Clarification Board

  • daffaalberta
    daffaalberta
    • 2 months ago

    Please don’t close the contest until time ends. I’m still working. Thanks

    • 2 months ago
  • mehergulati
    mehergulati
    • 2 months ago

    I'd be more inclined to participate if this was guaranteed

    • 2 months ago
  • ADMK SOLUTIONS (pvt)
    ADMK SOLUTIONS (pvt)
    • 2 months ago

    #guaranteed #guaranteed

    • 2 months ago
  • prokidsillustrat
    prokidsillustrat
    • 2 months ago

    I think we need to make some more changes to make the design more attractive. I can do that if you want. Kindly provide me the original files and connect with me. Thank you

    • 2 months ago
  • prokidsillustrat
    prokidsillustrat
    • 2 months ago

    Working on it

    • 2 months ago
    1. prokidsillustrat
      prokidsillustrat
      • 2 months ago

      Here are some good design ideas copied by others. So please message me to see my designs. No doubt I will design exactly as you want. Waiting for your message.

      • 2 months ago
  • Swarnapriya7
    Swarnapriya7
    • 2 months ago

    #guaranteed #sealed #sealed

    • 2 months ago

Show more comments

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!