concept

This has been an ongoing project of mine and has provided an outlet to explore a medium I've always had an affinity towards. I decided to rebrand and update the lines website in early 2020. A web developer and I collaborated to create the new online store. The brand has always focused on subtle sensuality. In order to preserve the identity, it was important to use a gentle color palette that allowed the focus to stay on the garments and stylized photography.

All clothing designs and products are my own.

process

It felt important to have full height images to allow the viewer to see the details in each piece. In order to break up the layout, I decided to keep smaller images on the index and clothing category pages.

Once the user enters the product page, there are 2 full height photos of the product as well as a bottom navigation bar which allows them to see other images. I wanted to keep the entire site constrained within the window and not allow vertical scrolling.

The layout for the index and product pages were designed to cut off certain words to create an illusion of a larger art board area. In order to keep the shopping and browsing experience interesting, the home page is meant to be busier and more complex than the category and product pages. The idea was to create an almost magazine-like layout for the index page.


While wireframing the preliminary site, it was clear that there should be more negative space in the homepage to emphasize the minimalistic brand identity. In addition, while creating the site map I decided to keep the main focus of the navigation solely on the garment categories. Info, contact, returns/exchanges, FAQ, terms & conditions, and sustainability information can be all found in the same place.

final responsive site

The responsive site was also designed to be unique and differ slightly from the desktop. It was important to optimize the limited screen space on a phone. To achieve this, there is a vertical scroll feature whereas the desktop has no scrolling enabled. The layout theme essentially remains the same, with a few modifications.

The curved lettering needed to be revised for the mobile site so the words were split up and moved half off-screen to direct the viewer to scroll down vertically.

For the navigation, the developer and I wanted it to be as straightforward as possible. When the user clicks the down arrow on the right-hand side, the menu drops below revealing 6 links as well as the search and cart icons.


The line is nonseasonal which means there are a significantly higher amount of shoots necessary per year. The brands photographer, Carolyne helps keep all images consistently edited in order to preserve the identity across the site. All pieces were shot in the same studio with similar creative direction and styling during every photo session.

final desktop site

The final site was designed to be unique but functional. In order to emphasize the brand's soft yet modern identity, I chose to use serif and sans-serif fonts. The typography was an important aspect since the logo has always been in a fully serif font which is relatively rare in today's fashion brands.

There are subtle fade-in and animations that add interactive elements as well. For example, when the user returns to the home page from a product page, the letters in the products name rearrange to fit the large circular text on the index.

This site's design was finished within 2 months and is currently in the process of being coded in Liquid by a web developer.

Projects

Homepage Redesign:

One of my bigger tasks was to redesign the entire website. I worked closely with my manager, the VP of Marketing to create a new layout while maintaining the intial brand DNA.


Wireframe:

Before:

After:

Use Cases Page:

Sales Deck | Created on Google Slides including all graphics:

RSA Landing Page:

Cloud Misconfiguration Infographic:

User Personas:

Google Ad Banners:

❮ ❯

Concept

The Hilton's newest development in The Bahamas partnered with Margaritaville to create The Pointe. Based in the capital, The Pointe boasts a number of restaurants, a water park, and plenty of nightlife activities. The client approached me for front-end web development as well as branding. They requested a shell design and I presented them with a broken down conch as a representation of the layered building they planned to create.

They wanted a simple and straightforward interface with clearly laid out navigation links for the user to see all the amenities offered. There are 13 navigation links. Because of the amount of pages, it made sense to split the navigation into 2 parts in order to not overwhelm the user with a plethora of links.

I also worked closely with the motion graphics director to create a large hero video using Adobe After Effects. The hero video showed the renderings of the new hotel and condominiums that are to be offered.

process

The client informed me that the 2 buildings were developed to represent a layered shell. I presented them with a few initial sketches and followed feedback in order to create the final design.

Early logo designs:

Once the final design was selected and thoroughly fleshed out, we were able to develop the color scheme that would be used across the site. Along with the logo design, they also requested a few renderings to be edited and mocked up. The renderings were done by an artist and sent over for edits. The client requested a piece with all the buildings being labeled like a map.

Map rendering:

Artist rendering:

final product

The final site was finished in 10 months from conception to execution. To view the live site, please visit The Pointe.

Projects

Charity Initiative

We created a platform that allows talent to connect with a cause of their choosing and donate items and experiences for auction and sweepstakes.

Select Wireframes:

Final Desktop Site:

Final Responsive Site:

Audience from Anywhere (AFA)

AFA provides fans the ability to watch events with friends while also streaming into the broadcast to participate in fan segments. My role was to develop the entire UX platform. To achieve this, I used a mock wedding as an example. The attendees would log in, create a profile, take their seat, and watch the event unfold. The host would be able to allow the guests to interact by speaking, sending messages, and emojis or mute the audience entirely (in this case, for the ceremony).

Select Wireframes for Host Flow:

concept

Free Speech was created to aid those struggling from COVID-19's quarantine isolation. I decided to conduct a mental health study based on the current political and social climate of 2020.

A survey was made to gauge how individuals coped with their daily stressors. My findings indicated that many of the participants spoke to themselves when they were under pressure or lonely. Based on those results, the question became: how do we allow ourselves to vent in a productive and meaningful way?

identifying pain points

Throughout the surveys I conducted, almost 60% of participants coped by journaling, 20% were in psychotherapy, and the remaining 20% did none of the above. All of those who had the financial means to see a therapist said they would recommend it to their friends and loved ones. However, almost all of the participants who were not in therapy marked that they were interested but could not afford the costs. The majority of those in therapy said they found the simple act of speaking was beneficial.

Those who journaled were asked if they found it effective (myself included) and answered yes. However, many said that journaling itself sometimes required too much effort especially when they were experiencing severe emotional distress. Many of the participants stated that they often subconsciously had to consider their grammar and typing errors and that resulted in losing their train of thought. The problem I identified with journaling by hand or typing was that thought flow was interrupted.

User Persona:

In order to empathize, I created Denise's user persona. She is a single, 21 year old developer living alone. Because of her active and social lifestyle prior to COVID-19, her emotions generally didn't include loneliness. It was only after she had to quarantine for months alone that she started to see the negative effects on her mental health.

She requires an outlet to help her define her issues in order to approach them with more clarity. Free Speech allows Denise to vent and flags the parts of her thought process that seem either problematic or potentially indicate improvement.

goals

While designing and prototyping Free Speech, the main goal was to allow the user to effectively vent. I wanted to keep the interface clean and approachable to encourage daily use.

It was important for the user to be able to have uninterrupted thought flow but also give them the option to check their progress. In order to accomplish that, the use of machine learning would have to be implemented. The app is designed to pickup certain words or phrases that the user repeats and then allows the user to sort these into 3 emotion categories: positive, neutral, and negative. Free Speech is then able to gain a better understanding of how the user perceives these words and phrases. As a result, it’s able to create a progress report based on the feedback that the user can check periodically.

Another aspect that I wanted to implement was an incentive program. The goal is for the user to participate consistently so they can better understand the cause of their stress. In order to motivate regular use, I created the Badges page. Badges are awarded to the user weekly based on them completing at least 3 days of journaling. Each badge represents a different charity. Every time the user unlocks one, they trigger a donation from our end to the specified charity.

Low-fidelity wireframe:

High-fidelity wireframe:

final product

concept

The initial concept from the client was to have a fluid and chic site which conveyed the spirit of the Bahamas. They requested vibrant colors and wanted bold imagery with minimal text. The copy that was provided all worked well as header text and in turn, the site manifested with a parallax scroll with full width images and large text.

The logo itself is iconic so we opted to keep the majority as is in the site. In order to help the logo fit in better with the site, the stars and lower text bubble that were initally above the "Graycliff" text were removed to keep consistency in the typography.

process

Because the client put a heavy emphasis on the color palette, I decided to use a background gradient in the CSS and lowered all image opacities to create more harmony in the site.

It was also discussed to create animated elements to guide the viewer down the page. I created an animated line with subtly flashing arrows as well as fade in text to increase the interactive element of the page.


Finally, it seemed appropriate to create parallax scrolling through the full-width pages. The client wanted a minimal amount of copy on the home page so we decided to go with a simple layout that put the focus on the imagery.

final product

The final site features large images with overlayed text copy and small elements of animation. The client made a point to not overwhelm the user by having a lot of information since they wanted to emphasise the spirit of the Bahamas. The colors were the main focus and we successfully conveyed them through the use of the background gradient to capture the feeling of the setting sun on the beach.

The site is set to launch in 2021. Because of this, the copy for the menu have not been set or provided yet.

concept

Milk + Cream is a dessert bar meant for both adults and children. The bar boasts a number of ice cream flavors as well as other desserts.
Most notably is its pursuit to bring bubble tea to overseas. As one of the first establishments to offer the fun Asian beverage on the island, it was important to the client to keep the branding soft and playful. The client requested a simple and approachable interface with small animated details to add an interactive element. Their specifications were as follows:

Because they requested a single page with a simple interface, no navigation links are required. The result is a cleaner experience for the user where scrolling vertically is the only action required. I recommended incorporating a parallax effect to emphasize the interactive scrolling aspect as well.

process

After presenting the client with options, the logo design they selected was fluid, fun, and in tune with the wide age demographic they were looking to appeal to.

Final logo design:

In addition, we decided to use hand drawn illustrations that were animated to add liveliness to the site. I also created a rotating cursor which referenced the stylized illustrations to add another interactive element.

Javascript was used to create the animations for both the illustrations as well as the cursor. It was also important to have a tween effect on the cursor in order to generate more depth for the user. This was accomplished by using several svg images layered on top of one another and using javascript accordingly.

Aside from animations, the client wanted the menu to be cleanly laid out. They requested that the ice cream/sorbet and bubble tea flavors be in their own distinct sections followed by a footer image which held contact information and hours.

Milk + Cream sitemap:

Low-fidelity wireframe:

High-fidelity wireframe:

final product

The final site was designed to be accessible and easy to use. The cursor, food, and parallax scrolling animations added the subtle interactive elements the client requested. The menu is laid out in a clean, legible manner and the footer contains all the necessary information for the customer. Milk + Cream’s site was finished within 3 months, from conception to working product.