HUMBLE OFFICE

BRANDING

‍

The first step in the process involved redesigning the logo, which initially included a full stop at the end. During discussions with the stakeholders, we carefully considered how the logo should be modified to align with the new year. Ultimately, we decided to remove the full stop as we deemed it unnecessary for the brand.

‍

When selecting the colors, our focus was on maintaining a professional appearance. Both Calibre and Interior Secrets primarily utilize shades of black and white in their branding. For Humble, we initially suggested using navy as the main color with a complementary accent, such as orange. However, upon reflection, we felt that this combination appeared too playful. As a result, we ultimately decided to retain the navy color as it was, creating a more conservative color approach for the brand.

‍

When selecting fonts for the Humble Office brand, I drew inspiration from Interior Secrets. To create contrast, I paired a minimal sans-serif font with a bolder serif font. For the serif font, I chose Judson Bold due to its substantial weight, which lends itself well to creating bold and impactful graphics for social media and website headers. The font's width also helps in capturing attention within a newly emerging market.

‍

In contrast to Judson, I opted for the sans-serif font Jost. With its clean and modern geometric design, Jost offers a striking contrast to Judson. It exudes a sense of openness, emphasizing that Humble Office is a new brand aiming to disrupt the market. By utilizing Jost, I sought to convey a contemporary and innovative feel to the typography.

T‍HE THEME

As a new brand, we had to carefully select an attractive theme on Shopify. Among the options we considered were 'Split', 'Broadcast', and 'Native', to name a few. Given that our primary objective was to establish a strong presence in a niche market, we desired a website theme that conveyed dynamism and specialization. Ultimately, we decided to utilize the 'Split' theme, which met our requirements on several fronts.

‍

The 'Split' theme aligned with our goals in multiple ways. 

‍

Firstly, its clean and modern appearance resonated well with our professional target audience. We aimed to create a sense of credibility and sophistication. 

‍

Secondly, the theme's dynamic features, such as the parallax scrolling effect, set us apart from our competitors. This added a premium touch to the user interface, making it feel more polished and high-quality. 

‍

Lastly, the 'Split' theme supported powerful imagery, allowing us to showcase our office pods and booths in a compelling manner. This feature played a crucial role in emphasizing the unique selling points of our products.

‍

By selecting the 'Split' theme, we were able to create a website that effectively communicated our brand's professionalism, expertise, and the innovative nature of our offerings in the emerging field of office pods and booths.

‍

A CHALLENGE

‍

The primary challenge we faced at this stage was acquiring suitable imagery and incorporating content into the live website. However, since I was already familiar with the chosen theme, I was able to create mockups and prototypes based on its capabilities and limitations. One significant obstacle was the absence of professional photographs specifically tailored to our brand. We lacked the resources and time to set up the booths for a professional photoshoot, and we also lacked the expertise in doing so. Furthermore, we were still in the early stages of refining the copywriting, requiring multiple iterations to ensure it accurately represented our brand's voice and message.

‍

‍The Solution

Regarding the media issue, the booths were procured from a manufacturer who supplied them to various companies. We approached the manufacturer to request permission to create 3D renders and utilize any existing product photography they had available. While we did receive a few images, they were of low quality. To address this, I utilized AI upscaling techniques to enhance the images, ensuring they aligned with the theme and were visually appealing to viewers.

‍

Additionally, we scheduled a specific time and date to set up one of the booths and conduct a dedicated photoshoot. This allowed us to capture high-quality photographs that showcased the product effectively. Fortunately, the obtained photos proved to be sufficient for Humble's needs.

‍

Furthermore, we were fortunate that the manufacturer provided us with video footage. To fill in any gaps or further enhance the media content, I edited the provided video footage, integrating it into the website as an additional visual asset.

‍

By leveraging a combination of upscaled images, professionally captured photographs, and edited video content, we were able to ensure that Humble Office had compelling media assets to showcase the booths and engage website visitors.

‍

The chosen theme for Humble Office on Shopify 2.0 offers a range of powerful features not available on Interior Secrets. This provided me with flexibility and a better understanding of how to execute the desired website design.

‍

Following an in-depth exploration of theme options, I gained insights into their strengths and weaknesses and began working on a prototype that aligned well with the chosen theme.

‍

‍Regarding the media issue, the booths were procured from a manufacturer who supplied them to various companies. We approached the manufacturer to request permission to create 3D renders and utilize any existing product photography they had available. While we did receive a few images, they were of low quality. To address this, I utilized AI upscaling techniques to enhance the images, ensuring they aligned with the theme and were visually appealing to viewers.

‍

Additionally, we scheduled a specific time and date to set up one of the booths and conduct a dedicated photoshoot. This allowed us to capture high-quality photographs that showcased the product effectively. Fortunately, the obtained photos proved to be sufficient for Humble's needs.

‍

Furthermore, we were fortunate that the manufacturer provided us with video footage. To fill in any gaps or further enhance the media content, I edited the provided video footage, integrating it into the website as an additional visual asset.

‍

By leveraging a combination of upscaled images, professionally captured photographs, and edited video content, we were able to ensure that Humble Office had compelling media assets to showcase the booths and engage website visitors.

‍

The chosen theme for Humble Office on Shopify 2.0 offers a range of powerful features not available on Interior Secrets. This provided me with flexibility and a better understanding of how to execute the desired website design.

‍

Following an in-depth exploration of theme options, I gained insights into their strengths and weaknesses and began working on a prototype that aligned well with the chosen theme.

‍

‍

Subsequently, I iterated on the wireframe based on theme features, incorporating feedback and suggestions from stakeholders. I also analyzed competitor further websites to identify areas where we could improve and make our website more attractive.

Using the feedback received, I refined the high-fidelity prototype, which would serve as the foundation for the final website. Multiple meetings with stakeholders ensured that all aspects aligned with the brand and that our media and content surpassed that of our competitors.

With the high-fidelity prototype complete, I collaborated with the developer to bring the website to life. As a relatively new user of the Shopify platform, this process proved more demanding than anticipated.

‍

However, upon reviewing the first iteration of the website, the stakeholders expressed dissatisfaction, feeling that it did not meet the standards set by more upmarket competitors. The product page, in particular, was criticized for its haphazard arrangement of elements.

‍

To address these concerns, I returned to wireframing and created an improved version of the product page. Key changes included reorganizing features and measurements into separate tabs, enhancing the presentation of key selling points, and adding depth to the overall site design.

Taking the feedback into account, I redesigned the product page in the new high-fidelity prototype, focusing on maximizing the capabilities of the theme to ensure it stood out from the competition.

I continued to collaborate with the developer to ensure that this version of the product page met the highest quality standards. By closely aligning with the feedback provided by stakeholders and product managers, we refined and enhanced the design.