01 / Featured case study · From alpha to finished product
From a functional alpha to a finished research toolkit. WearITReadR brings data access, study documentation, flowcharts, and AI-assisted study creation into one interface.
Role
Researcher & designer
Timeline
August 2024 - Present
Tools
Shiny · Wear-IT · LLM · Qualtrics · JSON · Pyhton · R · YAML · CSS · Javascript
Methods
Feasibility, Acceptability and Usability trial
The project in brief
Start with the working demo, then follow my design process: from the first functional prototype, through wireframes and mockups, to the finished product. The feasibility trial comes last.
Try it first
The finished toolkit, live.
5,700+
Lines of source code across R, Python, and CSS
285
Commits I’ve authored since May 2024
31
R source files in the package
Try it yourself: this is a clickable recreation of the app. Use the left panel to move between tools, open the codebook, search the data dictionary, build a flowchart, or ask the AI Study Assistant for a schedule. It loads the real Daily Diary documentation from the project’s GitHub repository, and nothing you type is sent anywhere.
My design process · 01 / Prototype
Start with the core tasks.
The first alpha made the essential functions visible: pulling Wear-IT data, selecting codebook sections, and entering study metadata. These screens capture the starting point before a shared application layout took shape.
Alpha / Home
The first prototype introduced the tool’s purpose with a simple top navigation.
Alpha / Data pull
Study ID and API token fields made the initial Wear-IT data-pull workflow visible.
Alpha / Codebook generator
An expandable selection tree and study metadata fields formed the early codebook generator.
The starting point / A small set of functional screens, before wireframing the broader research workflow.
My design process · 02 / Wireframes
Give every task a place.
Low-fidelity wireframes mapped six core views around a consistent sidebar. Survey selection, previews, generation, and downloads each received a clear place in the interface, without committing to visual polish too early.
Wireframe / Home
A shared sidebar connected survey selection with the tool’s main research tasks.
Wireframe / Data pull
Survey selection, a data preview, and the pull-data action were grouped into one screen.
Wireframe / Codebook generator
Source data, codebook options, and generation were separated into distinct steps.
Wireframe / Codebook viewer
A contents panel sat beside the codebook preview, with a dedicated download action.
Wireframe / Data dictionary
The dictionary view organized variables, types, and descriptions into a table.
Wireframe / Flowchart
Survey selection and a simple start-to-end diagram established the flowchart view.
My design process · 03 / Mockups
Make the toolkit feel like one product.
The visual mockup explored a common application shell across six views: navigation, forms, document previews, data tables, and survey logic. This is the design exploration, shown separately from the implemented screens that follow.
UI mockup / Research toolkit
A six-screen visual exploration brought navigation, forms, document previews, tables, and survey logic into one visual system.
My design process · 04 / Final product
The finished product.
The finished interface brings data access, codebooks, data dictionaries, study flowcharts, and the AI Study Assistant together in one shared application shell. Select any screenshot to view it at full size.
Finished product / Home
The WearITReadR home screen introduces the toolkit and provides a working-directory selector.
Finished product / Data pull
The finished data-pull screen groups study credentials, saved-key selection, a Wear-IT endpoint, and the primary pull action.
Finished product / Codebook generator
Codebook options and study metadata appear side by side within the shared application shell.
Finished product / Codebook viewer
The document viewer displays a generated study codebook, including its contents and variable pages.
Finished product / Dictionary generator
A dedicated action generates a data dictionary from the data pulled into the app.
Finished product / Dictionary viewer
The dictionary table exposes question text, response types, missingness codes, ranges, and response labels.
Finished product / Study flowchart
Survey selection, flowchart generation, and PNG export sit above the branching survey diagram.
Finished product / AI Study Assistant
Configuration and a chat-based prompt support creating or changing a study within the same toolkit.
Feasibility trial · 01 / The question
Can AI make study creation more useful?
Feasibility trial · 02 / Research
Putting the idea to the test.
Methods / I ran a feasibility trial comparing my AI generator with Qualtrics. [Add the study design, tasks, conditions, and analysis approach.]
Participants / [N] participants. [Add recruitment, relevant characteristics, inclusion criteria, and consent details.]
Measures / [List the actual measures, how each was scored, and what each helped me understand.]
Feasibility trial · 03 / Key findings
What the trial taught me.
I’m connecting the trial evidence to the decisions behind the redesign. [Add the findings below, with enough context to explain what each means.]
01 / [Add insight]
[Describe the observation, the evidence behind it, and what I changed in response.]
02 / [Add insight]
[Explain a second pattern from the trial and why it mattered for the experience.]
03 / [Add insight]
[Add a third insight, including any uncertainty or limitation in the evidence.]
“[Add a short, verbatim participant quote.]”
[Participant ID · context · permission to quote]
Reflection & next steps
Useful tools need thoughtful testing.
The interface is now implemented, but screenshots alone do not establish usability or research impact. My next step is to evaluate the finished workflow with [target users] against [success criteria], and connect those results to the next iteration.