Enhancing UI with Gestalt Principles
As a UX Designer, we strive to improve the user’s experience with a product through research, prototyping, testing, and so much more. No matter how great a product may be, there is always room for improvement because users’ wants and needs are constantly changing. It’s great practice to find existing interfaces and give a personal take on them based on design principles.
I selected the web app Closet Roulette to improve it’s landing page, sign in/sign up processes, and basic interactions within the app. This web app provides a way to capture an image and description of each of your clothing items in an online, personal catalog. It allows you to create outfits using your clothing items. It will also randomly match tops, bottoms, and shoes to help you plan an outfit. Then, the app will select an outfit from your clothing catalog, so you don’t have to mess up your closet in the outfit selection process. I had three hours to brainstorm, research, and create an improved design. Due to the time constraint, I used only the content provided and used design principles to restructure.
First, I did a quick competitive analysis to find similar web apps. GlamOutfitwas the closest to this product, and also had the most similar landing page. Outfittery and ClosetSpace were comparable too. They were all very image-heavy, which makes sense for most fashion-oriented websites.
Next, I began creating wireframes in Sketch. The original landing page hero section had good use of whitespace surrounding the text within the image, but it was missing a call to action. There was only a hero section on this page, so I thought adding a how-to section and footer would help improve its functionality. I thought having a fixed navigation bar would help the user as well. If I had more time, I would’ve added a testimonial section as well. Using different shades of gray blocks for text and images helped me focus on the visual hierarchy of the wireframe without worrying about the design, and also made it a lot easier to increase the fidelity later.
Then I began working on the sign-up and sign-in pages. Instead of it taking the user to a new page, figure/ground is used to create a pop-up. The two form fields have filler text which is the same content as their labels. The text is almost the same color as the field itself thus not providing enough contrast to be able to read it comfortably. That text is aligned to the left of the field which almost makes it seem unrelated to the label, which is center-aligned. The external login links are grouped together nicely at the bottom of the screen (although Github could probably be removed.)
Finally, I thought the dashboard was optimized ideally for mobile, but not very responsive for desktop. There was plenty of horizontal whitespace to be explored. I made the form fields longer and kept their proximity close. I increased the spacing between the form fields and image upload since they are different actions.
Even with my recommended improvements, there are still plenty of ways my own designs can be improved. After taking a step back I can see that there can be some more spacing added between the form labels and their fields. Adding drop shadows to the buttons could help with affordance. Plenty of content could be edited and added to this web app. Creating an established design system, text scale, or even a specified color palette would help guide better design decisions.
If you have any feedback or recommendations about this article, please leave a comment below! Also, feel free to contact me on social media:
Twitter | Instagram | LinkedIn | Email: kaylahrox@gmail.com | Behance | Dribbble