Redesigning the Recommendations feature for WholeScripts.com
Thu Jun 03 2021
As the sole connection between practitioner and patient (the two main user types of WholeScripts.com), the Recommendations feature is integral to driving sales for the business. It allows practitioners to recommend supplements directly to their patients for purchase. Before the site was first launched, it was developed rapidly to meet a deadline, and by the time I joined the team it was due for some TLC.
Desgin sprint
After the design team defined user journeys, the whole team came together to begin prototyping. We did a Crazy 8’s exercise to start the flow of ideas. Crazy 8’s and other rapid prototyping methods are useful because they give you space to explore ideas from scratch and think outside the box of the browser viewport or Figma canvas.
During this phase, I came up with the idea of adding a new widget that gives practitioners quick access to their protocols—or essentially saved, templated recommendations. Given the extremely similar nature of these features, and the need for users to recommend protocols often, it made sense to synthesize their flows a bit.
The team agreed and my proposal made it into the interactive prototype—and eventually, the final design.
User testing
XYMOGEN maintains strong relationships with a large amount of their most valuable customers, which provides the design team with personal access to superusers for heuristic testing. We set up several Zoom calls with these users to conduct think-aloud protocol style testing and collect feedback firsthand.
I was able to run at least one of these calls and the critiques received were invaluable. They informed several reiterations of the prototype and helped us reach a final design where we could feel confident would simplify the user flow.
Responsive development
The design featured a drastic layout shift from tablet to mobile resolutions. So drastic that simply shifting elements with grid-template-columns or flex-wrap wouldn’t suffice. One particular component was placed in entirely different parts of the page in the two layouts. This component also contained a large amount of dynamic data. I didn’t want to write the HTML for it twice and introduce redundant markup that potentially renders the data more than once.
Insert grid-template-areas. My savior. I was only vaguely familiar with this property before this project, but it ended up being exactly what I needed to allow for completely rearranging the layout at different screen sizes.
The property, paired with grid-area, allows you to label all grid items within a grid and declare their positions in a template regardless of their order in the HTML. It’s like having a puzzle that can be put together in different ways according to the size of your table (or whatever surface you like to do your puzzles on).
AngularJS
The Angular portion of the feature was pretty straightforward. We mainly utilized the framework for its templating engine, handling and transforming data on the client side, and conditional rendering.