top of page

PARACOSM

Project Type

Film Portfolio Site

Role

UX/UI Designer

Timeline

2 Weeks

I led the research, design, and building of a small production company's portfolio site. The focus was something streamlined and simple that would put all the attention on their films and other video projects.
mockuuups-lapton-mockup-on-desk_edited.jpg

Research

The Problem

Creating a portfolio site that is engaging but also gives enough information to users visiting. 

 

There's a lot of information and data behind film projects. Narrowing in on what Paracosm's clients would want to see and would be important to them up front was the biggest challenge. We needed to keep it simple without being boring. 

Competitive Analysis

Employing a user-centric approach, the analysis involved in-depth navigation through a number of production companies that are either a comparative aesthetic or similar stage in size of company. Once this was done I was able to identify commonalities between their portfolio sites.

Start With Reel

Almost every site starts with some kind of reel or visual that grabs the user as soon as they visit the site. Even the larger companies have moving images to avoid stagnation at the outset of visiting the page.

Main Takeaways
Creative UI

Being creative hubs, the sites use their UI in creative ways whether it's with hover interactions shifting the background or in their button design. Like a creative agency they want their users' experience to be memorable.

Unique Scrolls

Many use scrolls or visual interactions that stand out. Whether it's a lengthy site with a lot of information or short and sweet, they stand out with every inch of their site's design.

Design

Concept Sketching

My initial sketches were heavily image based and keeping the information displayed as simply as possible. I quickly discovered a lot of the iteration would come with how the little information I was displaying would be displayed without being too simple.

ParacosmSketches1_edited_edited.png

Button to take you to main page

Reel that plays automatically on loop

Logo

Landing Page

ParacosmSketches2_edited.png

Scrollable

Menu

Title of project image viewing

More info button for each project

Work Page

Wireframes

From my solution sketches I developed greyscale mid-fidelity wireframes. Once these were fined tuned, brand colors were injected into the design and imagery was added.

MidFi

Built out basic wireframes based on initial sketches

ParacosmLoFi1.png
ParacosmLoFi2.png
HiFi v1

Injected brand logo, color, & imagery

ParacosmMidFi1.png
ParacosmMidFi2.png

Delivery

Final HiFi Design

Our final design, carefully honed through rounds of refinement, seamlessly marries the brand's aesthetic with the initial sparks of inspiration from our concept sketches. While retaining the core of our original vision, this design reflects strategic enhancements, incorporating valuable subtractions and additions. These nuanced adjustments are aimed at not only refining the user experience but also spotlighting key information deemed paramount by the brand.

ParacosmHiFi1.png

Notes & Adjustments: 

- We simplified the landing page navigation to just be 'Reel' & 'Work'. At the end of the day this was the most vital information they wanted their users to see along with being able to reach out to discuss their projects at greater length

Notes & Adjustments: 

- From HiFi 1 to HiFi 2 we decided to discard of a the 'More Info' button, opting to give simple information of Title, Type of Project, and Link. 

bottom of page