In this series, I'm building a Software-as-a-Service product for syncing environment variables between team members. Since my background is mostly frontend, I'll be learning about backend technologies on the way, along with some UI/UX. You can read more about my concept and technology selection in my first post here.
The Challenge
Users of this product will be able to create multiple "Projects," which each have "environments" for managing variables. For example, for a Node.js API project, you might have a project called "My API Server" with two environments, "develop" and "production."
I started building the form for creating projects, using react-hook-form and some simple inputs. It came out like this:
...unfortunately, this was the most boring form I had ever seen! I decided I needed to redesign this to make it feel more like a polished, professional project than a bunch of text fields thrown together.
The Thought Process
I thought about varying it up a little bit by changing the Name field width and putting it on the same line as the Name label. While that helped, it was still super boring.
Then I took a step back. I started thinking about the big picture product. So I started thinking, how will the data from this form actually be displayed?
I threw this together quickly, showing projects as tiles with the project name and environments (plus I could've added the description).
Don't get me wrong, this design is ALSO super boring, but it gave me an idea: what if I added an icon to the project? For people who have a lot of projects, this would help them make a visual distinction between projects, without affecting the core functional goals of the project. Plus, it would make the UI look more user-friendly than a plain text dev console.
A Step in the Right Direction
I didn't want to create an image upload system for this simple feature: that would be too much work for me (as the developer) and for the users creating a project. But then what images could I use? Maybe an icon library? Or...
Emoji! Emoji are fun, available on all modern devices, and there's enough variety for people to choose an emoji related to their project. Maybe later I would also add the ability for users to pick a Letter/Color icon instead.
I explored some React emoji pickers online so I wouldn't have to build it myself, and eventually found Emoji Mart.
After adding the emoji picker and a display field, the Project Creation form looked like this:
That's... better... but still mostly boring, and the emoji looks weird as an afterthought.
Again, I thought about the big picture: how would I display this emoji? I imagine the layout of the project list display like this: the selected emoji, large enough to see on a quick glance, next to the name and description of the project.
Then I thought, why not display the form like that too? Then the project creation form would have conceptual symmetry with the project display list.
The Solution
I rewrote the project creation form to look more like a single row, with the currently-selected emoji next to the name and display fields, in the same place as they would be displayed. This was the final product:
I also made the Call-to-Action more distinct by using a bright background, and I added a scale-up micro-interaction on-hover.
You may have noticed the Project Key field missing. At first I tried adding it below the row, because the project key won't be displayed in the row later, but it looked weird being the only element outside. I also wanted to add some more information around the project key, so I moved the field to a modal which pops-up when "Create" is pressed. I'll write more about that in another post!
Conclusion
I'm really happy with the end result! It made the form more interesting by adding personality and making it sleek, and made the product overall feel more polished.
Thanks for reading! I hope this gave you some ideas for your own projects!
Follow me here or on Twitter for more updates and other content. Feel free to DM me for questions!
Top comments (0)