top of page
JERMAINE LUGO
User Experience Designer
AFFINITY
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
Responsibilities:
-
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
.png)
.png)
.png)
.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
homepage.
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.
_edited.jpg)
User Workflow
Workflow for patients to purchase their medicine
.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.
.png)
.png)
Site Map - Affinity
.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.
_edited.jpg)
Wireframes
-
​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.
​
_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.
Final Screens / Deliverables
_edited.jpg)
_edited.jpg)
Website Version
_edited.jpg)
Results:
* 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.
.png)
70%
increase in sales
bottom of page