Designed and developed the SocialHRCamp website, from concept and style guide to user-friendly implementation.
I independently designed and developed the SocialHRCamp website, managing the entire process from initial concept to final implementation.
This included conducting research and collaborating with stakeholders to understand the audience and event goals, creating a cohesive style guide to ensure consistency, and crafting user-friendly interfaces that highlight events and a directory of cities. I also handled the technical implementation, ensuring a seamless and functional digital experience.
The previous SocialHRCamp website was outdated, lacking both the visual appeal and functionality needed to support the company’s growth.
While the company wanted to expand its HR events to 25 different cities across North America and globally, there was no dedicated section to showcase these locations or event details effectively.
The goal was to improve user experience, accommodate the new event structure, and align with the company’s expanded vision of reaching 25 cities across North America and globally.
By focusing on both aesthetics and functionality, the new site would successfully capture SocialHRCamp’s growing global presence and enhance user engagement.
Held client meetings to understand their needs about what they wanted changed, added and removed from their website.
Clarified project goals: improve design, add city-based event sections, and enhance user experience.
Created two design concepts with wireframes, focusing on structure, layout, and inspiration from competitor websites.
Developed high-fidelity prototypes showcasing the new event features and overall design.
Conducted User testing and gathered client feedback to refine the design for the final implementation.
In the initial meeting with the client, we discussed the key goals for the new website:
The client shared a list of 8 competitor websites doing similar HR events, expressing a desire to draw inspiration from their designs. This gave me a clear direction for the project, allowing me to understand the features and visual elements that resonated with the client and how to adapt them to fit SocialHRCamp’s unique needs.
To gain a clearer understanding of the client’s vision, I thoroughly explored the competitor websites they provided. By analyzing the design, layout, features, and user interactions of these sites, I identified key elements that stood out to the client, such as event filtering options, clean navigation, and modern aesthetics.
This research helped me pinpoint the aspects the client liked and wanted to incorporate into SocialHRCamp’s new design, while also ensuring the final product was unique and tailored to their specific needs.
"Define the problem clearly before you start looking for a solution."
- W. Edwards Deming
After conducting thorough research on the competitor websites and analyzing the client’s needs, I defined the project scope.
Each step was aimed at delivering a user-friendly, dynamic website that met the client’s vision and business goals.
"The details are not the details. They make the design."
- Charles Eames
Once I completed the paper sketches, I transitioned to creating mid-fidelity wireframes. These wireframes allowed me to define the website's structure more clearly, showcasing the layout, content hierarchy, and key features. I focused on refining the user flow, ensuring intuitive navigation and functionality. The mid-fidelity designs provided a solid framework for the high-fidelity designs and helped the client visualize the website’s structure before diving into more detailed visuals.
After the creation of the mid-fidelity designs, I presented them to the clients and the overall feedback was positive. I was given approval to begin the next step of the process: i.e. create a style guide and implement the styling.
Going into research for the colors and font, I assembled a style guide and then styled my intial designs. However this is where the poblem emerged.
Once the hi-fidelity designs were created, the overall design and styling of the website seemed subpar to me. As I wasn't satisfied with the designs, I decided to do some user testing and get some additional detailed feedback from the clients from which I had them closely address several things (font, layout, structure).
In order to rectify the issues I faced with my designs, I needed feedback on a few certain things. Once I would be able to see where I went wrong with the designs and where I could improve on them from, I would be able to create a product that aligned more with the client's needs.
The overall aesthetic appeal of the site. Does the design appear to have consistency in visual elements like colors, typography, and spacing across all pages.
Is the site is intuitive and user-friendly.I Can users navigate easily and find information quickly?
Is the messaging easy to understand and aligned with user needs? Is there unnessecary jargon that needs to be cut?
How do users interact with the site? Are buttons, links, and forms intuitive and responsive?
To ensure the new SocialHRcamp website met user needs, I conducted user testing with four participants of varying backgrounds to get the feedback I required.
Additionally, I presented the designs to clients to incorporate their insights into the final product. This collaborative feedback informed several design iterations across the site by highlighting several needs the client had from the site.
Once I had compiled the feedback I had received, I listed down the changes I would need to make and how I would improve the site. I decided to list down the different pages and note down what changes each of the pages could use in order to rectify the issues.
After incorporating feedback from user testing and client discussions, I refined the website to align with both user needs and the client’s vision. Each page, from the revamped homepage with its dynamic design to the restructured Community and Sponsorship pages, was reviewed and approved by the client.
The client expressed their satisfaction with the final design, highlighting how the updated layout, interactive elements, and improved usability effectively captured their goals. With the design phase complete and client approval secured, I received the go-ahead to proceed with the next step: implementing the designs to bring the new SocialHRcamp website to life.
Before moving forward with the implementation, I focused on creating a comprehensive style guide to ensure visual consistency and a cohesive design across the SocialHRcamp website.
To develop the color palette, I used Coolors, a tool that helps generate harmonious color schemes. By experimenting with different combinations, I curated a palette that balanced vibrancy and professionalism, aligning with the client’s goals and the brand's essence.
For typography, I utilized The Good Line Height, a tool that calculates the ideal font sizes and line heights for readability and aesthetic appeal. This ensured that all text on the site—from headers to body copy—was legible, visually balanced, and engaging for users across devices.
With a finalized style guide covering colors, typography, and spacing, I was ready to begin implementing the designs with a strong foundation for consistency and scalability.
