RKS Design |
Website Modernization
RKS Design |
Website Modernization
Bridging Creativity and Technology:
Elevating RKS Design's Digital Presence through Responsive Design.
Bridging Creativity and Technology:
Elevating RKS Design's Digital Presence through Responsive Design.
Bridging Creativity and Technology:
Elevating RKS Design's Digital Presence through Responsive Design.
Bridging Creativity and Technology:
Elevating RKS Design's Digital Presence through Responsive Design.
Project Summary
Project Summary
RKS Design is a global product design firm with a focus on human-centered design. I was tasked with creating a new website for RKS that would showcase their work and philosophy, while also being user-friendly and informative. I designed a new website that accurately reflects the company's brand and values, is easy to navigate, and provides users with the information they need about RKS's services and capabilities.
RKS Design is a global product design firm with a focus on human-centered design. I was tasked with creating a new website for RKS that would showcase their work and philosophy, while also being user-friendly and informative. I designed a new website that accurately reflects the company's brand and values, is easy to navigate, and provides users with the information they need about RKS's services and capabilities.
Problem
Problem
RKS Design's old website was outdated (with respect to their competitors/landscape) and did not accurately reflect the company's brand and values. Additionally, the website had many points for improvement where optimization could drive user-friendliness, as well as ease of navigation & readability to make it less difficult for users to find the information they were looking for.
RKS Design's old website was outdated (with respect to their competitors/landscape) and did not accurately reflect the company's brand and values. Additionally, the website had many points for improvement where optimization could drive user-friendliness, as well as ease of navigation & readability to make it less difficult for users to find the information they were looking for.
Project Goals
Project Goals
The goals of this project were to create a new RKS Design website that:
Accurately reflects the company's brand and values
Is user-friendly and easy to navigate
Provides users with the information they need about RKS's services and capabilities
Showcase RKS's work and portfolio
Attract new clients and job seekers
The goals of this project were to create a new RKS Design website that:
Accurately reflects the company's brand and values
Is user-friendly and easy to navigate
Provides users with the information they need about RKS's services and capabilities
Showcase RKS's work and portfolio
Attract new clients and job seekers
Requirements
Requirements
The requirements for the new RKS Design website included:
Responsive designs for the whole site, across desktop/tablet/mobile.
Re-designs for:
Primary navigation pages (Work, Methodology, About, Blog).
Available services pages.
Available markets pages.
CMS content pages (visual essays, case studies, blog posts).
Navigation (nav. bar, drop downs, footer).
Interaction design/animations.
Accessibility standards compliance.
SEO optimization.
Development of all re-designs & creation of templates/re-usable components.
Testing & iterative refinements (speed tests, heat maps, user session footage).
The requirements for the new RKS Design website included:
Responsive designs for the whole site, across desktop/tablet/mobile.
Re-designs for:
Primary navigation pages (Work, Methodology, About, Blog).
Available services pages.
Available markets pages.
CMS content pages (visual essays, case studies, blog posts).
Navigation (nav. bar, drop downs, footer).
Interaction design/animations.
Accessibility standards compliance.
SEO optimization.
Development of all re-designs & creation of templates/re-usable components.
Testing & iterative refinements (speed tests, heat maps, user session footage).
The requirements for the new RKS Design website included:
Responsive designs for the whole site, across desktop/tablet/mobile.
Re-designs for:
Primary navigation pages (Work, Methodology, About, Blog).
Available services pages.
Available markets pages.
CMS content pages (visual essays, case studies, blog posts).
Navigation (nav. bar, drop downs, footer).
Interaction design/animations.
Accessibility standards compliance.
SEO optimization.
Development of all re-designs & creation of templates/re-usable components.
Testing & iterative refinements (speed tests, heat maps, user session footage).
Project Info
Project Info
Client
Client
RKS Design
RKS Design
Year
Year
2022-2023
2022-2023
Role
Role
UX/UI
UX/UI
Services
Services
Research
Design
Development
Interaction Design
Responsive Design
Research
Design
Development
Interaction Design
Responsive Design
Tools
Tools
Adobe Illustrator
Adobe Photoshop
Asana
Elementor
Figma
Notion
Wordpress
Zoom
Adobe Illustrator
Adobe Photoshop
Asana
Elementor
Figma
Notion
Wordpress
Zoom
Process
Process
I. Discovery
I. Discovery
Prior to the project kick-off, I conducted a thorough audit of the RKS Design website, assessing accessibility compliance, architecture navigation, UX pain points, and UI improvement opportunities based on design principles and best practices. This informed the kick-off discussions, where I presented mandatory fixes and opportunities, and invited the team to collaborate on future design exploration routes.
During the first of many stakeholder huddles, I gathered details, pain points, feature requests, and individual visions unique to each department/operational component of RKS Design. This laid the foundation for my research and design exploration efforts.
In the research phase, I set out to investigate:
The needs of different website visitors.
The market/competitors, to identify strengths and weaknesses of other design firm websites.
New/emerging trends and technologies, to create a lasting, modern online presence.
Prior to the project kick-off, I conducted a thorough audit of the RKS Design website, assessing accessibility compliance, architecture navigation, UX pain points, and UI improvement opportunities based on design principles and best practices. This informed the kick-off discussions, where I presented mandatory fixes and opportunities, and invited the team to collaborate on future design exploration routes.
During the first of many stakeholder huddles, I gathered details, pain points, feature requests, and individual visions unique to each department/operational component of RKS Design. This laid the foundation for my research and design exploration efforts.
In the research phase, I set out to investigate:
The needs of different website visitors.
The market/competitors, to identify strengths and weaknesses of other design firm websites.
New/emerging trends and technologies, to create a lasting, modern online presence.
Visitor Insights
Visitor Insights
Visitor types: prospective clients, current clients, job seekers.
Goals: learn about RKS's services and capabilities, view their portfolio, contact the team.
Pain points: difficulty finding the information they were looking for, outdated design, not mobile-friendly.
Visitor types: prospective clients, current clients, job seekers.
Goals: learn about RKS's services and capabilities, view their portfolio, contact the team.
Pain points: difficulty finding the information they were looking for, outdated design, not mobile-friendly.
Competitor Insights
Competitor Insights
Strengths: strong portfolios, easy-to-navigate websites, clear calls to action.
Weaknesses: some websites are outdated, some are not mobile-friendly.
Opportunities: RKS can differentiate itself by highlighting its human-centered design approach and by creating a website that is more visually appealing and user-friendly.
Strengths: strong portfolios, easy-to-navigate websites, clear calls to action.
Weaknesses: some websites are outdated, some are not mobile-friendly.
Opportunities: RKS can differentiate itself by highlighting its human-centered design approach and by creating a website that is more visually appealing and user-friendly.
Trends & Technologies Insights
Trends & Technologies Insights
Trends: responsive design, accessibility, personalization, use of video, bold/expressive typography, abundant white space, and animation.
Technologies: WordPress plug-ins, fully-responsive elements, animation/optimization component libraries.
Opportunities: RKS can use these trends and technologies to create a website that is modern, user-friendly, and accessible to a wide audience.
Trends: responsive design, accessibility, personalization, use of video, bold/expressive typography, abundant white space, and animation
Technologies: WordPress plug-ins, fu, Shopify
Opportunities: RKS can use these trends and technologies to create a website that is modern, user-friendly, and accessible to a wide audience.
Research Takeaways
Research Takeaways
The new website should be designed with the needs of different visitor types in mind.
The website should be easy to navigate and should provide users with the information they need quickly and easily.
The website should be visually appealing and should use modern design trends and technologies.
Further considerations/questions that guided design, development, & post-launch analytic focal points:
Visitor demographics: What is the age range, gender, location, and occupation of the typical visitor to the RKS Design website?
- Visitor behavior: How do visitors use the website? What pages do they visit most often? How long do they stay on the website?
- Content preferences: What type of content do visitors find most valuable?
- Marketing channels: How do visitors find the RKS Design website?
The new website should be designed with the needs of different visitor types in mind.
The website should be easy to navigate and should provide users with the information they need quickly and easily.
The website should be visually appealing and should use modern design trends and technologies.
Further considerations/questions that guided design, development, & post-launch analytic focal points:
Visitor demographics: What is the age range, gender, location, and occupation of the typical visitor to the RKS Design website?
- Visitor behavior: How do visitors use the website? What pages do they visit most often? How long do they stay on the website?
- Content preferences: What type of content do visitors find most valuable?
- Marketing channels: How do visitors find the RKS Design website?
II. Design
II. Design
Based on the findings from the discovery phase, I created three user personas to represent the different types of visitors who would be using the website:
Prospective clients: These are businesses or organizations that are looking for a product design partner. They are interested in learning more about RKS's capabilities and process.
Current clients: These are businesses or organizations that are already working with RKS on a product design project. They need to be able to access project information and communicate with the RKS team.
Job seekers: These are people who are interested in working at RKS. They want to learn more about the company culture and open positions.
Once I had a good understanding of the needs of the different users, I began designing the website. I focused on creating a user-friendly and visually appealing design that would be easy to navigate and navigate.
I also used RKS's branding guidelines to create a consistent look and feel for the website.
Based on the findings from the discovery phase, I created three user personas to represent the different types of visitors who would be using the website:
Prospective clients: These are businesses or organizations that are looking for a product design partner. They are interested in learning more about RKS's capabilities and process.
Current clients: These are businesses or organizations that are already working with RKS on a product design project. They need to be able to access project information and communicate with the RKS team.
Job seekers: These are people who are interested in working at RKS. They want to learn more about the company culture and open positions.
Once I had a good understanding of the needs of the different users, I began designing the website. I focused on creating a user-friendly and visually appealing design that would be easy to navigate and navigate.
I also used RKS's branding guidelines to create a consistent look and feel for the website.
Design Decisions
Featured data-driven design decisions/highlights include:
- Homepage: I decided to make the homepage the most important page on the website, as it is the first page that most visitors will see; including a brief overview of RKS's services and capabilities, work spotlight sections, previews of main directory pages, and an abundance of interaction design.
- Navigation: aiming for an intuitive and appealing fresh approach to navigation, the navigation menu was expanded into a page-wide, responsive set of nested drop-downs that partitioned services/markets into relevant categories. This change, paired with bold iconography and typography, allowed for ease-of-use for all users and an intuitive approach that wasn't overwhelming with an over-abundance of choices.
- Interaction Design: with animation/interaction design a prominent focal point from both stakeholder input & research takeaways, a lot of effort was placed here to establish an immersive browsing experience, even with the finest of details, while maintaining optimal performance.
Featured data-driven design decisions/highlights include:
- Homepage: I decided to make the homepage the most important page on the website, as it is the first page that most visitors will see; including a brief overview of RKS's services and capabilities, work spotlight sections, previews of main directory pages, and an abundance of interaction design.
- Navigation: aiming for an intuitive and appealing fresh approach to navigation, the navigation menu was expanded into a page-wide, responsive set of nested drop-downs that partitioned services/markets into relevant categories. This change, paired with bold iconography and typography, allowed for ease-of-use for all users and an intuitive approach that wasn't overwhelming with an over-abundance of choices.
- Interaction Design: with animation/interaction design a prominent focal point from both stakeholder input & research takeaways, a lot of effort was placed here to establish an immersive browsing experience, even with the finest of details, while maintaining optimal performance.
III. Development
III. Development
Once the design was complete, I began developing the website. I used WordPress as the content management system (CMS), so that RKS could easily update and maintain the website in the future.
I also implemented a number of new features/UX design best practices to make the website more user-friendly, including:
- Fully-responsive design: The website is responsive across all elements, so that it looks good and functions well on all devices, including desktops, laptops, tablets, and smartphones.
- Accessibility Compliance: The website is accessible to users with disabilities, such as those who are blind or visually impaired.
- SEO Optimization: While the copy content was generated by the RKS team, I ensured the implementation was done with the proper tagging & labeling schematics.
The scope of my development efforts included:
Development of the re-designs for:
Primary navigation pages (Work, Methodology, About, Blog).
Available services pages.
Available markets pages.
[Templates for] CMS content pages (visual essays, case studies, blog posts).
Navigation (nav. bar, drop downs, footer).
Once the design was complete, I began developing the website. I used WordPress as the content management system (CMS), so that RKS could easily update and maintain the website in the future.
I also implemented a number of new features/UX design best practices to make the website more user-friendly, including:
- Fully-responsive design: The website is responsive across all elements, so that it looks good and functions well on all devices, including desktops, laptops, tablets, and smartphones.
- Accessibility Compliance: The website is accessible to users with disabilities, such as those who are blind or visually impaired.
- SEO Optimization: While the copy content was generated by the RKS team, I ensured the implementation was done with the proper tagging & labeling schematics.
The scope of my development efforts included:
Development of the re-designs for:
Primary navigation pages (Work, Methodology, About, Blog).
Available services pages.
Available markets pages.
[Templates for] CMS content pages (visual essays, case studies, blog posts).
Navigation (nav. bar, drop downs, footer).
IV. Launch
IV. Launch
The launch of the site occurred in distinct waves, with the primary navigation pages rolling out first, followed by the services & markets, and later the visual essays & blog posts. This approach allowed for more precise user-testing of the segmented releases, where we focused on site performance, SEO scoring, and heat-maps.
The copy content RKS had utilized was more on the lengthier side of things, so iterative adjustments to designs in the Figma source files, followed by live implementation, allowed for continued refinements that blended a mix of media saturation, animation, and anchor-based navigation to encourage users to explore pages more thoroughly.
The launch of the site occurred in distinct waves, with the primary navigation pages rolling out first, followed by the services & markets, and later the visual essays & blog posts. This approach allowed for more precise user-testing of the segmented releases, where we focused on site performance, SEO scoring, and heat-maps.
The copy content RKS had utilized was more on the lengthier side of
V. Learnings
V. Learnings
I learned a number of valuable lessons throughout this project, one of which being the importance of user-centered design. By involving users in the design process, via both feedback & heat-maps, I was able to create a website that meets their needs & encouraged them to explore.
Though I come from a background in both computer science & UX/UI (separately), responsive design and the emergence of new technologies/parameter customizations in website development was a huge learning experience for myself, allowing me to walk away with a better understanding of the implementation experience & the ability to more effectively engage with development teams for latter projects.
I learned a number of valuable lessons throughout this project, one of which being the importance of user-centered design. By involving users in the design process, via both feedback & heat-maps, I was able to create a website that meets their needs & encouraged them to explore.
Though I come from a background in both computer science & UX/UI (separately), responsive design and the emergence of new technologies/parameter customizations in website development was a huge learning experience for myself, allowing me to walk away with a better understanding of the implementation experience & the ability to more effectively engage with development teams for latter projects.
Another important lesson underscored for myself through this project was the importance of usability testing. By testing the site functionality and performance in partitioned releases, I was able to identify specific, key-areas where the interface could be improved, without the risk of wide-scale disruptions to any and all incoming traffic.
Lastly, I also learned the importance of being flexible and adaptable. Throughout the design process, I had to make changes to the design based on user feedback and new learnings, stakeholder new ideas and direction changes, as well as just simple quantitative performance findings.
Being the driver of this project/effort was an incredibly valuable experience, teaching me a lot in regards to practical experience, as well as about myself — being the driver of the entire project from discovery to development and bringing my designs to life myself.
Another important lesson underscored for myself through this project was the importance of usability testing. By testing the site functionality and performance in partitioned releases, I was able to identify specific, key-areas where the interface could be improved, without the risk of wide-scale disruptions to any and all incoming traffic.
Lastly, I also learned the importance of being flexible and adaptable. Throughout the design process, I had to make changes to the design based on user feedback and new learnings, stakeholder new ideas and direction changes, as well as just simple quantitative performance findings.
Being the driver of this project/effort was an incredibly valuable experience, teaching me a lot in regards to practical experience, as well as about myself — being the driver of the entire project from discovery to development and bringing my designs to life myself.
Gallery
Gallery
