Uptown Fungus - Website Redesign | Web | Product Design
Website redesign to improve functionality and strengthen brand image
Image credit: Verywell / Alex Dos Diaz
My role
For this solo design project, I assumed the following roles:
Digital Strategist
UX/UI Designer
Web Designer
Deliverables
Brand Style Guide
Heuristic Evaluation
Competitive Analysis
Personas
Hi-fi mockup
Specifications
Duration:
5 months
Tools:
Framer, Figma, Photoshop, Procreate, Elflight Widget
One-Minute Case Digest
Client
Uptown Fungus — a veteran-owned small business in Oregon.
Problem
Outdated website with unclear brand identity and poor responsiveness across devices.
One-Minute Case 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 selected and 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;
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;
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.
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.
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.
Overview: Solving an interesting case of a niche business
Client
Uptown Fungus, a veteran-owned and operated legal organic cultivation of Psilocybe Cubensis mushrooms in Oregon.
Project Summary
Uptown Fungus (UF) is a small niche business that is a pioneer in the cultivation of Psilocybe Cubensis mushrooms, recently legalized in Oregon for therapeutic and medicinal use. As a veteran-owned business, Uptown Fungus is committed to providing high-quality, organically grown mushrooms while supporting the local community.
I redesigned UF website that led to an increase in user visits by 42% within the first two months. I worked on their existing website built on Squarespace platform and developed its brand identity, brand image, and structured their content. These served as the starting point to design a responsive identity site that positions Uptown Fungus for the future.
Process
I conducted user research, identified key paint points, developed a brand identity and image, iteratively tested solutions, and optimized the website for multiple devices.
Objectives
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 website is geared towards its distributors – certified service centers – who are knowledgeable facilitators of therapeutic alternatives.
I set out to break down and refine my main goal by opening up communication channels with the UF's team.
“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 the two questions above 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.
After several phone calls with key stakeholders, I came up with the following primary goals for the site:
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. As a user-friendly, and accessible online presence that reflects the brand's core values: quality, transparency, and support. The website is geared towards its distributors – certified service centers – who are knowledgeable facilitators of therapeutic alternatives.
The Menu and Customer sections are projected to play a key part in strengthening UF's market presence.
Research & Ideation: Who am I designing for?
Initial Audit
First, I evaluated the current state of the website via a heuristic analysis of the information architecture & navigation and through examining its analytics data (such as number of unique visits).
Second, I identified three main usability issues and explained why there is a need to resolve them.
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.
Overview: Solving an interesting case of a niche business
Client
Uptown Fungus, a veteran-owned and operated legal organic cultivation of Psilocybe Cubensis mushrooms in Oregon.
Project Summary
Uptown Fungus (UF) is a small niche business that is a pioneer in the cultivation of Psilocybe Cubensis mushrooms, recently legalized in Oregon for therapeutic and medicinal use. As a veteran-owned business, Uptown Fungus is committed to providing high-quality, organically grown mushrooms while supporting the local community.
I redesigned UF website that led to an increase in user engagement by X%. I worked on their existing website built on Squarespace platform and developed its brand identity, brand image, and structured their content. These served as the starting point to design a responsive identity site that positions Uptown Fungus for the future.
Process
I conducted user research, identified key paint points, developed a brand identity and image, iteratively tested solutions, and optimized the website for multiple devices.
Objectives
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 website is geared towards its distributors – certified service centers – who are knowledgeable facilitators of therapeutic alternatives.
I set out to break down and refine my main goal by opening up communication channels with the UF's team.
“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 the two questions above 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.
After several phone calls with key stakeholders, I came up with the following primary goals for the site:
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. As a user-friendly, and accessible online presence that reflects the brand's core values: quality, transparency, and support. The website is geared towards its distributors – certified service centers – who are knowledgeable facilitators of therapeutic alternatives.
The Menu and Customer sections are projected to play a key part in strengthening UF's market presence.
Research & Ideation: Who am I designing for?
Initial Audit
First, I evaluated the current state of the website via a heuristic analysis of the information architecture & navigation and through examining its analytics data (such as number of unique visits).
Second, I identified three main usability issues and explained why there is a need to resolve them.
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.
Overview: Solving an interesting case of a niche business
Client
Uptown Fungus, a veteran-owned and operated legal organic cultivation of Psilocybe Cubensis mushrooms in Oregon.
Project Summary
Uptown Fungus (UF) is a small niche business that is a pioneer in the cultivation of Psilocybe Cubensis mushrooms, recently legalized in Oregon for therapeutic and medicinal use. As a veteran-owned business, Uptown Fungus is committed to providing high-quality, organically grown mushrooms while supporting the local community.
I redesigned UF website that led to an increase in user engagement by X%. I worked on their existing website built on Squarespace platform and developed its brand identity, brand image, and structured their content. These served as the starting point to design a responsive identity site that positions Uptown Fungus for the future.
Process
I conducted user research, identified key paint points, developed a brand identity and image, iteratively tested solutions, and optimized the website for multiple devices.
Objectives
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 website is geared towards its distributors – certified service centers – who are knowledgeable facilitators of therapeutic alternatives.
I set out to break down and refine my main goal by opening up communication channels with the UF's team.
“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 the two questions above 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.
After several phone calls with key stakeholders, I came up with the following primary goals for the site:
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. As a user-friendly, and accessible online presence that reflects the brand's core values: quality, transparency, and support. The website is geared towards its distributors – certified service centers – who are knowledgeable facilitators of therapeutic alternatives.
The Menu and Customer sections are projected to play a key part in strengthening UF's market presence.
Research & Ideation: Who am I designing for?
Initial Audit
First, I evaluated the current state of the website via a heuristic analysis of the information architecture & navigation and through examining its analytics data [number of unique visits].
Second, I identified three main usability issues and explained why there is a need to resolve them.
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.
Overview: Solving an interesting case of a niche business
Client
Uptown Fungus, a veteran-owned and operated legal organic cultivation of Psilocybe Cubensis mushrooms in Oregon.
Project Summary
Uptown Fungus (UF) is a small niche business that is a pioneer in the cultivation of Psilocybe Cubensis mushrooms, recently legalized in Oregon for therapeutic and medicinal use. As a veteran-owned business, Uptown Fungus is committed to providing high-quality, organically grown mushrooms while supporting the local community.
I redesigned UF website that led to an increase in user engagement by X%. I worked on their existing website built on Squarespace platform and developed its brand identity, brand image, and structured their content. These served as the starting point to design a responsive identity site that positions Uptown Fungus for the future.
Process
I conducted user research, identified key paint points, developed a brand identity and image, iteratively tested solutions, and optimized the website for multiple devices.
Objectives
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 website is geared towards its distributors – certified service centers – who are knowledgeable facilitators of therapeutic alternatives.
I set out to break down and refine my main goal by opening up communication channels with the UF's team.
“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 the two questions above 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.
After several phone calls with key stakeholders, I came up with the following primary goals for the site:
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. As a user-friendly, and accessible online presence that reflects the brand's core values: quality, transparency, and support. The website is geared towards its distributors – certified service centers – who are knowledgeable facilitators of therapeutic alternatives.
The Menu and Customer sections are projected to play a key part in strengthening UF's market presence.
Research & Ideation: Who am I designing for?
Initial Audit
First, I evaluated the current state of the website via a heuristic analysis of the information architecture & navigation and through examining its analytics data [number of unique visits].
Second, I identified three main usability issues and explained why there is a need to resolve them.
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.
Examples of the current views of UF's Home, Service Centers, Customer Login, and (part of the) Menu pages which don't follow UX/UI design principles.
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.
Here are the personas that represent each group:
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.
Here are the personas that represent each group:
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 — Lack of cohesive brand image and inconsistent outdated design (various colors, fonts and images used).
Pain point 2 — Usability and accessibility problems (poor readability — no information and typography hierarchy; congested text; poor organizational structure of the content)
Pain point 3 — Efficiency problems (e.g., contact info was hard to find, external links open in the same window).
Pain point 4 — Poor mobile responsiveness (the website was built for desktops and laptops).
Suggested Areas of Improvement
age banner
to display stock info in a table/grid format
password protected page for customers
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 — Lack of cohesive brand image and inconsistent outdated design (various colors, fonts and images used).
Pain point 2 — Usability and accessibility problems (poor readability — no information and typography hierarchy; congested text; poor organizational structure of the content)
Pain point 3 — Efficiency problems (e.g., contact info was hard to find, external links open in the same window).
Pain point 4 — Poor mobile responsiveness (the website was built for desktops and laptops).
Suggested Areas of Improvement
age banner
to display stock info in a table/grid format
password protected page for customers
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 — Lack of cohesive brand image and inconsistent outdated design (various colors, fonts and images used).
Pain point 2 — Usability and accessibility problems (poor readability — no information and typography hierarchy; congested text; poor organizational structure of the content)
Pain point 3 — Efficiency problems (e.g., contact info was hard to find, external links open in the same window).
Pain point 4 — poor mobile responsiveness (the website was built for desktops and laptops).
Suggested Areas of Improvement
age banner
to display stock info in a table/grid format
password protected page for customers
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 — Lack of cohesive brand image and inconsistent outdated design (various colors, fonts and images used).
Pain point 2 — Usability and accessibility problems (poor readability — no information and typography hierarchy; congested text; poor organizational structure of the content)
Pain point 3 — Efficiency problems (e.g., contact info was hard to find, external links open in the same window).
Pain point 4 — Poor mobile responsiveness (the website was built for desktops and laptops).
Suggested Areas of Improvement
age banner
to display stock info in a table/grid format
password protected page for customers
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.
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. 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.
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. I analyzed the way each one communicates their identities through their websites.
Satori Farms PDX
Epic Healing Eugene
Both businesses present cohesive brand images and are 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
Myco Synergy
Omnia Group Ashland
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).
Structure
I defined the functionality, content, and site navigation through page-level wireframes and sitemaps.
Sitemap
I was able to narrow down the scope of the website design effort and convey it in this preliminary sitemap. I made every effort to make sure that a piece of information is never more than three levels deep.
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).
Structure
I defined the functionality, content, and site navigation through page-level wireframes and sitemaps.
Sitemap
I was able to narrow down the scope of the website design effort and convey it in this preliminary sitemap. I made every effort to make sure that a piece of information is never more than three levels deep.
Sitemap
Wireframe structure
Initially, I considered a large image as a background for the hero space. However I didn't want to risk users being unable to discover information easily or being distracted. At this stage, I knew that I was going to implement a fixed top navigation bar due to the long and linear nature of our landing page.
To increase discoverability and facilitate better storytelling, I opted to go with a long and linear page layout that succinctly narrates Uptown Fungus' background, mission and services using just the right amount of text and imagery.
I created a 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.
For the most vital for business information — product information, quantities and prices — I opted to present it as readily available and complete information for logged-in customers, rather than an information available through phone calls or emails only, as it is frequently delivered in the market space. The password-protected page safeguards my client's product information and time, and allows customers of Uptown Fungus access to all the services and products details on their own time.
Wireframe structure
Initially, I considered a large image as a background for the hero space. However I didn't want to risk users being unable to discover information easily or being distracted. At this stage, I knew that I was going to implement a fixed top navigation bar due to the long and linear nature of our landing page.
To increase discoverability and facilitate better storytelling, I opted to go with a long and linear page layout that succinctly narrates Uptown Fungus' background, mission and services using just the right amount of text and imagery.
I created a 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.
For the most vital for business information — product information, quantities and prices — I opted to present it as readily available and complete information for logged-in customers, rather than an information available through phone calls or emails only, as it is frequently delivered in the market space. The password-protected page safeguards my client's product information and time, and allows customers of Uptown Fungus access to all the services and products details on their own time.
UF"s Home and Menu pages
Design Studies: Simplicity is the key
Visual Design
Uptown Fungus brand identity is rooted in the identity of its owner and its mission of service through nature.
The UI opportunities that I identified and that are central in building a strong Uptown fungus brand identity — contextual consistency and organization, and hierarchy (visual, typographic, textual) were used in creating UI style guide.
Design Studies: Simplicity is the key
Visual Design
Uptown Fungus brand identity is rooted in the identity of its owner and its mission of service through nature.
The UI opportunities that I identified and that are central in building a strong Uptown fungus brand identity — contextual consistency and organization, and hierarchy (visual, typographic, textual) were used in creating UI style guide.
The UI elements implemented are warm colors — red-brown and green — and a round typeface Chango support the aesthetic and emotional value of the Uptown Fungus business brand.
For its ability to complement the roundness of Chango for the headers, the typeface Poppins was selected for the body text.
Style Tile
The UI elements implemented are warm colors — red-brown and green — and a round typeface Chango support the aesthetic and emotional value of the Uptown Fungus business brand.
For its ability to complement the roundness of Chango for the headers, the typeface Poppins was selected for the body text.
Style Tile
Accessibility Considerations (aka Universal Design)
I consulted WCAG SC Standards to assure that the design complies with best practices and meets accessibility requirements. Some of the practices I implemented using table format for data information, contrast b/w background and foreground, content spacing and heading, and different designs for different viewport sizes, controls for looped animated GIF, and labeled, scalable elements.
Accessibility Considerations (aka Universal Design)
I consulted WCAG SC Standards to assure that the design complies with best practices and meets accessibility requirements. Some of the practices I implemented using table format for data information, contrast b/w background and foreground, content spacing and heading, and different designs for different viewport sizes, controls for looped animated GIF, and labeled, scalable elements.
Development: Iterations and Inclusion of Stakeholders' Preferences
Design Iterations & Preferences 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?"
Development: Iterations and Inclusion of Stakeholders' Preferences
Design Iterations & Preferences 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.
Responsive Design
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.
Responsive Design
At desktop widths, I provided a horizontal top navigation bar that docks to the top of the viewport once a person scrolls past the hero image. It was important to give users the ability to quickly navigate to and from a page at any point during their page-scrolling experience. Since the menu contains four tabs only, I decided that for the tablet widths, the top navigation bar is a condensed desktop version.
At mobile widths, the double-bar icon summons a modal view that covers an entire viewport.
Results: The first launch is never perfect (more iterations!)
Putting it all together
Launch
Go-live date: June, 2024
Initial feedback was positive.
Results & Improvements
The redesigned UF's website was cohesive, well structured and minimal. It reflected the shareholders' inputs and crystallized brand image without compromising functionality.
I was able to successfully solve the usability issues I initially identified:
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.
Some minor issues (missing layers, style inconsistencies) were easy to fix.
Alterations/Iterations
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.
After consulting with the stakeholders, I replaced the pop-up age banner that I originally created through a specialized (Elflight Widget) website with a free no-maintenance alternative of a fixed line of text under the hero space. The Elflight widget requires a subscription after a limit of visitors was reached.
WIN: The number of site visitors increased (see metrics)!
Impacts/Metrics (KPIs)
My own impacts aka 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.
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.
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.
Reflections & Personal takeaways
This was a challenge. To design a website without a budget, code and on a brand new for me platform — Framer — wasn't easy. Both, my stakeholders and I were benefited from setting tentative deadlines.
This project confirmed that small business owners have strong preferences and great influence on brand images of their businesses. And that is what makes their business' websites stand out.
This case study reconfirmed that a redesign is a process, not a destination. It's a cyclic process of continuous refining of a product. A redesigned website is not perfect, but completed enough to satisfy set requirements.
Results: The first launch is never perfect (more iterations!)
Putting it all together
Launch
Go-live date: June, 2024
Initial feedback was positive.
Metrics
Key Performance Indicators (KPIs):
Results & Improvements
The redesigned UF's website was cohesive, well structured and minimal. It reflected the shareholders' inputs and crystallized brand image without compromising functionality.
I was able to successfully solve the usability issues I initially identified:
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.
Some minor issues (missing layers, style inconsistencies) were easy to fix.
Alterations/Iterations
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.
After consulting with the stakeholders, I replaced the pop-up age banner that I originally created through a specialized (Elflight Widget) website with a free no-maintenance alternative of a fixed line of text under the hero space. The Elflight widget requires a subscription after a limit of visitors was reached.
WIN: The number of site visitors increased (see metrics)!
Impacts/Metrics (KPIs)
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.
Impacts on users
Once my redesign was implemented and was live for two months, I measured its user traffic (retention/adoption??). 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.
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.
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.
Reflections & Personal takeaways
This was a challenge. To design a website without a budget, code and on a brand new for me platform — Framer — wasn't easy. Both, my stakeholders and I were benefited from setting tentative deadlines.
This project confirmed that small business owners have strong preferences and great influence on brand images of their businesses. And that is what makes their business' websites stand out.
This case study reconfirmed that a redesign is a process, not a destination. It's a cyclic process of continuous refining of a product. A redesigned website is not perfect, but completed enough to satisfy set requirements.
Original Home page vs. redesigned Home page
Original Service Centers page vs. redesigned Service Centers page
Redesign solution: Password-protected Customer Login/Information page
Original Customer Login vs. redesigned Customer Login/Information page (* a snippet is blurred for sensitive content protection)
next project
next project
next project
next project