Uptown Fungus - Website Redesign | Web | Product Design

Website transformation to improve functionality and strengthen brand image

Redesigning a website for a small, veteran-owned niche business

My role

For this solo design project, I assumed the following roles:

Digital Strategist

UX/UI Designer

Web Designer

Deliverables

Brand Style Guide

Competitive Analysis

Heuristic Evaluation

Style Tile

Hi-fi Mockup

Specifications

Duration:

4 months

Tools:

Framer, Figma, Photoshop, Procreate, LottieFiles

One Minute Case Study Digest

[Client]

Uptown Fungus — a veteran-owned small business in Oregon.

[Problem]

Outdated website with unclear brand identity and poor responsiveness across devices.

[Methods & Tools]

the following methods were used based on their potential impact and project constraints: site audit, competitive analysis, user research, brand strategy, user flows, user personas, prototyping, user testing;

Framer, Figma, Procreate;

Framer app builder and host platform was chosen for its prototyping capabilities and high level of customization. The client switched from Squarespace to Framer.

[Solutions]

site mapping: 3 levels deep maximum to allow discoverability and efficiency;

Sitemap

strong brand identity through business differentiators (in its mission and offers) and cohesive visual design;
discoverability of high-impact features through strategic placement, interactive elements and CTAs.

[Results]

A redesigned website that is cohesive, aligned with the brand identity, and serves business goals.

View live site

Comprehensive Case Study

[The Brief]

I completed a website redesign project that led to an increase of site visits by 42% within the first two months. A redesign and upgrade of an existing Squarespace-based website.

The overarching primary objective of this website redesign project was to create a user-friendly, and accessible online presence that reflects the brand's core values: quality, transparency, and support.

[The Client]

Uptown Fungus (UF), a veteran-owned and operated legal organic cultivation of Psilocybe Cubensis mushrooms in Oregon.

[The Primary Users]

the owner and workers of Uptown Fungus;

its distributors – certified service centers –
who are knowledgeable facilitators of therapeutic alternatives.

Research & Ideation: " What would you like to accomplish with this new website?"

[Digital Strategist]

“What would you like to accomplish with this new website? And what are your offers & services to the public once this launches?"

Asking the UF stakeholders this questions transformed a routine requirements-gathering interview into a goal-oriented process. From the beginning of the project, my role grew from Web Designer to that of a Digital Strategist.

[Digital Strategist]

“What would you like to accomplish with this new website? And what are your offers & services to the public once this launches?"

GOAL 1 A digital identity

The site will convey Uptown Fungus (UF's) vision and mission to the general public as well as to the 2 main groups that UF interacts with: public officials and operations officers of the service centers.

GOAL 2 A digital business front extension

The site will serve to extend UF’s on-the-ground business to the digital space. The Menu and Customer sections are projected to play a key part in strengthening UF's market presence.

[Initial Audit]

Usability issue 1 — Poor readability that prevents one’s interactions with the website

Usability issue 2 — Low discoverability of high-value features

Usability issue 3 — Low compliance with accessibility requirements that negatively affects user experience and renders the website ADA non-compliant.

The before views of UF's Home and Customer Login pages

[User Research]

After speaking to the UF’s CEO and Chief Executive Officer, I determined that our primary audience comprise of two groups: the public officials and operations officers of service centers.

In addition, I surveyed three users — operations support specialists at different service centers. Through my research I identified the following key insights and paint points:

Key Insight 1

The most visited pages were Customer Login and Stock.

Key Insight 2

Customers preferred calling as a way of contact.

Key Insight 3

Prices and inventory on the Stock page were frequently updated.

Pain Point 1

Usability and accessibility problems (poor readability — no information and typography hierarchy; congested text; poor organizational structure of the content)

Pain Point 2

Efficiency problems (e.g., contact info was hard to find, external links open in the same window).

Pain Point 3

Poor mobile responsiveness (the website was built for desktops and laptops).

[Competitive Analysis]

I analyzed six direct and indirect competitor websites for strengths and weaknesses: Satori Farms PDX, Myco Synergy, Omnia Group Ashland, Epic Healing Eugene, Brain Brew PDX, and Alchemy Community Therapy Center.

Satori Farms PDX and Myco Synergy stood out for their strong brand image and focus on product quality. They presented cohesive brand images and were consistent with utilizing color style guide to organize their content and imagery to support their mission.

Both Satori Farms PDX and Epic Healing Eugene use long and linear landing page layout with a navigation bar that disappears when the user scrolls downwards.

The cleanliness of Satori Farms PDX navigation bar (at only five top-level menu items) is impressive for a nonprofit of their market share.

However, a key weakness on both websites is in the way they both ineffectively use typography hierarchy and don't adhere to web accessibility standards in their text-to-background contrast ratios. Epic Healing Eugene would also benefit from a top-level menu reorganization.

Myco Synergy and Omnia Group Ashland opted for evocative vivid imagery and a fixed navigation bar. Myco Synergy's use imagery to tell their story is visually compelling. However, dedicating a whole hero space to it was hampering the delivery of essential content and obscuring the colorless menu navigation located on the left side-bar.

Both Myco Synergy and Omnia Group Ashland do a great job in organizing dense information into readable chunks supported by related imagery.

However, a key weakness on both websites is their inconsistency in following the web accessibility standards in their text-to-background contrast ratios (primarily, navigation menus).

[Competitive Analysis]

I looked to several key players in the psilocybin cultivation and therapy space to study how those businesses position themselves in the digital space.

Satori Farms PDX and Myco Synergy stood out for their strong brand image and focus on product quality. I analyzed the way each one communicates their identities through their websites.

[Competitive Analysis]

I looked to several key players in the psilocybin cultivation and therapy space to study how those businesses position themselves in the digital space.

Satori Farms PDX and Myco Synergy stood out for their strong brand image and focus on product quality. I analyzed the way each one communicates their identities through their websites.

Satori Farms PDX

Myco Synergy

Satori Farms PDX

Myco Synergy

Omnia Group Ashland

Omnia Group Ashland

[Information Architecture]

Sitemap

I made every effort to make sure that a piece of information is never more than three levels deep.

[Competitive Analysis]

I looked to several key players in the psilocybin cultivation and therapy space to study how those businesses position themselves in the digital space.

Satori Farms PDX and Myco Synergy stood out for their strong brand image and focus on product quality. I analyzed the way each one communicates their identities through their websites.

[Competitive Analysis]

I looked to several key players in the psilocybin cultivation and therapy space to study how those businesses position themselves in the digital space.

Satori Farms PDX and Myco Synergy stood out for their strong brand image and focus on product quality. I analyzed the way each one communicates their identities through their websites.

Wireframe Structure

fixed top navigation bar due to the long and linear nature of our landing page;
long and linear page layout to increase discoverability and facilitate better storytelling;
Menu as a long feature page that presented visual (through an interactive ticker element) and textual information (this format, compared to a gallery or a carousel allows for information scoping with the least effort from the customers and assures that the information is findable and digestible.)
vital for business information — product information, quantities and prices — as readily available and complete information for logged-in customers to safeguard my client's product information and time.

[Competitive Analysis]

I looked to several key players in the psilocybin cultivation and therapy space to study how those businesses position themselves in the digital space.

Satori Farms PDX and Myco Synergy stood out for their strong brand image and focus on product quality. I analyzed the way each one communicates their identities through their websites.

[Competitive Analysis]

I looked to several key players in the psilocybin cultivation and therapy space to study how those businesses position themselves in the digital space.

Satori Farms PDX and Myco Synergy stood out for their strong brand image and focus on product quality. I analyzed the way each one communicates their identities through their websites.

UF"s Home and Menu pages

Design Studies: Rooted in Nature and its Owner's Identity

[Visual Design]

Uptown Fungus brand identity is rooted in the identity of its owner and its mission of service through nature.

Development: Iterations & Preference Tests R Us

[Design Iterations & Preference Tests]

My focus in designing a hero space was for it to be informative and organized in such a way as to facilitate the discovery of high value features (contact info, business highlights) without unnecessary distractions.

Hero space

"Which configuration of images and information is more readable and engaging?"

Menu

"Which of this two menu feed layouts is more informative?"

Customer Services/Info

"Which of this two customer information/services layouts is easier to browse?"

Note: sensitive information is blurred.

Other notable iterations

A pop-up age verification cookie banner was not implemented due to limitations of subscription of the host platform. I DIY-ed the solution with a permanent fixed notification that assured Uptown Fungus' compliance with the state regulations.
The layout for the Stock page includes a left-side bar with a legend (similar to the one on Customer Services/Information page) and the data is organized in tables.

Results: The First Launch is Never Perfect

[Putting It All Together]

Launch

Go-live date: June, 2024.

Initial feedback was positive.

Impacts on users & business

Once my redesign was implemented and was live for two months, I measured its user traffic. The first two months saw an averaged 42% increase in user traffic compared it with the numbers of the old version of the UF website for the timeframe of the six months prior to the implementation of redesigned website. This data indicated site's redesign adoption rate.

Further alterations

After a few weeks of the upgraded site being live, the owner asked me to revise the stock data tables on the Stock page. The columns and rows in the tables weren't responding properly to the input. After several trials, I opted to simplify the data tables by preserving only one column and multiple rows for data input. This way, there was no data misalignment. This was a viable simple option that was within the capabilities of the design platform, even though it was not as ergonomic or aesthetically pleasing as multiple delineated columns and rows.

My learnings

Insight- not process-driven. This is not the first version of this case study, but it is the leanest one (cut down by approximately 50%). I trimmed down the non-functional filler text and focused on presenting just the major points that collaborate the bigger picture of this project.
A 100 ways to make it look good, but only a few to make it work. Different ways to present data vary depending on whether that data gets frequent updates or is kept unchanged (as in the case with the the data tables on Stock page).
Include it if it has logic. The stakeholders of UF business expressed strong preferences in a style of the website. I worked to include many of them, given that they pass the test of logic and serve the functionality practices and accessibility guidelines.

Results: The First Launch is Never Perfect

[Putting It All Together]

Launch

Go-live date: June, 2024.

Initial feedback was positive.

Impacts on users

Once my redesign was implemented and was live for two months, I measured its user traffic. The first two months saw an averaged 42% increase in user traffic compared it with the numbers of the old version of the UF website for the timeframe of the six months prior to the implementation of redesigned website. This data indicated site's redesign adoption rate.

Impacts on business

I plan on measuring a broader impact of my work with UF — its increase in revenue/brand loyalty and retention — within a six months after the launch of a redesigned website.

Further alterations

After a few weeks of the upgraded site being live, the owner asked me to revise the stock data tables on the Stock page. The columns and rows in the tables weren't responding properly to the input. After several trials, I opted to simplify the data tables by preserving only one column and multiple rows for data input. This way, there was no data misalignment. This was a viable simple option that was within the capabilities of the design platform, even though it was not as ergonomic or aesthetically pleasing as multiple delineated columns and rows.

My learnings

Insight- not process-driven. This is not the first version of this case study, but it is the leanest one (cut down by approximately 50%). I trimmed down the non-functional filler text and focused on presenting just the major points that collaborate the bigger picture of this project.
A 100 ways to make it look good, but only a few to make it work. Different ways to present data vary depending on whether that data gets frequent updates or is kept unchanged (as in the case with the the data tables on Stock page).
Include it if it has logic. The stakeholders of UF business expressed strong preferences in a style of the website. I worked to include many of them, given that they pass the test of logic and serve the functionality practices and accessibility guidelines.

Results: The First Launch is Never Perfect

[Putting It All Together]

Launch

Go-live date: June, 2024.

Initial feedback was positive.

Impacts on users

Once my redesign was implemented and was live for two months, I measured its user traffic. The first two months saw an averaged 42% increase in user traffic compared it with the numbers of the old version of the UF website for the timeframe of the six months prior to the implementation of redesigned website. This data indicated site's redesign adoption rate.

Impacts on business

I plan on measuring a broader impact of my work with UF — its increase in revenue/brand loyalty and retention — within a six months after the launch of a redesigned website.

Further alterations

After a few weeks of the upgraded site being live, the owner asked me to revise the stock data tables on the Stock page. The columns and rows in the tables weren't responding properly to the input. After several trials, I opted to simplify the data tables by preserving only one column and multiple rows for data input. This way, there was no data misalignment. This was a viable simple option that was within the capabilities of the design platform, even though it was not as ergonomic or aesthetically pleasing as multiple delineated columns and rows.

My learnings

Insight- not process-driven. This is not the first version of this case study, but it is the leanest one (cut down by approximately 50%). I trimmed down the non-functional filler text and focused on presenting just the major points that collaborate the bigger picture of this project.
A 100 ways to make it look good, but only a few to make it work. Different ways to present data vary depending on whether that data gets frequent updates or is kept unchanged (as in the case with the the data tables on Stock page).
Include it if it has logic. The stakeholders of UF business expressed strong preferences in a style of the website. I worked to include many of them, given that they pass the test of logic and serve the functionality practices and accessibility guidelines.

Conclusion

My enthusiasm and a very lean team of one led me to create a design that represents a coherent brand image, is personable, and is very consistent in structure, but offers flexibility in arranging content.

Presented below are high-fidelity desktop mock-ups of selected pages of the final website design vs the original versions of those pages prior to the redesign.

See more of my projects

Healthtech

Concept project

Figma

Uptown Fungus

Website redesign project that led to an increase of site visits by 42% within the first two months.

See the project

B2C

Redesign project

Shipped

Framer

Uptown Fungus

Website redesign project that led to an increase of site visits by 42% within the first two months.

See the project

Healthtech

Concept project

Figma

Uptown Fungus

Website redesign project that led to an increase of site visits by 42% within the first two months.

See the project

Lifestyle & Organization tech

Sustainability

Concept project

Figma

2The9s

Designed a digital wardrobe app centered on sustainability, featuring an AI stylist for smarter outfit planning.

See the project

Lifestyle & Organization tech

Sustainability

Concept project

Figma

2The9s

Designed a digital wardrobe app centered on sustainability, featuring an AI stylist for smarter outfit planning.

See the project

Lifestyle & Organization tech

Sustainability

Concept project

Figma

2The9s

Designed a digital wardrobe app centered on sustainability, featuring an AI stylist for smarter outfit planning.

See the project

Interested in connecting?

Let’s talk projects, collaborations, or anything design!

Interested in connecting?

Let’s talk projects, collaborations, or anything design!

Interested in connecting?

Let’s talk projects, collaborations, or anything design!