Grand Rapids Allergy
April - May 2025
West Side Technology reached out to me and requested I work on the UX design and provide wireframes for website of a new client. Grand Rapids Allergy was in need of a new more user friendly website. Their current site was generic and out of date. It held a lot of information, but it was not easy to find. I preformed the role of UX/UI Designer for this project.
Methods Practiced
Skills Used
Jobs to be Done Theory
I now find that it is essential to introduce Jobs to be Done early in my design process. This ideally begins with User Interviews, but sometimes may have to begin with the Jobs to be Done Statements. Understanding what jobs user are looking to complete when visiting your site or app or anything you’re creating really is so incredibly useful for the rest of the design process. These statements are the guiding light. I ask myself, “Does this help the user complete one of the jobs they want to do?” and if not I reevaluate what I’m designing.
ORCA
This was my third freelance project for West Side Technology solutions, but it was the first in quite some time and I was excited to show my improvements as a designer. One of the areas I feel I have improved the most in, is using the ORCA Methodology. I have taken a few courses and attended live sessions to deepen my understanding of the method and I was excited to put it into practice and design a great new website for Grand Rapids Allergy.
Noun Foraging
I began the ORCA method by doing some Noun Foraging to locate some initial objects that site visitors would be most interested in. I used the current site and the materials I had been provided by West Side Technology.
Grand Rapids Allergy original website.
Noun Foraging Objects
Allergy Services
Allergies
Treatment
Testamonials
Team Member
Resources
News Update
FAQ
Relationship Mapping
After determining the likely objects through noun foraging, it was time to focus on the relationships between these objects. I began this with relationship mapping, making connections between the objects laid out before me. It does get a bit chaotic, however, it is a good first foray into understanding the relationships these objects share.
Calls to Action Discovery
Once the objects were identified it was time to plan out what site visitors would need to do to these objects or what actions they could take on them. Below you can see the initial breakdown of actions I believe users will want to take on objects based on the Jobs to be Done statements.
Allergy Services
Learn More
Book Appointment for service.
Allergies
Learn More
See Allergy Services
See Treatments
Treatments
Learn More
Book appointment
for Treatment.
Resources
View
Download
Team Member
See Bio
View Services
View Treatments
News Updates
Read More
Share
FAQ's
Read More
Attribute Listing
During the Attribute Listing phase, I worked out what likely data and metadata would need to appear on each Object. I felt it was necessary to show certain Objects on other Objects. These are listed as (N.O.) or Nested Objects on the list below.
Allergy Services
Title
Description
Picture
Icon
Allergies (N.O.)
Treatments (N.O.)
Resources (N.O.)
News Updates (N.O.)
Testimonial (N.O.)
Allergies
Title
Description
Picture
Icon
Allergie Services (N.O.)
Treatments (N.O.)
Resources (N.O.)
Treatments
Title
Photo
Description
Allergie Services (N.O.)
Allergies (N.O.)
Resources (N.O.)
News Updates (N.O.)
Resources
Title
Description
Content
Team Member
Name
Photo
Bio
Allergy Services (N.O.)
Treatments (N.O.)
News Updates
Title
Photo
Content
Related Allergy (N.O.)
Related Treatment (N.O.)
Related Team Member (N.O.)
FAQ's
Title/Question
Answer
Related Allergy (N.O.)
Related Treatment (N.O.)
Related Team Member (N.O.)
Related Allergy Services (N.O.)
Object Guide
An object guide is an extremely useful tool to get everyone on the same page with what the objects are and what they look like. This guide breaks down the objects by definition, examples instances, the purpose of the object, the content strategy behind the object, who owns the object, and what lists should appear of the object for sorting.
This type of information and shared understanding of the objects is wonderful to have for designing a project.
Allergy Services
Definition:
Allergy Services are types of services that the Practice provides to its patients that help to discover, treat, and manage a patient's allergies. These Allergy Services consist of different Treatments that the Practice offers to their patients.
Instance examples:
Allergy Testing: Comprehensive testing to identify your specific allergens.
Allergy Shots: Immunotherapy to gradually reduce your sensitivity to allergens.
Medication Management: Tailored medication plans to control your symptoms effectively.
Purpose:
The purpose of Allergy Services for the Practice is to treat Patients for allergies they are dealing with in various different ways so that they can improve the lives of their patients. These are the core functions of the business.
The purpose of Allergy Services for the Patient is to have a number of services or tools they can use to battle their allergies and improve their day to day life.
High-level Content Strategy:
Any new Allergy Services will be outlined and delivered to WestsideTechnologies. From there WT will create a new Allergy Services card and detail page.
Ownership:
Grand Rapids Allergy
Main lists(s):
Services
Estimated number of instances:
3
Here is a example of the object guide showing Allergy Services.
Object Matrix
Relationship mapping does a great job of providing me with a basic understanding of how the objects relate to each other, however, it needs to be taken a step further. This is what the Object Matrix does, it compares each object to every other object (including itself) and defines the relationship between them. This can really be a challenging task, first you do need to determine if there is a relationship between the objects at all, if there is, you then need to determine how many relationships. As difficult as this can be, it is extremely clarifying once completed.
Object Map
The object map is where all the ORCA work comes together to create a clear picture of how the site will be structured. It reflects how a visitor’s mental model will be organized around the core objects, showing each object’s attributes, calls to action, and any nested objects.
Navigation Flow
After finishing the Object Map, I moved on to planning the Navigation Flow for the site. ORCA has a unique approach to designing navigation around the core objects, and below you’ll see how that plays out between the three most important ones. This step really takes the relationship mapping to the next level of fidelity, giving us an even clearer picture of how the objects connect and how users will navigate through them.
ORCA Cards
There are many detailed steps in ORCA process, but these are not rigid or inflexible, in fact each step is another opportunity to explore the subject in more detail and examine the user’s mental model at another level. The next step is building out very basic screens and cards using the objects, calls to actions, and attributes. Below you will see some cards and then how those cards played out in the completed wireframes.
Sketches
Paper and pen are my favorite medium to begin wire framing in. The ability to work quickly and put ideas down is unrivaled, it is the best place to begin the development stage of design.
Digital Wireframes
Below are examples of the completed digital wireframes. The wireframes begin to bring the design to life. These show to connections between the main objects. creating detail pages for Allergy Services and Treatments to better guide new patients.
The belief is that patients will come to the site wanting to understand their allergies, explore treatment options, and see the services involved. While their path may not be linear, it’s important they can easily navigate between Allergy Types, Treatments, and Services. Creating dedicated pages for each ensures a seamless experience that helps users learn about their allergies, discover treatments, and understand how GRA can help—ultimately encouraging them to reach out for an appointment.
Figma File
You can view the Figma file I shared with Westside Technology here:
Next Steps
This project was taken on as contract work and all that was required at this stage was the UX design and the initial wireframes. I have been asked to take on the next stage of this project after making my recommendations. Below is the brief outline of what the next stages of the project will be.
Mobile Layout (only desktop was requested to start)
UI Design
Color Scheme
Font
Photos
Copywriting
Design System created
Prototype
Desktop
Mobile
Create/Run a small Usability Test
3-5 Participants
Updates based on test results
Final design Handoff
Reflection
I am very grateful for the opportunity to work with West Side Technology Solutions again. I have learned so much each time due to great feedback, open communication, and a willingness to embrace new ideas. With Grand Rapids Allergy the requirement was simple, wireframes for a new website, but I was allowed to try new ideas and take risks in the design, something that I believe helped deliver a better outcome and I know made me a stronger designer.
OOUX Thinking
I have continually practiced OOUX thinking for close to a year since first happening upon it and with this project everything was really coming together. I was clearly seeing the objects and their relationships to each other. I was able to really create a mental model for the site visitor. Combining this with the Jobs to Be Done theory, I felt that I was really able to build a site that made it easy for the visitor to get what they needed when visiting. I was able to envision the scenario of patients coming to the site wanting to understand their allergies, explore treatment options, and see the allergy services involved.Thanks to OOUX thinking, I recognized that the user’s path wouldn’t be linear. Instead, the relationships between Allergy Types, Treatments, and Services would be central to their experience. By mapping these connections, I could design a flow that allows visitors to easily navigate between the objects they’re thinking about, while also giving them clear, easy access to the actions they will want to take when they’re ready.
ORCA Cards/Pages
ORCA is such a powerful methodology in my design process. In my recent studies, I learned about creating ORCA cards and pages, essentially very low-fidelity mockups of the necessary cards and detail pages. They’ve been incredibly useful for building strong information architecture. By breaking down the most important pieces of information and placing them on the object cards, then building out detail pages for each object, you create a solid foundation where the focus is entirely on the content and data, not the interface. At this level of fidelity, there’s no need (or way) to even think about UI yet, which makes it the perfect tool for crafting sound information architecture.
Sprinting
This project was pretty simple at the outset, some updated wireframes for a new site and so the timeline for delivery was 2 weeks. But I felt that to do this properly I would want to put it through the JTBD, OOUX, and ORCA methodologies and these take some serious work and time. To deliver on the 2 week timeline I set up time for extreme focus on the tasks I laid out for myself. Doing this taught me how quickly I can work and still deliver what I believe to be some of my best work ever. The key was to combine deep focus with somewhat ambitious goals. This level of challenge really pushed me to work hard and deliver a final product that I feel went above and beyond.