We have observed that the Internal Tools (OSS) aren’t meeting brand improvements and implementation goals, which has caused increased training times, reduced sales, and internal frustration. How might we improve so that our our brands and marketing efforts are more successful?
- Make users more effective
- Reduce time on task* 🐁💨
- Reduce learning curve and training time
- Increase enjoyment 🕺✨
- Reduce page and event development time
- Reduce publishing headaches
- Increase speed from optimization efforts to brand implementation
- HEART Framework
Users and audience
- Front-End Developers
- Marketing Managers
- Optimization Specialists
Team and your role
I was the Design Lead working to define the experience strategy, analyze and audit the existing system, conduct research into system needs and interview users, create and present deliverables to engineers and stakeholders, wireframe, prototype, and test each iteration with the internal user base, generate a comprehensive and extensible design language system, and help with implementation and education.
- No Analytics
- No Product Owner (initially)
- Few Backend (PERL) Engineers Available*
- Dated Backend*
- System from scratch (React)
- Devs new to React
Design process story
Understand the system
After a project is kicked off and the goals and problem statements have been initially defined I begin the process of mapping the current flows and information architecture.
Interviews, testing, and journey mapping
- Interviewed 25 internal users.
- Defined many common use-cases, pain-points, and silly workarounds.
- Using Camtasia and Google Hangouts I recorded and timed tasks.
- Searching for pages you’ve created is very difficult.
- Publishing is painful and impractical.
- Editing pages and flows is almost impossible without many days of trial, error, and training. Even then, the developers are brought in 50% of the time to finalize a project.
- 79% Male — 21% Female
- Environment: Open office or remote coffeeshop with poor connection speeds. Teams work through hangouts frequently.
Task speed: Create an affiliate page: Setup: 1 hr — Launch: 2 days
Task speed: Building a template: Setup: 4 hours — Launch: 7–8 days
Task speed: Create an event: 25 minutes —Launch: 3 days
After interviewing users and regrouping with engineering we had built a base requirements list for simple updates.
The initial wireframe process focused on the global navigation and the page manager. We went through around 4 or 5 iterations. Discovering major engineering faults. Testing each with Marketing and Optimization users and tweaking designs based on their reactions and interviews.
Now that we have a baseline component framework and craft library, the compositions and flows are incredibly easy to create.
Mood: Endurance, the Antarctic, Snow, Ice, Space, Clean, Fast, Light
Working side-by-side with a front-end developer we’ve created a system of highly reusable CSS classes and reusable React components.
Sketch, Invision (+ Beta Inspect), Zeplin, Atom, React, HTML/CSS/Javscript ES7, Docker, Git, NPM, Node, iTerm, Google Drive, Usertesting.com, Camtasia, Macbook
Retrospective & lessons learned
- Deeper focus on understanding constraints
- Obtain a more comprehensive understanding of a team’s strengths and weaknesses
- Is there an API for that?
- More rapid iteration with front-end development team from the beginning
- Prototype in the browser earlier
- Created weekly hour long designer/dev huddles — Let’s sit here and finish the component. Reduce time spent documenting.
- Do less ... and do it faster