July 2023 | UX and UI design
Tea steeping timer
Project description/summary
Research
Our client provided us with a background on the eye disease, Geographic Atrophy, being targeted in this research study. This included both statistics and interviews with GA patients.
Based on the interviews conducted by the client, I developed a user persona to synthesize this research and better empathize with GA patients.
Gaining a deeper understanding of the struggles that Geographic Atrophy patients face on a daily basis was essential to decision making throughout this project. It came into play when considering the high-contrast color scheme, large body text, and giving plenty of space between elements so that they wouldn’t blur together.
Ideation
Noting the desire that users like Michael had for transparency and clarity in treatment, I wanted to provide clarity as the user went through the pre-screener. My hope was that showcasing transparency at the very beginning of their journey in this clinical trial would give them confidence and trust for the later stages of their journey.
I chose to show each question individually on screen so as to not overwhelm the user with a long list of questions. At the same time, I wanted to let the user know how long they would be filling this form out for, so I included a progress bar.
Evolution of the pre-screener design from sketches, low fidelity, to final high fidelity design.
I began the design process with quick sketches to brainstorm and visualize key pages and features.
User Flows
After receiving client feedback, we were asked to move the screener to the homepage and include a map in the clinic selection portion. We also wanted to remove any barriers to completing the screener, and make it feel more encouraging. After talking with our creative director and developers, I created diagrams to show potential options for implementing these changes.
In sketching, I opted to use the "bubbles" for the progress bar, to clarify how many questions the user would have to answer and how far they were (i.e. one bubble per question), rather than a percentage-based progress bar, which can make it difficult to discern your true progress. Based on usability testing feedback of a lo-fi prototype, this was changed to bars, and eventually a more direct “Question 1 of 5” style to assist with screen readers that GA patients may be using.
Visual Design
Moving into the high-fidelity stage, the main factor I wanted to keep in mind was visual accessibility. I opted to use high contrast colors, and a large base text size. I used a more minimal design style to avoid visual clutter and improve clarity for any visually impaired users.
The original base color palette and typeface selection came from the client-approved brochure concept created by our Art Director. However, after this concept was selected and implemented, the client came back with a new brand system and logo. While this new system was based off of the original, there were key differences in typefaces and color use that needed to be updated.
With the original style guide and components already in place, it was fairly straightforward to adapt the design to match the new branding.
image caption
Takeaways and Next Steps
highlighted the need for an improved handoff process and continued discussion between the design and development teams after the design has been presented to the client. We have initiated this conversation and are currently collaborating on ideas for current and future projects.