Underground Visionaries


The Challenge

Underground Visionaries is a startup in the high-fashion clothing space. I was hired in 2013 to help create a website that can stand out, but at the same time blend in, with other popular high-end fashion brands.

My Role

My role involved researching the high fashion industry, creating the shopping experience, developing brand identity, and aligning the brand’s visual appeal with its competitors. I drew inspiration for Underground Visionaries from luxury fashion labels such as Common Projects, Comme-de-Garsons, and Yves Saint Laurent.


Brand Development

Researching websites with similar products gave me some surprising insight: minimalism is heavy in the industry. The stakeholders and I decided that we wanted minimalism to be as much of a product as their clothing. The advantage was two-fold: create a brand identity that blends in, but use the white space to highlight the product.

Mental Mapping

To develop the key features of the website, I wanted to know what the users’ needs were. I asked a few potential clients what their thought process would be if they were to go to shop for new clothing. This flowchart was the end result after taking the feedback into consideration:

The shop, aka the catalog, featuring never-ending scroll load, category lists, and very simple, straigh-to-the-point descriptions.
Early Sketches and Wireframe

The clients had a vague idea of how they wanted the website to look. This allowed me to focus on product presentation and user experience. My goal was to create an experience that allows the user to be as comfortable using the website as they are using a magazine.

I developed the wireframes while keeping in mind that a minimal website that is using white space will make the hierarchy of the elements easier to discover.
Too Much Minimalism

From early user feedback, we found that the issue with minimalism was that it made the website can seem skeletal and bland. I used font weight to my advantage to accentuate important details by making them larger, and used contrasting bold type and thin type to accentuate different objects. Then, I used motion to highlight user actions to create a layer of interactivity.

Ta da!

Finding a balance between too much white space and meaniningful white space was difficult. We settled on having a dark hero image as the navigation background so that the users do not get lost in the same color.

When the user goes on the main page their attention is guided to only 3 elements: the logo, the menu, and a preview of the clothing. The menu animates as the user hovers over it, providing an extra layer of interaction.

I created the lookbook to work on touch devices as well as traditional devices. The images slide into the middle of the page, mimicing how it feels to transition pages in a real book.

When designing the lookbook, I wanted it the user to. By creating a series of “peeking” images, the user knows if there are more images. The main photo will take up the majority of the screen space automatically.

The shop, aka the catalog, featuring never-ending scroll load, category lists, and very simple, straigh-to-the-point descriptions.

The catalog page was created to reduce the amount of clicking and moving the user has to do. I used a never-ending scroll feature to make shopping seamless. There is also an animation for filtering categories. When a user adds an item, the cart is updated and the user can “peek” at what they added. The cart page has more options, and payment/shipping is done all on one page. I used a Woocommerce backend to set up the shop and customized the experience using CSS and minimal Javascript.

Lessons Learned

If I were to approach the project again using the knowledge I have now, I would innovate to create a more intuitive shop using swipe gesture controls for touch, drag-and-drop for laptops and desktops. I would also like to have seen some parallax integrated into the design, preferrably the lookbook, some sketches of which I drafted below. Throughout the project, I learned how to create better information architechture using minimal design, discovered how reliable and strong a user’s mental map can be to the flow of a website.


Underground Visionaries has evolved into a gender-neutral clothing line called Openism.