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 |