Tetragram helps users get the most out of medical cannabis—featuring a personal session journal, groups, and logged product and dispensary information.
My Role
∙ High-Fidelity Wireframes
∙ Mobile Interface Design
∙ Atomic Design System
Team
Dhan Bhat, UX Designer
Natalie Wood, Interactive Designer
Client
Tetragram, tetragramapp.com↗
Process
Due to the limited budget and timeline of this project, I was not tasked to create user personas, user flows, or conduct user research. Instead, I went straight into creating the entire collection of high-fidelity wireframe flows in Figma after being given brief user data and shared low-fidelity sketches.
Original Low-Fidelity Sketches
Sketches by Dhan Bhat, UX Designer
High-Fidelity Wireframes
Rather than creating distinct user flows, the constraints of this project forced me to determine the structure of this app during the working design process—in collaboration with client stakeholders, design managers, and project managers.
In order to find the best solutions to each user goal laid out in the product requirements document, I carefully considered the role of each interactive element across the whole experience, being mindful of the project's specific cannabis patient user. I organized frames and screens in chronological order, to present the wireframe designs as steps within the larger flows built across the working document.
Mobile Interface Design
Journal and Session Summary
User are presented with an empty state that encourages them to log a new session, as sessions are the core of the Tetragram experience. Journals let users view their ........
[[[[finish]]]]]]
Log Session
After entering health goals, users can enter comprehensive product information for their session. Within the search product screen, users can find new products based on search terms, chose previously added products, or scan the QR code from their product packaging. To make user input more intuitive, I separated search input and QR code scan into separate actions, while keeping the Scan QR button within the search product modal in case the user quickly wants to switch to scanning rather than searching.
As many users are considerate of the complexity of product information, they can 'Get Specific' and include strain composition, compound details, and intake method like number of hits. For compound selection, many options are available and a static dropdown presents the clearest way for the user to view all options at an overview. For number of hits, the client was insistent on including a slider, so I found compromise in using a segmented design for clearer depiction of the range of input values.
3. Product Notes and Success
Many users often use more than one product during their sessions—and can 'Add Another Product' to completely customize their session experience. Across the majority of the Tetragram experience, bottom-fixed buttons create a common pattern throughout the app, with their position closer to users' thumbs to make continuing through flows quick and efficient.
After adding a session, users can rate their session right away, or can set a reminder in 30 minutes to wait until the intended results of their product(s) start to take effect. I used primary and secondary buttons to hint to the user which of the two actions is more significant; in the context of the success screen, research determined that the majority of users will need to wait to rate their session and therefore the 'Remind Me Later' action was given primary priority.
Rate Experience
After a user adds a session, they can rate the session experience to see how the effective the product treated their health goals and condition relief. Similar to the slider within the Intake flow, the client was insistent on using a slider for the relief and symptoms input, which presented a UX challenge at first because the range of values from immediate to 2 hours had too many indeterminate options.
To solve this, I switched both to a segmented slider and included a input field above for extra clarity, using 15-minute increments for both sections as more granular time values seemed too specific for the generalized feeling of effects that users will feel following session intake. Similar chip styles are used for flavor and feeling selections to ensure consistency across rating flows.
Dispensaries and Rate Dispensary Modal
Users can search for dispensaries based on store name and location, and can view public reviews from any dispensary modal. A 'Favorite' button helps users more easily identity their most liked stores, especially as user research indicated that most patients will have many dispensaries saved.
Similar to the 'Rate Experience' flow, users can add their own personal ratings to dispensaries, with this information below the public reviews, using distinct coloration and separate layout to clearly indicate public reviews from personal ratings. Iconography next to the personal rating helps visually indicate the rating distinctions to the user, reducing cognitive load.
Create Post / Share Session
After entering session information in the Journal flow, users can view their session summary in two tabbed sections—session details and overall experience—the latter using iconography similar to the dispensary rating information to more quickly indicate the details to the user. The smaller 'Share Session' button allows for a quick way for users to publish their session details to their joined groups.
I decided that the best way for the user to select information from their session was through a native checklist design; the familiar styling of the checkboxes and list items makes sharing information quick and intuitive. A similar card style to the product card within the Log a Session flow brings consistency and cohesiveness to the overall experience.
Groups, Posts, and Comments
The groups sections within Tetragram is where users can join communities based on similar health goals, interests, and values. The majority of users have access to invite-only private groups, and public groups searchable within the 'Discover' tab—whereas admin users can create new groups and manage privacy settings, posting permissions, and group information.
Initially, the 'Create Group' button was fixed to the bottom of the groups home screen, to align with the button pattern across the rest of the app, but I moved it to the top of the screen to distinguish that it is a distinct admin-only action. Within the Create Group modal, I had initially used a switch to toggle a 'Private Group', but changed the input to a segmented control to more clearly represent that 'Public' and 'Private' are different group types.
Posts within groups can contain text-only threads and conversations, or include logged session cards to start conversations about specific strains and session experiences. The layout and organization for the commenting flow follows basic patterns present in other social media experiences.
Mobile Interface Design
Atomic Design System
I joined two other Interactive Designers during the Discovery phase of the project to define the visual style of the mobile app—and built out a comprehensive Atomic Design System based on atoms and molecules to make the creation of more complex components in the future as seamless and streamlined as possible.
As I transitioned into the Lead Designer for this project, I adapted original interactive elements—like card styles and buttons—to fit within the larger complexity of elements within the mobile app, such as making medium and small-sized buttons, several card variations, and various filter chips and segmented picker elements. In total, bold gradient styles, sleek and modern typography, and instructive icons come together to create a distinct visual style that feels clean, approachable, and unique to Tetragram.
