UX/UI Design
Zi Wanghttps://www.notion.so/harmonyone/9d3c82c6be4042a4830d15262827523e?v=e5d13562bd314e938e7106b12378f46b
Bio:
I’m a UX/UI designer with a background in architecture, working on Harmony website redesign phase 2.
I grew up in Vietnam for 18 years before moving to upstate New York for college. I received a Bachelor of Architecture from Cornell University in 2018. I moved to San Francisco in mid-2021, but before that, my work has taken me to the Netherlands, Switzerland, and lastly, New York City.
Outside of the digital world, I love working with my hands. Check out my ceramics and artworks here.
Deliverables:
June 2022
- User Research: Together with the Creative team, carry out user research and document findings. Devise plans to incorporate findings into website design
- Web Concepts Redevelopment: Develop three concepts in parallel, corresponding to three directions of interest from Harmony leadership.
- Once a concept is determined, design all wireframe, prototype and UI elements
May 2022
- UI Development: after approval of concept, develop responsive layout for desktop, tablet and mobile. Compile UI components, color system, typography, data visualization sections into a comprehensive style guide.
- Content: high fidelity version of the website with correct, up-to-date content ( synthesized from offsite meetings)
- Motion and micro-interaction design: 3 full prototype for desktop click-through, tablet and mobile interaction.
April 2022
- Web Content Organization: Gain understanding of Harmony’s goals for website V2. Complete 1 round of audit for current site information architecture. Create 1 revision site map.
- Concept UX Development: Two options are developed in parallel with 2 different targets: one on 3D experience and the other on concise presentation of information. Deliverables include 2 working sitemap, 2 full wireframe and prototypes.
- Concept UI : 2 click-through prototype for desktop and mobile, one set of UI deliverables include options for color schemes, mood boards, typography, motion design strategies.
Access my working files to view latest progress: https://www.figma.com/file/aI0wEKgExixN6bW5tZq34v/04%2F04%2F2022-Web_Q2_Working?node-id=280%3A13470
Date | Task | Hours |
|---|---|---|
Week 1 | ||
Introduction: Reference Material read through and applied tasks to development timeline, timesheet and invoice. | 1 | |
Introduction: Notion read through & setup and then inserted timesheet link, deliverables, and goals for review. | 0.75 | |
Kick-off meeting with Anh Tran and Kelly Tigera ( in-person) that produced action items for development framework. | 1.5 | |
Concept Development: Site Map diagram+ references research, as a tool to familiarize with the site structure and challenges | 2.5 | |
Concept Development: 3 ideas for the 3D/optical illusion concepts, detailed through sketches and wireframe. Additional site map clean up | 3 | |
Concept Dev: More wireframe development for 3 ideas | 4.5 | |
Team check-in: 1 hour of phone call with Anh and Kelly, identified one concept to move forward with and next steps. Spent 2 hours prior to the call diagramming site map working process | 3 | |
Week 2 | ||
Concept Dev: From the chosen coral reef concept, incorporate optical illusion mechanisms and mood board. Optical illusion is a specific request from Harmony | 7.5 | |
More concept dev work from the day before, followed by a team check-in with Anh and Kelly. The team meeting identified successful mechanism/interaction and moved forward with content strategies as next steps | 6.5 | |
Concept Dev: Understand how different interaction/elements of the coral reef can host content. Sketches, new moodboard, wireframes are produced. | 9 | |
Team Check-in with Kelly + Anh: revised moodboard discussion and more options to be produced for the navigation flows through site | 1.25 | |
Week 3 | ||
Concept Dev: Option 1 1. UI: Moodboard revision (2) + Color Palette development (0.5) 2. Info Architecture: split into 3 tiers (2) 3. Call with Jackie Lee on ScienceVR ( 0.5) | 5 | |
Concept Dev: Option 1: 1. UX: Iterate on flows, mood, color palettes to choose most effective ones. Wireframes for all tiers of information (8) . 2. Check-in with Kelly + Anh: workshop on iterations produced + site content groupings, and moodboards (1) | 9 | |
Concept Dev: Option 1: From workshop outcomes, created wireframes for every site nodes | 3 | |
Concept Dev: Option 1: Continued wireframe work from previous day, header and footer development, revised info architecture (6) UI: continued refinement of 2 moodboards and color selections (2) | 8 | |
Concept Dev: Option 1: Check-in with Anh : process update and planning for May 2nd presentation | 1 | |
Week 4 | ||
Presentation Prep: Option 1 : 1. Full protoype for the entire site in desktop mode. 2. Mobile view: adaptation of desktop wireframe to mobile. 3. Further refinement of wireframe content 4. Layouts for all 5 main navigation pages | 10.5 | |
Presentation Prep: Option 1: 1. Continued prototyping (3) 2. Moodboard and Home page color options (3.5) 3. Layouts for 5 navigation pages (1) 4. Check-in with Anh and Kelly (1.5): strategize for option 2 | 9 | |
Concept Dev: Option 2 : generate a second concept focusing on clean, straightforward content and layout. Tasks include sequence sketches, wireframing and protoyping. | 9.5 | |
Concept Dev: Option 2 : Continued prototyping and layout. Check-in with Anh + Kelly : for feedback on Option 2 - by 1pm PST | 4 | |
Week 5 | ||
Concept Dev: Option 2 : Additional layout options for 2 sections ( fresh + principles) + additional improvement to option 1 | 3 | |
Presentation Prep: Refinement of prototype, graphic and UI elements for Option 1. Further development of layout options and interaction design for Option 2. Two check-ins with Kelly and Anh for feedback and option selections | 10 | |
Presentation Prep: Refinement of two options’s prototypes, graphics, typography and UI. Cleaned up prototype and moodboard options for presentation slides. | 4.5 | |
Check-in with Anh and Kelly: debrief on presentation outcome, UI Development: Layout revision to current landing page and micro interaction options | 3.5 | |
UI Development: Layout structure for style guide, motion design options for micro interaction, layout revision to new and current landing page. Check-in with Anh: review progress and next steps for studies. | 7.5 | |
UI Development: Responsive web/mobile layout study, Refinement of UI elements and layouts, motion design : synthesize two options | 4.5 | |
Week 6 | ||
UI Development: Responsive web/mobile layout study, additional work style guide, color system for light and dark mode, complete motion for entire landing page | 8 | |
Check in with Anh ( 1hour); feedback on style guide and responsive web layout. UI Development: Navigation and sub-content layout, color hierarchy study, Ecosystem and Table layout for mobile | 6.5 | |
UI Development: Refinement of ecosystem + navigation layout, color hierarchy study | 4 | |
Week 7 | ||
High-level concept dev: ideate on four different options for metaphors/concepts. Deliverables include mood boards, collages, and preliminary layouts | 8.75 | |
Check in with Anh (30mins). High-level concept dev: additional graphic rendition for all four options | 4 | |
High-level concept dev: additional 2 graphic rendition for each option, exploring visual representation | 7.25 | |
Check-in with Anh and Kelly | 1 | |
Concept options: Marketplace & Jazz Concept: develop 2 alternatives, indicating 2 directionality and organization structures | 5.5 | |
Week 8 | ||
Concept options: Jazz and Train Concept : per design feedback, further developed train option 2 and created a new version of train | 6 | |
Check-in w Kelly & Anh. Implement feedback on Train option | 5.75 | |
Implement feedback on Jazz option. Wrap up three final options. Check in with Anh (30min) | 4.75 | |
Week 9 | ||
User Interview 1 ( with Jason, moderated with Kelly and Jeremy) : collect feedback on current website and direction forwards. | 1 | |
User Interview 2 & 3 ( with Tim and HanktheCrank) : collect feedback on current website and direction forwards. | 2 |
Useful Links:
List your 3 monthly deliverables on the 1st of each month
- Must be measurable
- Track your progress with your manager
Submit your invoices, bimonthly, here:
- Contributors: harmony.one/contributor-invoices
- Fellows: harmony.one/fellow-invoices
Send your driver’s license or photo ID, phone number, and address to kyc@harmony.one