Skillpod: UX Research, Front-End System Design, Design Strategy, UI Design, HTML/CSS
UX Workshop
The first step our team took to create the Skillpod application was conducting a UX workshop and, from that, generating personas and design insights.
Workshop was run with cards that sampled roles, emotions, locations, skills, learning styles, and outcomes. One of each category was grouped to make a scenario.
Scenarios were then transformed into personas with similar needs and frustrations.
From those, we generated UX insights.
System Mapping
Our team went through many iterations of the system map to understand how to bring Skillpod content into a digital format. We experimented with different ways to promote engagement, community identity, and to create Skillpod in a physical space.
Wireframing
The wireframing stage helped our group solidify the way content will be presented to users, the tone and style of the application, and the points of data collection and integration. After low-fidelity wireframes, our team immediately moved on to prototyping and developing in HTML/CSS.
Prototyping
Early versions of our prototype were done in HTML/CSS to create a high-level walkthrough of the system.
Later versions were prototyped in Adobe XD and brought into HTML/CSS. Although our team designed for mobile-first, our prototyping also included a responsive desktop view.
The development process helped me progress a lot in my CSS knowledge. As our team began creating components in React, I also gained some more understanding of Javascript.
Result
Back to Top