top of page


Project Overview: Affinity is a medical marijuana dispensary with locations in West Springfield and Boston, MA.

Problem: Affinity had a confusing and visually congested user interface on the companies Mobile and Web applications. Stakeholders wanted these B2C products made easier to navigate in addition to creating a smoother onboarding process.

Solution: Partnered with Developers and Stakeholders to flesh out a more enjoyable user experience. I conducted guerilla research with new recreational and medical patients on the usability of the current app. That research was crucial in the design and available options of the mobile application.

My Role: UX Designer


  • User Research - Competitor Analysis, Moderated Interviews, Empathy Mapping

  • Design - Wireframing, Prototyping, User Interface

Research Summary:

We selected 3 main methods of user research

Card Sorting
We conducted a card sorting research method that allowed participants to group and sort the site's information into a logical structure that will typically drive navigation and the site's information architecture.

Moderated Interviews
A screener was created to qualify the 4 to 5 participants interviewed. These included new medical patients, new caregivers, in addition to existing medical patients and their caregivers.

Remote Usability Testing
We asked participants to perform these 4 tasks.
- Create a profile
- Place a new order
- Cancel an existing order
- Checkout a newly placed order

Pain Points

Screenshot (434).png
Screenshot (435).png
Screenshot (436).png
Screenshot (437).png

Onboarding process was confusing 
- this contributed 
to the 
high bounce rate.

New strains were not available on the old mobile version

Inaccurate opening and 
closing times displayed on 

Information was scattered and difficult to find by new users.

Competitor Analysis

A competitor analysis was performed to observe the strengths and weaknesses of our direct competitors. This research method presented major opportunities that would allow Affinity to have a stronger presence in the marketplace. 

Screenshot (1227)_edited.jpg

User Workflow

Workflow for patients to purchase their medicine

Screenshot (426).png

Empathy Maps

After conducting user interviews, card sorting and remote usability research, we were able to create two Empathy Maps to reference going forward in our design process.

Screenshot (439).png
Screenshot (441).png

Site Map - Affinity 

Screenshot (443).png

Digital Wireframes

This is the homepage, products, ordering and checkout pages of the mobile app. Its simple, clean, easy to navigate and the user can place orders for their medication.

Screenshot (447)_edited.jpg


  • ​The initial wireframes were pencil and paper sketches, for the digital screen I created the initial home page in Adobe XD to show management. After approval, I moved to Figma to create low fidelity prototype which was used for user testing.

  • Receiving the feedback we started creating low-fidelity prototypes for product pages.

  • We used Adobe XD to create high fidelity prototype.

Usability Testing: Findings

Upon creating the prototype I conducted user testing to see how easily the users could navigate the website.

  • Novice users found the new design easier to successfully place orders.


  • The corporate branded app was more appealing to users.​

  • New app reduced wait time for new orders placed.

Screenshot (550)_edited.jpg

UI Design

I wanted a clean and inviting look because of the sensitivity and nature surrounding the medical dispensary. 

My design centers around the color blue which is symbolic for trustworthiness and  tranquility. 

Affinity Styleguide.png

Final Screens / Deliverables

Screenshot (1198)_edited.jpg
Screenshot (1202)_edited.jpg

Website Version

Screenshot (1200)_edited.jpg


* Affinity experienced a 70% increase in quarterly sales after introducing it's mobile application to the market.

* Consumer feedback found the product very user friendly, easy to navigate, and a major time saver.

Screenshot (1194).png

increase in sales

bottom of page