Swedish Finn Historical Society Website
Swedish Finn Historical Society Website
Created a new WordPress web template, preserved digital archives, interpreted trapped embedded code elements.
Brand Priorities
Brand Priorities
Pre-Production
The Swedish Finn Historical Society (SFHS) has a deep history in the US and Finland's Swedish-speaking regions. The organization boasts many genealogical and historical resources. Yet, its current user group is aging. This made it imperative that the website connect with younger generations while becoming intuitive for older populations.
Before this website was built, the organization had a clunky website that screamed lower-level UI. When the Finnish web design company, Morgan Digital, was brought in to give SFHS a new
The Swedish Finn Historical Society (SFHS) has a deep history in the US and Swedish-speaking regions of Finland. The organization boasts many genealogical and historical resources. Yet, its current user group is aging. This made it imperative that the website connect with younger generations while becoming intuitive for older populations.
Before this website was built, the organization had a clunky website that screamed lower-level UI. When the Finnish web design company, Morgan Digital, was brought in to give SFHS a
new WordPress look, some of the old website's code was intermittently trapped within each web page. I came in to help Morgan Digital reformat pages, interpreting trapped code into the new WordPress template’s features —for all 300 of SFHS' web pages. Part of my job was also to make sure there was visual consistency. For example, all of the article's authors were named at the top of the page in italics. Several tables and accordion features later, I had helped get rid of all the extra code and helped redesign an intuitive website flow for multigenerational user groups.
WordPress look, some of the old website's code was intermittently trapped within each web page. I came in to help Morgan Digital reformat pages, interpreting trapped code into the new WordPress template’s features —for all 300 of SFHS' web pages. Part of my job was also to make sure there was visual consistency. For example, all of the article's authors were named in italics at the top of the page. Several tables and accordion features later, I helped get rid of all the extra code and redesign an intuitive website flow for multigenerational user groups.
Preserving Digital Archives
Preserving Digital Archives
Online Publication Archives
As can be seen in the image above, SFHS’ website houses 100-year-old documents. The organization has a wealth of knowledge in its library. SFHS wanted to preserve its history, keeping it available
As can be seen in the image above, the historical society's website houses text from over 100 years ago. This made it imperative to create a database of each publication, listing its title, publication year, and issue number. The best way to make such a vast archive useful to members is to make it easy to access whichever information they are looking for, making the database organization essential for the historical society's growth.
for future generations —making it imperative to upload archival work into a meticulously categorized database. The database’s organization is essential for the historical society's growth.
Making Online Niche Dictionaries Intuitive
Making Online Niche
Dictionaries Intuitive
In the image above, the historian June Pelo defines genealogical terms in Finnish. The page’s initial layout listed the terms in one column —every term
in Finnish and then English. I changed this so the
In this part of the website, the historian June Pelo defines medical terms in Swedish and Finnish. The first layout listed the Finnish and English medical terms in one column. I changed this so the languages lay side by side, with each medical term next to its translation. This made the page intuitive and ultimately more useful to the article's readers.
languages lay side by side, with each medical term next to its translation. This made the page more useful to the article's readers— my own personal way to value June Pelo’s incredible work.
Interpreting Trapped Code
Interpreting Trapped Code
Online Publication Archives
The website’s facelift began by applying a custom WordPress template to pre-existing website content. Unfortunately, over 300 web pages failed to seamlessly transmute into the new template. There was trapped HTML and CSS code that needed to be interpreted on nearly all of those pages. The image above gives an example of what this trapped code looked like. Since I was the most fluent in coding languages, I was the individual who read the code and interpreted it into the most appropriate WordPress features.
As can be imagined, interpreting trapped code on 300 pages takes a good long minute. In order to keep the
The website facelift began by making a new WordPress template and applying it to the current website content. Unfortunately, over 300 web pages had trapped HTML and CSS code that needed to be interpreted and recreated with the new WordPress template. The image above gives an example of what this trapped code looked like. Since, I was the most fluent in coding languages, I was the person tasked with going through each WordPress page and deciphering the code into appropriate WordPress features.
As can be imagined, interpreting trapped code on 300 pages took a while. In order to better showcase my progress to the web development team, I created a series of Excel spreadsheets to showcase my progress and features I thought could be improved with the team's greater permission. I felt like this was an easier was to showcase progress on the website and a good way to facilitate team collaboration.
As seen below is an example of trapped code, the result when fixed, and progress spreadsheet:
web development team in the loop with my progress, I created a series of Excel spreadsheets listing pages and their completion. In certain circumstances, I came across features I thought could be improved. I used the Excel sheets to track my opinions on feature improvements so that I could bring up ideas efficiently in team meetings . This wound up being an effective way to communicate improvements in the web development process. It was an easier way to showcase progress on the website and facilitated team collaboration.
As seen below is an example of trapped code, the result when fixed, and progress spreadsheet:
Final Product
Final Product
Post-Production
Get In Touch
Get In Touch
Multimedia
Web Designer
Daisy Bell
Framer 2024
Multimedia
Web Designer
Swedish Finn Historical Society Website
Created a new WordPress template, preserved digital archives, interpreted trapped embedded code elements.
Brand Priorities
Pre-Production
The Swedish Finn Historical Society (SFHS) has a deep history in the US and Swedish-speaking regions of Finland. The organization boasts many genealogical and historical resources. Yet, its current user group is aging. This made it imperative that the website connect with younger generations while becoming intuitive for older populations.
Before this website was built, the organization had a clunky website that screamed lower-level UI. When the Finnish web design company, Morgan Digital, was brought in to give SFHS a new WordPress look, some of the old website's code was intermittently trapped within each web page. I came in to help Morgan Digital reformat pages, interpreting trapped code into the new WordPress template’s features —for all 300 of SFHS' web pages. Part of my job was also to make sure there was visual consistency. For example, all of the article's authors were named at the top of the page in italic. Several tables and accordion features later, I had helped get rid of all the extra code and helped redesign an intuitive website flow for multigenerational user groups.
Preserving Digital Archives
Online Publication Archives
As can be seen in the image above, SFHS’ website houses 100-year-old documents. The organization has a wealth of knowledge in its library. SFHS wanted to preserve its history, keeping it available for future generations —making it imperative to upload archival work into a meticulously categorized database. The database’s organization is essential for the historical society's growth.
Making Online Niche Dictionaries Intuitive
In the image above, the historian June Pelo defines genealogical terms in Finnish. The page’s initial layout listed the terms in one column —every term in Finnish and then in English. I changed this so the languages lay side by side, with each medical term next to its translation. This made the page more useful to the article's readers, which was my way of valuing June Pelo’s incredible work.
Interpreting Trapped Code
Online Publication Archives
The website’s facelift began by applying a custom WordPress template to pre-existing website content. Unfortunately, over 300 web pages failed to seamlessly transmute into the new template. There was trapped HTML and CSS code that needed to be interpreted on nearly all of those pages. The image above gives an example of what this trapped code looked like. Since I was the most fluent in coding languages, I was the individual who read the code and interpreted it into the most appropriate WordPress features.
As can be imagined, interpreting trapped code on 300 pages takes a good long minute. In order to keep the web development team in the loop with my progress with the task, I created a series of Excel spreadsheets listing pages and its completion. In certain circumstances, I came across features I thought could be improved. I used the Excel sheets to track my opinions on feature improvements in regards to the trapped code so that I could discuss the ideas in team meetings. This wound up being an effective way to communicate improvements in the web development process. It was an easier way to showcase progress on the website and facilitated team collaboration.
As seen below is an example of trapped code, the result when fixed, and progress spreadsheet:
Style Guide
Project Page
Usability Testing
Project Page
Coffee shops are a cherished part of the creative industry, evolving with visual trends almost as quickly as Instagram. While Pegasus has been a staple of the Seattle coffee scene, its digital and physical footprints could benefit from a Queer Eye-style makeover. But how should these two presences be transformed?
To my surprise, coffee shop e-commerce web design has even entered the realm of academic research. A 2023 study from Atma Jaya Catholic University in Indonesia found that coffee shop websites should prominently feature menus and specials to boost marketability. By doing so, coffee shops can stand out from competitors. The study describes these sites as a 'forum' to 'promote, store, and provide information,' which helps potential customers feel more informed, build trust, and increase buying interest (1).
From a design perspective, this can be achieved by presenting easily accessible product information alongside enticing visuals and maintaining strong visual cohesion across the site.
Guided by these research insights, I designed Pegasus’s website to not only highlight their menu and specials but also reflect their unique personality and values. By prominently featuring product information alongside vibrant imagery, the site emphasizes Pegasus’s dedication to sustainable sourcing and the artistry behind their coffee flavors. This approach ensures that customers are not only informed but also inspired by the story behind each cup, creating a seamless connection between their digital experience and Pegasus' commitment to quality and ethical responsibility.
1 Sidabutar, G. D. G. E., Seah, J. A., & Singgalen, Y. A. (2023). Analysis and design of web-based information system for coffee shop management using design thinking methodology. Journal of Information Systems and Informatics, 5(1). https://doi.org/10.51519/journalisi.v5i1.455
Final Product
Post-Production