Design Challenge #1
Signup Form UI
So for my first design challenge from dailyui.co it said that I was to “Create a sign-up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can imagine.” Well… Recently I had solar panels put on the roof of my house and thought why not make an app for businesses to sign up and either be able to download a packet with relevant information, schedule someone to come out and give an estimate or do both. So I started with a mood board to get some photos and get my colors under control. The results are what you see below.
Keeping the colors in the blues and greens seemed like a great idea but I later found out that halfway through the construction that I was leaning hard on the blues and not using the greens at all. If it was not obvious enough I was using the adobe stock library (LOL) to find my images which maybe also pigeon-holed me into going with the blue and green color scheme. I think the correct answer to my color problem is to simplify by getting rid of one of the blue shades and one of the green shades. That would leave me with the 4 colors I used the most while laying out the application and 1 highlight color that would allow whatever is that color to stand out.
After selecting the colors and imagery I did some quick 6-8-5 sketching to get some quick and simple layout options down and on paper to ideate and mull over. Once I was satisfied with the flow and how each area was going to look and function, I jumped into Adobe XD and started plugging away laying things out. I realized that I did not have a logo for my fake business and just having text up at the top did not fit with the layout of the app, so I created one from shapes and some text
and I think it looks pretty good for a 5 minute quick logo. I never had a chance to work in Adobe XD while in school but it has started to become one of my favorite programs.
Once I finished playing around with the prototyping and colors, I was finally able to get a video of the walk-through of the app.
What Went Wrong & Could Have Been Done Better
Picking too many colors for the application instead of just focusing in on the layout and functionality. When filling out information and trying to read text, less (color) is more.
I think I went a little too far into allowing the user to download the information packets right to their phones. I could have had it send the packet to the email address they provided which would have been a better choice.
I also could have built out the scheduling an estimate portion of the the application. This would have allowed for a more robust walk-through but the design challenge only asked for the sign-up portion of the app and that is what I delivered.
A video of the walk-through for the ENERGY application can be found by clicking the button below.