Context
Type: Learner Experience Design
Duration: 4 months | June 2018 - Nov 2018
Clients: CPG companies
Team: Patty, Charity, Armando, Steve
Topic: eCommerce Category Management
InVision Password: elli31
Learning Evolution strives in successful client relations with impactful accredited courses.
I was in charge of various tasks for different clients, instructors, and internal projects.
For this specific case study, we'll be exploring the main project, ECM Curriculum, I worked on as the main designer under direct supervision of the product manager.
The topic discusses the emergence of eCommerce, with the retail industry shifting the way merchandising works.
There's been a need to educate teams about the new process, the Category Management 2.0.
Type: Learner Experience Design
Duration: 4 months | June 2018 - Nov 2018
Clients: CPG companies
Team: Patty, Charity, Armando, Steve
Topic: eCommerce Category Management
InVision Password: elli31
For this specific case study, we'll be exploring the main project, ECM Curriculum, I worked on as the main designer under direct supervision of the product manager. The topic discusses the emergence of eCommerce, with the retail industry shifting the way merchandising works. There's been a need to educate teams about the new process, the Category Management 2.0.
Problem
How might we build an innovative, engaging course for a comprehensive topic?
For CPG industries, it is now important to inform new responsibilities as retailers move from brick & mortar onto eCommerce. The goal of the course is to provide a fun educational experience of the holistic process, while maintaining the real-world setting of the workplace. We ideated the concept of graphic novel characters with different roles and eye-catching, conversational content strategy. As the material is lengthy and complex, we planned a thought-out design process to launch a reliable and meaningful curriculum to the public.
Role
Position
- UI/UX Designer
- Visual Designer
Tools
- Authoring Tools
- Sketch
- Adobe Suite
- SVN & Box
- Zoho
Skills
- Market Research
- Content Strategy
- Multimedia & Web
- UI Design
- Prototyping
process
1st phase
Roles & Resources
We first learned about dominKnow’s capabilities to familiarize ourselves with the learning methods we can utilize. With a better approach of blended learning, DominKnow is fairly customizable and gives many possibilities in terms of interface designing, responsiveness, and collaboration.
CONSTRAINTS
Technology: Use of certain features are glitchy, making it less functional and responsive
Uncertainty: Not knowing if clients will be happy with the pop-art look
Architecture: Segmenting the curriculum with such comprehensive material requires time and review
Our internal team primarily consisted of three. I worked closely with Armando, who took care of the narrative side of storytelling, and Patty, who managed the whole project. She worked closely with a category management expert to gain reliable course information. Through many meetings, we conducted content curation, such as Amazon and Peapod’s way of evaluating category performance.
Learner Personas
By understanding the roles and environment of the CATMAN team, we leaned towards situated learning to involve an authentic context. We made note of the knowledge and skills in the way they learn every day and created 4 possible learner personas.
Select to zoom
2nd phase
Course Structure
The content strategy we aimed for was character + dialogue with a mixture of comic and corporate style. We structured the courses with long scrolling and buttons, and later incorporated videos and infographics.
The curriculum mapping heavily relied on the 5D process, a new agile CATMAN framework with microiterations. In the beginning we wanted each course of the curriculum to be aligned with each process and roles. We sought to have each 'D' course with a video overview and comic scroll-through module.
Branding & Wireframing
The 5D process allowed us to the brand the course based on the color scheme we came up with for those. Though at first there was a lot of trial and error because I went straight to designing on dominKnow to learn the tool, the style guide later allowed me to design the infographics, characters, and layotus in a more consistent matter.
Patty and I wireframed, then I started to prototype the UI with comic boxes I created separately when designing course infomation into infographics.
3rd phase
Prototyping
I templated the layouts and continued to prototype the looks and interactions of the components. While making sure that buttons and clickable elements are functionable and accurate, I also learned how to utilize the question sections with learner-friendly feedbacks. Animations and transitions were also added for more liveliness.
Testing & Iteration
Through usability testing done internally, we learned that the comic boxes were distracting, so we switched to a more corporate look. We wanted the course to be engaging and mobile-friendly, but we also had to consider reducing users' cognitive load when going through the course.
This meant that we only incorporate the character vectors as is and leave out the dot matrix backgrounds with more consistency. By setting the foundation for styling, we had our developer Steve refurbish some uneditable elements through manual coding.
conclusion
aftermath
The course was delivered to sales team after its testing phase with users, as a trial to clients. For these client-based products, it's essential to not only think about the users but also align with the business goals and constraints as well. Thus, the architecture of the curriculum changed its direction many times, and as of March 2019, the curriculum was pushed to production as a listed course with 4 divided sections. Overall I'm proud to have designed major aspects of this fun, unique coursework that I'm sure many learners will enjoy and learn in-depth!
Takeaways
Some other projects include redesigning LE's LMS UI and re-building Titleist Golf Ball & its translated courses. Feel free to ask me more about these projects!
