I continue to have fun building my first ever web app, Hike. I use Adobe XD and Webflow to think through and build the interface. Among each step or sign of success there is a new problem—I love this.
Aside from this constant problem solving there is also making sure there are consistent and clear operations. To help, I started with the button styling.
There are four different colored buttons a user will experience: gray, light blue, blue, and red. The red one is a cancel or go back. When selected the user is expected to back out of what they got themselves into. The blue one implies that there will be more steps ahead that require the most thought out of all buttons. Then there's the light blue one. The expectation here is that when selected you don't have to do anything else. The app handles it. Lastly, there's the gray button. This one is the user's way to organize what they want.
Identifying these four seperate, but core functions of each button really helped design a cohesive user experience. There's now expected function and now any part of the interface has to follow these four expected functions for each button.
