Widgets
Dynamic Staff Widget with Pop-Up Modal
This widget was created to plug into a companies staff page and easily add a photo, name, position, bio, and a couple optional buttons (Call, Email). Our company had a few different versions that varied in their content options and design look. I saw an opportunity to bring all of the best elements together to create a new widget that would end up replacing them all.
Widget Example
I have opted to show the two column layout. It shows how a grid layout would be achieved. While also being able to extend each card the full width of the row to show the staff in a list view. Feel free to click the read more button to see how the modal functions.
Conducting User Research
I didn't set out to make this widget the new "go-to" for our team but my approach is what ultimately led to it's success. Before beginning I talked with all of the website designers on the team to get their feedback on the current staff widgets. What they liked, what they didn't like, and lastly what features they wished our current staff widgets had. Their main feedback was as follows:
- The ability to make the widget a grid view to allow for more than one staff member per row - We currently had two different widgets depending on if they wanted a grid view or list view.
- A more responsive modal between device types - The current was not very adaptable when it came to switching between small desktop/tablet views.
- An Option for Additional buttons - The only button on the current widgets was the "Read More" button that would open the modal to read the full bio.
- More control over text styling within the widget design interface- Current widgets were limited on the text styling available, for example, not being able to control the line height to adapt better for different fonts.
I found that the person who built the previous staff widgets kept the front end user in mind but ignored the designer's user experience when using the widget in the design editor. By keeping the front end user as the focus, but not ignoring the designer's user experience, I was able to create a new, better widget for our team that gave a better user experience to the designer while also satisfying the needs of our clients.
Image with Text & Button Overlay
My initial widget was designed to provide designers with a streamlined method to overlay text and a button onto images, enhancing design flexibility. Here is an example of how the widget has been effectively integrated into a design.
This project allowed me to apply my HTML and CSS expertise, in combination with the website platform's widget builders, to develop a new tool that was previously unavailable to our team. Following this success, I decided to build upon the concept by creating a widget that seamlessly combines service packages offered by our clients, ensuring both a visually appealing presentation and an optimal user experience.
Calls to Action with Description on Hover
Displaying service packages can be challenging, particularly when dealing with categories of options, each offering a unique set of services. The goal is to organize the content in a visually appealing manner without overwhelming the user with endless scrolling. To address this, I developed a widget that effectively organizes the data while ensuring a positive user experience.
Widget Example
Service Package Tabs
Displaying service packages can be challenging, especially when dealing with categories of options, each offering different services. The goal is to organize the content in a visually appealing manner without overwhelming the user with endless scrolling. To address this, I developed a widget that effectively organizes the data while ensuring a positive user experience.
In the example screenshot, you'll notice the categories displayed at the top, with each category containing cards that clearly outline the details of each package. The user simply has to click on the next category to display the corresponding services, making navigation seamless and intuitive.
