UX, UI Design, Website
PROCESS »
U.S. Grains came to Matrix Group with the challenging task of making their website more user friendly. Their members were having a hard time navigating the site and finding the charts and information necessary for them to buy and sell grain commodities. U.S. Grains wanted to up engagement and elevate their brand.
My role for this project encompassed both the UX and UI processes as the lead designer. We began with my IA colleague at Matrix Group performing the preliminary research, creating persona documents and the navigation that helped inform my decisions for the layout.
I started by roughly sketching some concepts by hand, with the intention of breaking out of the generic association website mold. These then moved into more high fidelity wireframes we presented to the client.
Once a content layout direction had been chosen, I moved to UI design. Showing U.S. Grains as a high quality product was paramount. If international buyers question their quality, thousands of farmers livelihoods would be at stake.
The other main goal of the new site was to display the market data charts in a very mobile friendly, interactive way. We had a few group brainstorming sessions to come up with the best way to display these data heavy charts in a visual, easily digestible way. We ultimately decided to use ‘commodity tracks’ with icons along the right hand side that you could turn off and on to compare the different grains’ data in a visual graph. This was a vast improvement over their previous table layout.
The client was extremely happy with the work we did on this site. Their members can now easily access the numbers and stats they need to show of the strength of U.S. grains and sell more commodities quickly to international buyers.
UI Design, Website
The Catholic Health Association has historically been a great client to work with at Matrix Group. Every year we get the pleasure of designing their convention, or Assembly as they call it, microsite.
The annual assembly microsite is always a fun challenge to figure out how to pair their radically different convention brand du jour with the much more reserved brand of CHA proper.
The goal of the site is to gain attendance and help members who are already registered find information easily and of course, build excitement surrounding the Assembly.
One of the great things we experimented with on this site is CSS gradients. Vibrant color gradients were part of the pre-determined brand and we wanted to amp those up even more, so as you scroll through the site the background gradients begin to change creating a really great visual effect.
UI Design, Mobile & Watch App
The National Electrical Contractors Association is a great partner to work with. As a very forward thinking association, they are always open to crazy ideas.
Their goal was to create an easy way to broadcast their news out to their members. As electrical contractors, they're out in the field for a good part of their day, so an app was a logical choice to meet their needs.
The challenge of designing this app was keeping NECA's brand presence while simplifying it down to its essence, minimizing visual clutter that would distract from the content.
We accomplished this by incorporating NECA's signature swoosh into the footer while keeping the rest of the app extremely clean, readable and easy to navigate.
UI Design
The Southern California United Food & Commercial Workers Union and Food Employers Joint Benefit Funds Administration, LLC, better known as The Fund (for obvious reasons), was a new client for me at Matrix Group. The Fund had just gone through a major rebrand and needed our help with their digital properties.
As a team we went through the UX process of user research, content auditing, developing user personas, developing navigation and wireframes. I then took the lead on interpreting this research into high fidelity design comps.
First and foremost, The Fund wanted to update their website to help disseminate information to their participants quicker and easier with a better understanding of what The Fund has to offer. Many benefits and resources were going unused because their participants were simply unaware they existed. My goal was to solve that problem.
Based on our content strategy research, it became clear that the site should be divided into four main sections, Health Care, Wellness, Retirement, and Education. I decided to give these more visual weight in the navigation by adding specific colors and iconography to each section, while applying a more subtle treatment for the two other more general sections.
Through imagery their participants can relate to, better typography hierarchy, iconography, strong navigation and uncluttered pages, I created a more conversational, friendly, and well organized approach to the design. Their participants can now quickly inform themselves of The Funds vast resources and not leave benefits on the table unused.
BRANDING, UI DESIGN, MOBILE APP
Siftir wanted to create an easier way for people to find others with similar interests. The concept was centered around being able to 'sift' through users' combined social media feeds in order to find like minded people to hang out with.
They had the idea, but needed the execution. The first item to tackle was their need to create a playful, friendly brand, starting with the logo. After that was wrapped up, they also needed my help with UX and UI design for the app itself.
I needed to keep in mind that Siftir was a lean start up and only had so many hours for development. We needed to keep it simple to start with while being thoughtful of future expansion.
I created a colorful, eye-catching logo that plays off of a "sifting" action. The letter forms appear to be performing the action of sifting the dots, while the dots represent the colorful, diverse user base.
Siftir also wanted to have a ton of color and personality, yet remain intuitive and fun to use in order to attract users as quickly as possible. I met that request by questioning user flows, multiple rounds of wireframes and making sure interactions within the app were playful, and never bland or generic.
INTERACTIVE DESIGN
The Association of Home Appliance Manufacturers helps manufacturers bring efficient and safe home appliances into the homes of consumers.
For this specific project with Matrix Group, they wanted us to help them come up with an exciting, interactive, and shareable tool to help inform their members and consumers about home appliances.
One of the biggest challenges of this project, surprisingly, was finding a kitchen to shoot. Initially we planned to take 360 photos of a kitchen in the area. However, all new construction homes we had access to had large islands in the kitchen obstructing the view of the range and/or dishwasher.
Ultimately we sadly had to scrap that idea (the 360 cam was so cool!) and go with a stock image of a kitchen. Luckily we found one that fit our needs perfectly and looked like someone could actually live there. A few hours of photoshoppin' later and all the appliances they requested now appear in the kitchen.
BRANDING, WEBSITE & MOBILE APP
GaiaCam's goal is to be your eye into nature by bringing wildlife to all of your devices through sponsored cameras all over the world.
My initial role in this project was to help GaiaCam rebrand from a company dealing solely with underwater cameras into a company with cameras all over the globe. Once the rebrand was complete, they also needed a website redesign followed up by a mobile app.
BRAND WORK
GaiaCam wanted their new brand to convey a sleek, modern and high tech company while also balancing their earthy, global side.
In creating GaiaCam's new logo, the play between the eye and globe was a perfect fit for their company philosophy of being "your eye into nature."
Working from a vector map of the world, I began to minimize coastline complexity until I arrived at the perfect spot where the continents were recognizable, yet not overly complicated or muddled, especially when scaling down to a small size.
Pairing this mark with subtle gradients and a sleek sans serif typeface, the client was very satisfied with the balance between tech and nature.
WEBSITE WORK
GaiaCam needed to revamp the UI of a current, similar web property they held. Not wanting to blow their budget, I was tasked with working within the constraints of the existing site.
Respecting the structure of a currently existing site and a tight timeline and budget, I kept the website redesign consistent with the current template and made suggestions to further improve their UX.
I also helped helped them think bigger and envision possibilities for how their site could expand in the future as they add more sponsored cameras, resulting in a larger budget.
BRANDING
Nisos is changing the way private industry addresses security by focusing on threats themselves through the application of Special Technical Operations.
Nisos began their branding efforts by choosing a powerful name with a meaningful history: Nisos, the Greek king who turned into an osprey. The name and the symbol that came with it, fit their brand perfectly. Ospreys fly high, watch over the land and use precision tactics to catch their prey.
Nisos came to me to bring their brand to life.
Nisos needed to demonstrate expertise, vigilance, strength, and trustworthiness. To tie these qualities together with the osprey symbol, I watched dozens of osprey videos on YouTube for inspiration. I found I could translate the speed, precision, and power of these birds during the hunt into a visual metaphor for strength and agility; I could also use their nesting and territorial behaviors to convey watchful defense. Ultimately, it became clear this second mode - watchful defender - most closely matched the client's strategy. That mode became the soaring osprey logo with a distinctive umbrella shape that emphasizes protection.
WEBSITE UI DESIGN
NVAR.COM »
The Northern Virginia Association of Realtors' tagline is "NVAR takes you further" but their site at the time was failing to back up that promise. They came to Matrix Group for help bringing their digital presence inline with the quality of the association.
The unique challenge with this client was the fact that they have three very distinct audiences. We ultimately decided to build out a three portal system for them as Realtors®, Homeowners and Industry Affiliates all have very different needs.
We accomplished this through exploring different ways of navigating between the portals. The main audience is Realtors®, therefore you always start on that option and can navigate to the other two portals by links in the header, footer or a FAB (floating action button).
We reinforced the awareness of switching portals through a strong color coding system.
The client was seriously great to work with, which helped the process go extremely smoothly and ultimately end up with a product everyone was happy with.
