Lesley Burr
static1.squarespace.jpg

Parallel 42

Final project for the Starter League, Friday, June 14, 2013.

Objective

What is Parallel 42?

Problem: It is difficult to find menswear and womenswear that is both high fashion and affordable.

Solution: Parallel 42 will provide a platform that facilitates the search for affordable high fashion and directs customers to purchase these products.

How does this work? Fashion enthusiasts submit photos of high fashion looks they would like to own to our platform. Submitted looks are reviewed and curated by a team of style-experts. Approved looks are published to the website. Visitors to the site can then help recreate each look by contributing links to purchase clothing items that are similar and more affordable.

Responsibilities

Visual design and front-end development

Used

Adobe Photoshop CS6

Website Design Mockups

Initial Homepage Concept

The first mockup of the website's homepage envisioned it as behaving like a blog, with each look its own post. It placed emphasis on photography and streetstyle. But as a result the brand was de-emphasized, and the purpose of the website was unclear -- was it a typical fashion blog, or was it a shopping app that did much more?

Revised Homepage Concept

To emphasize the brand and the website's purpose, I revised the homepage. Instead of looking like a blog, it became an introduction to the whole website, meant to orient users and guide them through what they could do on the site. Unfortunately, this didn't quite work either. The message was still unclear, the large buttons were stark and cumbersome, and the yellow pentagon shape combined with the background image was awkward and distracting.

Final Homepage Concept

I nixed the pentagon shape and created a simpler triangular shape, made from the streetstyle photograph itself. It formed an arrow pointing downwards, subtly indicating to users that they could scroll down to read more information. Instead of front-loading the homepage with some much information above the fold, I kept the visuals and call-to-action simple. The buttons were moved to the top fixed navigation bar, so new users could focus on scrolling down to read about the site, but familiar users could easily access the actions they wanted to do.

Explore Page Concept

I still liked the idea of the fashionable outfits reading like a blog, so I moved the concept to the "Explore" page. When users browse the latest looks they can shop, they all show up in a steady blog, or Pinterest-like feed, with a featured look at the top. The captions are simple to keep the focus on the main purpose of the site -- clothing. The featured look is in bold color, and the subsequent looks are slightly faded. When a user hovers over one of the looks before clicking, the image comes into full color and focus to indicate the user's selection.

Individual Look Concept

Once a user clicks on an outfit from the "Explore" stream, they are taken to a page where they can do three things: 1) shop articles of clothing similar to what is in the picture, 2) read more about the outfit, and 3) suggest a style "parallel" to shop. The app is all about shopping, so that feature had the most prominence. A user could hover over the image on the left and see each article of clothing labeled with a number. Hovering over a specific number would turn the number yellow, and clicking on the number would reveal shopping options for that item of clothing on the right. The information to read about the outfit was presented below the image and shopping option in a magazine article style. A highlighted quote in yellow would catch the eye of users to encourage them to read the post.

Share a Look Concept

Due to time constraints on this project, the web form was the last element I designed. Again, I wanted to focus on fashion, so I made a stylish image the background, with the form resting on top. Evaluating it after the fact, the form is hard to read when over a distracting image, and might detract people from submitting information if it was difficult to see. In addition, the page is lacking any of the yellow found on the other pages, making this page feel half-branded and disjointed from the rest.