Phase 1: 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.
Phase 2: 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.
The UX phase helped me gain a much deeper understanding of design strategy. I gained a lot of insight into creating an engaging experience for the user and a unique product for a brand.
Phase 3: 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.
Phase 4: 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.
The final result.
Back to Top