Interaction design, UI design

Goal: Scale the number of clients the company is able to serve in a given amount of time.
Problem: Lot of manual work and resources needed to set up the environment and tweak the linguistic analysis for new projects
Solution: Let user setup their own project analysis. Enable self service a analysis configurations
Stakeholders: Internal: operation specialist, linguists, pre-sale engineer.External: power users
Team: Cross-disciplinal team: designers, engineers, PM, Operation Specialist
My role in the project: Interaction designer, UI Designer
When: Mar 2022 → Jun 2022

This case study is the second part of a bigger project — to check research material which drove our decision making process, have a look at my research case study.

This case study is an ongoing project. I’ve decided to release even unpolished material, hoping that it could provide value and entice conversations.

Last update: October 12, 2022

Process

Flow validation
working on epics / stories batch
Check for technical feasibility
Documenting system states and edge cases
hi-fi Prototyping
Iterate
Dev handoff
Design Quality check (a11y, compliancy with design, real world performance issues)
Gradual feature release with feature flag
A/B testing (Maze)
Behavioural analytics (Hotjar)
Quantitative analytics (Mixpanel)

User flow where starting point. Interaction still TBD

URL Management Panel — here the focus is on different scraping statuses the system can have.

State design: documenting Loading UI, loading Data, Empty states, few items state, with all the fields, with hidden fields…

Some info messages when trying to add a new item.

The creation of a new product is a linear multi-steps cycle. User feedback session pushed us toward a more comprehensive recap and review final steps

Iterating on different table views with also out of the box design

A sneak peek of the roadmap organised by epics

Internal design Critique — a systematic time where to share challenges and contaminate with fellows designers (also not involved into the project)

Techniques used

Async communication (Loom, Figma comments)
hi-fi design + Prototyping
User testing
A/B Testing

I’m a big fan of recording async video to explain design is a useful technique to get a snapshot of your current design vision and give context to people without making them feel dumb for asking same question multiple times :)

My heart-felt loom advocacy made me basically become a meme inside the team 😂

Results and outcomes

Real world application
User can now setup their analysis (gradually, based on the feature release)
We’re able to ship deliveries 2x faster (next steps — remove deliveries concept, deliver changes in real time)

Fields still loading: we distinguish between UI loading (using skeleton components) and data loading (using placeholder text)

Iterations on making clear what’s actionable and what’s just informative.

What I learned

Bringing developer early into the process is an invaluable resource for designing real world application (Handshake process instead of dev handoff). Performance issue would have arose later in the journey
Carefully documenting iterations with context and justifying design decision is a compound investment, it pays really well in the long term

Iteration iteration iteration — real life constraints makes us reconsider and negotiate the final designs. Instead of a top-down designer-developer approach, we focused on collaboration and sought dev feedback early in the process

Want more case studies?!

← Research

Design system →