CONCEPTUAL WORKUser Interfaces | Lists
Goal
Effectively convey information by utilizing cards and lists that are carefully crafted to facilitate easy scanning.
Lists & Cards
Thinking
When deciding on the most suitable card design for my project, I experimented with various background modules. Given that the cards are mostly made up of lists, my intention was to make them even easier to scan. I explored the following layouts:
Lists separated by negative space.
Lists divided by a partial border.
Lists with a full-width border and small margins on each side.
Hybrid lists/cards featuring larger full-width borders, resembling the background.
Lists utilizing the entire card space, with content clearly demarcated into individual regions based on the card's shape.
In this conceptual design, the list/card hybrid layout utilizes the principles of proximity by grouping related items within bordered regions and the law of common region by visually enclosing each item and matching the border color with the background. I am most confident in this layout because it prioritizes simplicity and scannability while also promoting cohesion and minimizing distractions.
Goal
Design a detailed screen that provides additional information pertaining to a notification sourced from a notifications feed.
Lists & Detail
Thinking
I wanted to make sure the detailed list view feels cohesive with the notifications feed, so I kept things visually consistent. I opted for a straightforward left-to-right slide for screen transitions and experimented with scale and color to draw attention to the selected meeting date and time. I wanted to easily display a week of availability so I implemented a scrolling feature for time selections across each day. The flow concludes with an interstitial modal prompting users to engage in an additional, non-critical agenda-setting process. To provide users with a sense of control, I added an option to exit the screen without progressing to the next flow if they weren’t interested in proceeding further.
