danielwang / cultureamp

About me

Hey, I'm Daniel Wang, my personal ambition is to design and build world class Design Systems. I am interested in Dark mode (WCAG compliance), Theming and Motion designs.

CultureAmp design challenge

I am a time-poor person, who spent 2-3 hours each night from Mon to Thurdays. So I quickly wired things up by leveraging some frameworks and starter kits I am familiar with. It took me approximately 10 hours to get this far, like my daily work, 3/10 on designing, 5/10 on developing, 2/10 on documenting. If time allows, I'd like to explore and use Kaizen DS.

I had a light touch on below areas, plesae let me know if you would like to explore more on any particular topics or skills missing from this list, e.g. CSS Module. I am more than happy to demostrate.

• Requirement Analysis
• Data Proccess
• Ideation
  • wireframes
• Design skills
  • Visual design
  • Design principles
  • Hi fidelity mockup in Figma
  • Responsive design
  • Accessibility at design layer
• Development
  • FE Toolings
  • Semantic HTML
  • Sass, Atmoic CSS
  • Responsive code
  • React SPA
  • Web A11y, WCAG, WAI-ARIA tag, Assistive technology

Design and Development

Design Process and Tech highlights on FigJam file

Hi fidelity mockups on Figma file

Installation app

Install the dependencies:

npm install

View the pages

Run locally:

npm start

It will automatically fire up in a browser tab http://localhost:3000/

Framework and Starter kits

• react-bootstrap-starter
• Bootstap 5 sass

Dependencies:

• React
• Create React App
• react-bootstrap

Project structure (key files)

├── ...
├── pages                    
│   ├── Home.js              # Surveys landing page         
│   ├── Survey.js            # Survey details page           
│   └── ...  
├── sass                    
│   ├── main.scss            # Styles                 
│   └── ...                 
└── ...

Other materials

https://github.com/danielwang/cultureamp/tree/main/screenshots