Dr. Kathryn Ibata-Arens

April 2022

Designing a Responsive Website to Highlight Academic Excellence and Increase Audience Reach

  1. Web Design

  2. CSS Front-End

  3. Squarespace Web Development

Kathryn Ibata-Arens is a Vincent de Paul Professor of Political Economy, at DePaul University.

A scholar of innovation and entrepreneurship, science and technology policy, and economic development. As she grows in popularity, the client desired to have a central platform where her work can be easily accessed. I designed a responsive website that would increase the client’s exposure towards her audience, thus, improving traffic flow, popularity and book sales.

Adobe Illustrator | Adobe Photoshop | Figma | Visual Studio Code | Squarespace | CSS

whatt’s cookin’

April 2022

Designing a Responsive Website to Highlight Academic Excellence and Increase Audience Reach

  1. Web Design

  2. CSS Front-End

  3. Squarespace Web Development

Kathryn Ibata-Arens is a Vincent de Paul Professor of Political Economy, at DePaul University.

A scholar of innovation and entrepreneurship, science and technology policy, and economic development. As she grows in popularity, the client desired to have a central platform where her work can be easily accessed. I designed a responsive website that would increase the client’s exposure towards her audience, thus, improving traffic flow, popularity and book sales.

Adobe Illustrator | Adobe Photoshop | Figma | Visual Studio Code | Squarespace | CSS

Discovery of data clustering tools and designing for scholars.

Challenges

• The client did not have a personal website to market publications and research tools.

• Centralising client’s work into one platform — a personal website — to extend audience reach.

Focus

• Minimal Design.

• Meaningful Concept.

• Responsive site for desktop and mobile.

How-Might-We

...increase the client’s exposure?

...market the client’s expertise and services?

...create smooth interface experience for the target audience?

Key Takeaway

Designing for public figures, such as authors and scholars, provides valuable insights into incorporating marketing components into personal websites. It highlighted the significance of thorough research of the market and presenting design decisions grounded in research findings to meet client expectations.

Discovery of data clustering tools and designing for scholars.

Challenges

• The client did not have a personal website to market publications and research tools.

• Centralising client’s work into one platform — a personal website — to extend audience reach.

Focus

• Minimal Design.

• Meaningful Concept.

• Responsive site for desktop and mobile.

How-Might-We

...increase the client’s exposure?

...market the client’s expertise and services?

...create smooth interface experience for the target audience?

Key Takeaway

Designing for public figures, such as authors and scholars, provides valuable insights into incorporating marketing components into personal websites. It highlighted the significance of thorough research of the market and presenting design decisions grounded in research findings to meet client expectations.

“While working with you, I’ve learnt how to make design decisions on how I want to present by virtual presence. I’ve never thought about it that way, but I have a good feeling your wonderful work will create some traction towards my website.”


- Dr. Kathryn Ibata-Arens | Award Winning Author

“While working with you, I’ve learnt how to make design decisions on how I want to present by virtual presence. I’ve never thought about it that way, but I have a good feeling your wonderful work will create some traction towards my website.”


- Dr. Kathryn Ibata-Arens | Award Winning Author

“While working with you, I’ve learnt how to make design decisions on how I want to present by virtual presence. I’ve never thought about it that way, but I have a good feeling your wonderful work will create some traction towards my website.”


- Dr. Kathryn Ibata-Arens | Award Winning Author

Scroll

Scroll

Introduction

Introduction

Introduction

Dr. Kathryn Ibata-Arens approached us with a task of helping her create a brand and web presence. With the release of her new book, she wanted to create a central platform where her audience could get to know her, purchase her published work and get closer insights to her professional life. We had a brainstorming session and decided that what she needed was a website. Next steps were research, wire-framing, brand development, web designing and finally the product launch.

Dr. Kathryn Ibata-Arens approached us with a task of helping her create a brand and web presence. With the release of her new book, she wanted to create a central platform where her audience could get to know her, purchase her published work and get closer insights to her professional life. We had a brainstorming session and decided that what she needed was a website. Next steps were research, wire-framing, brand development, web designing and finally the product launch.

Increased the audience engagement by more than 60% and reduced the bounce rate to 33%

Increased the audience engagement by more than 60% and reduced the bounce rate to 33%

Increased the audience engagement by more than 60% and reduced the bounce rate to 33%

-Web Analytics + Google Analytics

-Web Analytics + Google Analytics

Process

Process

Process

Information Architecture

Information Architecture

I created a user flow diagram to map out how feasible will the interaction be to the end users. One of the problems I had to formulate a solution for is how the interface would provide a smooth navigation to the user. I successfully included all necessary information in each page, while maintaining a marketing perspective the client was aiming to achieve.

I created a user flow diagram to map out how feasible will the interaction be to the end users. One of the problems I had to formulate a solution for is how the interface would provide a smooth navigation to the user. I successfully included all necessary information in each page, while maintaining a marketing perspective the client was aiming to achieve.

I created a user flow diagram to map out how feasible will the interaction be to the end users. One of the problems I had to formulate a solution for is how the interface would provide a smooth navigation to the user. I successfully included all necessary information in each page, while maintaining a marketing perspective the client was aiming to achieve.

Authors in Similar Genre

Authors in Similar Genre

A few authors within the same discipline as the client that inspired the website design choices.

A few authors within the same discipline as the client that inspired the website design choices.

A few authors within the same discipline as the client that inspired the website design choices.

Prototypes

Prototypes

Prototype iterations from low fidelity to high fidelity for desktop and mobile versions.

Prototype iterations from low fidelity to high fidelity for desktop and mobile versions.

Prototype iterations from low fidelity to high fidelity for desktop and mobile versions.

Low Fidelity

Low Fidelity

Mid Fidelity

Mid Fidelity

Additional Assets

Additional Assets

Other assets included in the website but not shown in the prototyping phase.

Other assets included in the website but not shown in the prototyping phase.

Other assets included in the website but not shown in the prototyping phase.

Full Screen Menu

Full Screen Menu

Calendar

Calendar

Hover below to scroll through the site.

Hover below to scroll through the site.

View Live Website

//

Takeaways

Takeaways

Takeaways

Additional User Testing

Additional User Testing

I worked with the client and her assistant to collect content for the website. I shared detailed explanations of the design direction at each prototyping phase. I sent the final Hi-Fi prototype to the client for testing and we shared it with other people for feedback. We learned that it is important to cast a wider net when looking for user testing participants. Due to time constraints, we could only test with a few users. Additional testing would have had a huge impact on the overall project.

I worked with the client and her assistant to collect content for the website. I shared detailed explanations of the design direction at each prototyping phase. I sent the final Hi-Fi prototype to the client for testing and we shared it with other people for feedback. We learned that it is important to cast a wider net when looking for user testing participants. Due to time constraints, we could only test with a few users. Additional testing would have had a huge impact on the overall project.

I worked with the client and her assistant to collect content for the website. I shared detailed explanations of the design direction at each prototyping phase. I sent the final Hi-Fi prototype to the client for testing and we shared it with other people for feedback. We learned that it is important to cast a wider net when looking for user testing participants. Due to time constraints, we could only test with a few users. Additional testing would have had a huge impact on the overall project.

Extensive research on Specific Genres

Extensive research on Specific Genres

This project turned out to be a learning experience when it came to designing for public figures such as authors in this case. From my experience, personal websites do not have a marketing component to it, which is quite contrary to how authors want their personal websites to be. From this I learned how to do extensive research on authors, how they structured their websites, use of CTA and overall marketing language. My ability to present design decisions which were supported from findings in my research was highly appreciated by the client.

This project turned out to be a learning experience when it came to designing for public figures such as authors in this case. From my experience, personal websites do not have a marketing component to it, which is quite contrary to how authors want their personal websites to be. From this I learned how to do extensive research on authors, how they structured their websites, use of CTA and overall marketing language. My ability to present design decisions which were supported from findings in my research was highly appreciated by the client.

This project turned out to be a learning experience when it came to designing for public figures such as authors in this case. From my experience, personal websites do not have a marketing component to it, which is quite contrary to how authors want their personal websites to be. From this I learned how to do extensive research on authors, how they structured their websites, use of CTA and overall marketing language. My ability to present design decisions which were supported from findings in my research was highly appreciated by the client.

Collaboration with other developers

Collaboration with other developers

I was responsible for both UX/UI design and front-end development for this project. It was challenging, but I managed to get the client's approval by creating multiple iterations and prototypes. I had to use basic templates and custom CSS code to build the website within the allocated time. If I had more time, I would have outsourced the front-end development so I could focus on UX/UI.

I was responsible for both UX/UI design and front-end development for this project. It was challenging, but I managed to get the client's approval by creating multiple iterations and prototypes. I had to use basic templates and custom CSS code to build the website within the allocated time. If I had more time, I would have outsourced the front-end development so I could focus on UX/UI.

I was responsible for both UX/UI design and front-end development for this project. It was challenging, but I managed to get the client's approval by creating multiple iterations and prototypes. I had to use basic templates and custom CSS code to build the website within the allocated time. If I had more time, I would have outsourced the front-end development so I could focus on UX/UI.