Wireframes
Build Wireframes to Test Feature Placement Concepts
I used wireframing to help answer the larger question of where to place the LD program within the app. I began with the Enrollment Flow, as this would be the first touchpoint for users. To start, I focused on the screens themselves and was not yet concerned with specific entry and exit points of the flow.
First Iteration of the Enrollment Flow
Notes on Iteration One
1. Select a Start Point Screen Should Not Appear During Enrollment
The screen requests a time-consuming task midway through enrollment. We were concerned that users would abandon the flow or hastily complete the task.
2. Confirmation Screen Needs Clarification
The Confirmation Screen asks user to select a theme. An ideal approach would be a true confirmation message without an additional task.
3. Need to Allow for Undo and Exit
The Confirmation Screen design created uncertainty regarding program enrollment and what would happen if users selected the back button or exited the flow before selecting a theme.
Second Iteration of Enrollment Flow
Notes on Iteration Two
1. Post-Enrollment Screen Not Ideal
Ideally, only simple instructions on next steps would be displayed and not a screen asking users to complete a lengthy task.
2. Tabular Navigation Created Other Navigation Problems
The tab approach introduced uncertainty as to how users would navigate to post-enrollment LD content and how they might return to the Enrollment Flow.
3. Confirmation Screen Still Not Working
Adding the link wasn’t a good solve and though the screen stated enrollment was confirmed, it requested users to complete a final enrollment-related task.
A Moment of Feeling Stuck
After the second iteration, I found it was imperative to decide:
- How do users enter the flow?
- Where are users taken at the completion of the flow?
Answering these questions was not easy as both were interconnected with the larger question of where to place the new LD feature.
My Method to Address these Questions
I built low-fidelity wireframes of the other primary task flows.
Doing so gave me a holistic picture of the feature.
I considered: "What are the most intuitive entry and exit points?"
In other words, I set aside my what I knew about the app and considered which locations would provide the greatest benefits to users. My answer was the Home Screen, as this location was the most frequented.
Low-fidelty wireframes of the other primary task flows.
My Solution—A Dynamic Card on the Home Screen
Continuing with the concept of starting and ending the Enrollment Flow on the Home Screen, I designed a conditional card to match the user's current state in the LD Program.
States of the dynamic card that displays LD Program content.
The Dynamic Card Unlocked the Puzzle of Where to Place the New Feature
After mapping the rest of the task flows, it became more apparent that the new feature would need to sit within the existing Hills feature. The concern of this approach is that the content might feel buried. The dynamic card resolved this concern.
Mental Models of Current Features
Nesting LD within the Hills best aligned with mental models and existing functionality. However, the nested placement would require tapping through multiple screens to see program progress, adding usability cost.
Frequency of Access to LD Program Content
Completion of the program may take 3 to 6 months, and users would need to access core content once very few weeks. Intermittent access over an extended period might pose challenges for users in recalling how to locate the feature within the app.
Third iteration of Enrollment Flow
With the concept of the conditional card on the Home Screen approved with the project stakeholders, I moved forward with a third iteration.
Notes on Iteration Three
1. Removed the Select a Start Point Screen
After the second iteration, the Co-Founder/Head of Product and I determined that users could complete this task at a different moment in time.
2. Decoupled Confirmation Message and Theme Selection
Moving the confirmation outside of the flow, while containing theme selection within the flow, resolved the ambiguity of enrollment status created by earlier designs.
3. A Progress Indicator Creates Additional Clarity
Along with moving the confirmation message, the progress indicator adds a true start and stop point.
4. The Wireframes were Ready for Visual Design
Resolving this flow aided the work of finalizing the rest of the LD program wireframes. With this solution, all wireframes were ready for visual design.
