Macbook on a rock showcasing StyleLab's home page.
Stylelab logo svg

A social network built for users to experiment with style.

Case Study

The Problem

Modern social media feeds are designed to show us exactly what we want to see. Algorithms and tailored content comes at a cost, a lack of exploration. By relentlessly promoting similar content to what users have interacted with, it limits the discoverability to new forms of expression and style.

My Role

Design

Collaborated with a team to create site wireframes and a design kit focused on user-centric principles.

Development

I used both JavaScript and PHP to engineer both front and back-end functions of the platform. Using phpMyAdmin, I set up the site database to accomodate complex site information efficiently.

Posts along with their UI elements from StyleLab's interface

The Solution

We built StyleLab to connect personal expression and inspiration in fashion. Alongside my team, we designed and developed a fully functional social media platform rooted in personal expression of style and exploring other’s fashion interests. The simple and familiar interface allows for users to explore and learn about their fashion DNA. By quantifying style through post tags, StyleLab allows users to transform their personal taste into a visual ‘DNA’ make up, creating an area of conversation and a new form of expression online.

The Method

Once the problem was defined, I coordinated our team’s transition into Figma. We started with our low-fidelity wireframes to map out the core interactions of the platform. We then iterated our wireframes into high-fidelity page designs, prioritizing a strong user experience while balancing a clean site style with a sense of familiarity and warmth.

Through our development phase, we utilized PHP and Javascript to construct the dynamic and interactive social interface, supported by a MySQL relational database, to efficiently manage high-volume user-generated content.

Various UI elements from StyleLab's interface

Skills Used

Figma Github Group Leadership MySQL HTML5 JSON CSS3 PHP JavaScript

Project Showcase

StyleLab post page

Site confirmation of a new post.

StyleLab explore page

The explore page, featuring a horizontal scroll feature.

StyleLab profile page

A user's profile, featuring a "hover-to-reveal" fashion DNA function.

Mid-fidelity wireframes from StyleLab

Some mid-fidelity wireframes from the design process.

Some logomark variants for StyleLab

Some logomark variants for the brand.

Breaking down the StyleLab main logo

Breaking down the main logo's components.