_
CONCEPTING
Data-Driven Design
- Information Architecture
- Card Sorting
- User Flow
- Interaction Design
- Heuristic Evaluation
- Wireframing
I INCORPORATED card sorting feedback in order to organize the content, CREATED an efficient sitemap to support the user flows, DEVELOPED effective triggers and prompts, CONSIDERED challenging moments, and ITERATED on wireframes.
Information Architecture
Choreography of the System
I chose a Strict Hierarchy approach where a dashboard presents a visual display of the top-level categories.
Card Sorting
Users Help to Organize the Content
Insight was needed from users to make sure my choices would make sense. I used Optimal Workshop to conduct an open card sort study with 30 cards and five participants. In general, the five participants were consistent in grouping terms and phrases that shared a common word like “expert”. They were less consistent in grouping terms or phrases that were unfamiliar, or did not share common words.
- The meaning of the word “dashboard” was not consistently understood by the participants. Using “home” may be a better choice for designating the starting point of the app.
- There may need to be a single “Get Help” button that will provide options to receive a call/video call, or to search for previously solved problems from other members.
- The “Potting Shed” category will need to be renamed or better explained in order for users to understand that this is a place to store your tools and other helpers within the app.
Learnings
For my future card sort sessions, I'll spend more time phrasing the cards in more specific terms in order to eliminate confusion.
Revised Sitemap
A Better Design Pattern
The Dashboard screen was replaced with a Home screen to provide a clear entry point. Each of the the two help methods form the main structure of the site.
Interaction Design
Prompts & Triggers
My goal was to create successful prompts and triggers to engage, and delight Gianna. I developed a navigation pattern strategy for this mobile-first solution, then adapted it to the desktop format. To guide my design process I used Interaction Design methods, navigational heuristic principles, familiar design patterns, and usability heuristics. I was focused on providing the easiest and most discoverable navigation system to help Gianna instantly talk to an expert to get advice with her yard makeover.
Heuristic Evaluation
I performed a Heuristic Evaluation of another web app using Nielsen's 10 Usability Heuristics in order to be mindful of each user Interaction.
1. Visibility of System Status
2. Match Between System & the Real World
3. User Control & Freedom
4. Consistency & Standards
5. Error Prevention
6. Recognition Rather than Recall
7. Flexibility and Efficiency of Use
8. Aesthetic & Minimalist Design
9. Help Users Recognize, Diagnose, & Recover from Errors
10. Help & Documentation
User Flow
Crafting the Choreography for Jade
Low Fidelity Wireframes
Navigational Heuristic principles guided the design process.
- Make it visible
- Show the user’s current location
- Easy to read
- Big enough to tap
Desktop
The layout shifts from single column to multi-column. Help options are front and center, with the primary and secondary categories on each side.
