Local e-Commerce gets a facelift!
During the second week of the UI module of the Ironhack UI/UX bootcamp, and the first week of remote learning using Zoom due to the COVID-19 pandemic we constructed a design system, which we could use to build the User Interface for our e-Commerce project from the first two weeks of the User Experience module. Although we did the first project of the course in groups, the UI was to be done individually.
To start the week we were tasked with doing a Visual Identity Competitive Analysis of the two direct competitors from the e-Commerce project. This included, but is not limited to researching which typefaces, fonts, colors, quotes, and textures each competitor used. I created artboards containing all these elements to gain an overview of what each competitor’s brand is trying to express visually.
After doing the visual identity competitive analysis I thought that both of the direct competitors focused entirely on children. The first competitor was a bit subdued in color and I felt they wanted to promote a chic visual identity. The second competitor was more vibrant with the color choice of their clothes.
With the visual identity competitive analysis complete I then moved on to create a Moodboard of our local e-commerce’s webshop. Again, an artboard was created and filled with ideas to help conceptualize the development of the future User Interface. This also gave me a tangible idea of how I wanted to proceed with creating my design system. While creating the moodboard and looking at my local e-Commerce’s current webshop, I decided I wanted to move from a more cute visual identity to a more 80’s retro look to promote the brands punky and cool vibes.
The creation of this design system helped me keep the pages visually consistent. I created the system using Sketch. I added a new typeface, as well as new primary and secondary colors. I chose the 80’s style Typeface called Skirmisher to serve as the new logo for the webshop, and Source Sans Pro for the heading, body, and button text. Source Sans Pro is a great readable font with a good x-height, that makes it a very accessible typeface.
I also added new colors for success, error, warning, and information states. With the colors and typography chosen I was able to create primary and secondary buttons with their corresponding states.
Then I created radio buttons, checkboxes, dropdowns, form fields, and icons. I could change these items colors easily through the use of creating symbols, and smart symbols. I only created the elements that I would need for the UI.
Once my design system was completed, I started on creating the new UI for the local e-Commerce webshop. With a very limited time to do the UI. I focused on the Homepage and Product Page. These two pages were the most important to complete. This is especially true for the product page, since this was the main focus of out UX Research. The following images were the result of my UI implementation. In my opinion, they gave off the retro punk feel well. I also felt that the bold and bright neon colors weren’t too over done, and that they were well balanced with enough white space. The important product information can all be seen “above the fold” and is accessible with minimal scrolling and clicking. I was quite pleased with the results!
Learnings and future iterations
After presenting my design system, and new UI to the rest of the class I got some good feedback on how to improve the layout even further. On the homepage, I first started playing around with the idea of adding products to the page, but I found it became too busy and decided against it. On another iteration I would like to play with the idea of adding product images again, because for some it may seem too ambiguous as too what is being sold. I totally get that, and think this would be a good solution. As for the product page, I will outline the circles for the colors and materials if they are disabled instead of having a subdued colors as some people may still want to click on them.