UNIT 1
Foundational Design Skills
PROCESS BOOK
Hedy Zhang – Figma link here
IxDO Section B
1
Table of Contents
Goals & Audiences | p3 |
Content Wrangling | p4-5 |
Progressive Disclosure | p6-7 |
Wireframing | p8-10 |
The First Draft Microsite | p11-15 |
Feedback & Start to Change | p16-19 |
Final Microsite Prototype with explanation | p20-28 |
Reflection | p29-30 |
2
Goals and Audiences
The assignments in Unit 1 include Content Wrangling, Progressive Disclosure, Wireframing, and Microsite Prototype. This process book contains the mental journey, design sketches, and adjustments for our assignments.
I set the target audiences as the Media team, including external reporters and journalists. They will write reports and news and prefer to capture spotlight moments. Therefore, this audience group will tend to focus on event time, keywords, and special guest speakers. By determining the targeted audience, I can make deliberate decisions for the users and make them feel easier and more accessible to gather the information they need. Here is an example of user persona:
(reporters, journalists)
Media team
3
Contents Wrangling
Info filtering
Instruction gives a lot of text here, and I first filtered and organized the information. I categorized them according to their themes and used the hierarchy to present them.
4
Contents Wrangling
01
Meeting title
Date
Location
I add keywords for the audience
Description / Intro
I used DAY 1 / DAY 2 / DAY 3 to separate each session
Each session’s information (time, topic, brief intro)
Keywords and Speakers are emphasized here
5
Progressive Disclosure
The GRID divides the surface of the page into smaller areas that are dedicated to specific purposes, based on content. Firstly, I analyzed the content from the first assignment, identified the different elements that make up the whole. Grid helps me to achieve a consistent and organized design.
Also, I chose the BLACK BACKGROUND to make a strong contrast for audiences to pay attention to.
Process: Adding the grid
6
Progressive Disclosure
Make visual decisions based on the rational organization of content.
The assignment limits the chosen of typography, so I made some info capitalized, Italic, or Bold to stand out.
Length, typographic rhythm, whitespace, headlines affect readability – impact of design
The process to achieve effective hierarchy, alignment and consistency.
7
Wireframing
Wireframing focus on functionality, accessibility, layout and navigation to make a design easier to use, produce and sell (leave nice-to-have features out). It Communicate four items
Feedforward / Feedback builds trust and confidence. FEEDFORWARD tells users what will happen when they perform an action, and FEEDBACK provides confirmation to users that they have achieved what they intended.
Two types of feedforward: When direct (physical) carries of meaning don’t work, semantic (verbal/iconic) may be imposed on them. In my design, I used icon and texts to inform users.
Click? Swipe? Tap? Scroll? Pinch? Pull? Zoom? Drag?
Hover? Long hold?
8
Wireframing
WIreframing is a process to draw an overview of interactive products to establish the structure and flow of possible design solutions.
Firstly I’m thinking about what pages I need to include in my design
And then what kind of buttons/icons I need to apply
9
Miro Board: link here
10
11
Scroll-down?
12
13
14
15
Feedback from Profs & TA
Iris:
Julia:
Greg:
16
Different colors have the ability to evoke emotional responses, such as calm, happiness, or frustration. When it comes to using colors in my website design, it’s essential to consider the meeting’s niche, target audience, branding, and the elements of color theory.
What colors will the target audience respond to?
Use a consistent color scheme?
is it overwhelming or pleasing to look at?
Color
17
We can use only one typeface.
TYPOGRAPHY
Open Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.
Even though we are required to use only one typeface, the slight change in text size, color, underline, italic, bold, margins, and whitespace can make it look differently.
18
Start to change
I made a lot of changes on the Navigation bar
Keep my original idea that use the logo returns to home page, and I think it meets users’ expectation
Change all the icons to texts to be more clear, and to avoid of confusion.
Add “Speakers” because I think the media teams care about the guests more
Add “Register” for audience to register, and apply a different color, make it clickable to be more apparent
19
HOME PAGE
The black background makes me feel too much contrast – which is a little bit overwhelming, so I changed to dark blue to be tender.
If all the texts are in white, the hierarchy may not be that clear. Gradient color in green & blue can be a way to provide a sense of technology
Based on Greg’s feedback, I keep the schedule section, so I deleted the session info on the home page, to make it more concise and clear.
20
ABOUT PAGE
Put keywords here, and use the consistent gradient color as in the home page for users
Color: Use light gray for most text to be more tender, and use white to highlight the title of the meeting.
Consistent in navigator
21
SPEAKERS
I believe media team will focus more on speakers and their background, because they can promote their reports or news by adding some gimmick or eye-catching words.
Ideally, if users click on “View profile”, they can get to a new page to get more info
In reality, there will be more info added here, to share speakers’ company or job position, photo)
22
SEARCH PAGE
Search page: users can input keywords to find info they want
On each page, users will know where they are because I highlighted the words in different pages (bold + underline)
More contact info will be provided (i.e., social media)
23
REGISTRATION PAGE
I intentionally make CANCEL in dark, and make SUBMIT in color to encourage users to register
Checkbox to select the session they want to go
Red star refers to the required info for users to fill in
24
AGENDA PAGE
I plan to keep the agenda page, but delete the session info previously appeared in the home page to reduce repetition.
Clickable, to view from the first session
Use the FRI/SAT/SUN as the reference – like a calendar
Click on learn more to get into each session’s page
25
SESSION PAGE
The other two sessions’ page share the same layout and design, so I’ll just display once
Based on Julia’s feedback, I added an arrow to guide viewers to view each event smoothly (don’t need to return to the schedule page and click again)
Keywords are highlighted, and I use consistent way as the way I used in About Page
Time and Date are emphasized in gradient color
26
FINAL VERSION of the MICROSITE
27
PROTOTYPE
With a consistent navigation bar, users can return back to any page they want
28
Reflection: There are many factors to consider
Color affects the user experience with regard to Contrast and legibility, Emphasis, Emotion, Progressive disclosure, and Hierarchy.
Functionality is important to think about. Does the info effectively present to the audience? It’s crucial to view website’s features from the user’s perspective.
Typography is related to font, letter-spacing, line length, line height, paragraph spacing, type alignment, etc. While legibility is determined by the characters in a typeface, readability refers to how easy it is to read words or blocks of text, which is affected by the style of a typeface.
Accessibility is usability for people who interact with products differently. The first and foremost step to build an accessible product is to build empathy and install an inclusive design mentality.
Feedforward & Feedback
This is the most important thing I learned in the first unit. Designers need to design intentionally and even use psychological techniques to guide the users. The "OK - Cancel" or "Cancel - OK" example we mentioned in class inspired me greatly, and I tried to apply intentional friction in my microsite design. I intentionally separate the submit button from the cancel button by using a different color because I don't t want to entice a user to click on sth incorrectly (this breaks trust).
29
Reflection (cont.)
I realize that UX design is a long process, and the assignments in unit 1 best illustrate this point well. Specifically, our first assignment, content wrangling, focused on information filtering and extraction, which is closely related to information architecture. And the second assignment, progressive disclosure, is about hierarchy, grid, and layout. It requires designers to consider the readability and the use of typography carefully.
As we moved to assignment 3, Wireframing requires interactive thinking, allowing designers to think about issues and expectations from the perspective of users. Making the sketch from Low-fi to High-fi is also a process for designers to brainstorm and figure out the best solution. The last assignment on microsite prototyping allows us to apply it practically. We have to figure out the underlying logic and add them to our design. This assignment involves all the elements we learned and requires actual interaction design. Generally, I really like the experience that we were able to get in touch with design thinking step by step.
30