Data integration & visualization
A robust integration layer connected the brand's operational systems and departments. Executives could see data from every source in a single view, with interactive charts that make complex data quick to read.
Product case study · Wideview.io
From static dashboards to a decision-making system for eCommerce brands.
How I led the UX/UI of Wideview.io, an end-to-end operations and management platform that lets brand executives set targets, see where they stand, and turn insight into team action.
Introduction
Hello, I'm Matan.
I'm a Senior Brand & Product Designer with over 15 years of experience, working on everything from mobile apps to web applications. I care about intuitive, user-friendly design that makes people's lives easier.
My journey in UX began after college, at a digital agency. I became fascinated by the intersection of technology, human behavior and data, and knew this was the field I wanted to work in. I've been sharpening those skills through projects ever since, and Wideview is one I'm especially glad to share.
Quick overview
One place to plan, measure and act.
As the lead UX/UI product designer at Wideview.io, my mission was to create an end-to-end decision-making and management system for eCommerce brands, giving executives real value in running their operations.
The goal was to move traditional business intelligence (BI) from static dashboards to a dynamic system. Executives get macro-level insight into operations, plus micro-level task and team management, so that the goals and targets they set actually hold up in the daily life of an eCommerce brand.
The problem
Disjointed data and inefficient decision-making.
eCommerce brand executives were juggling disjointed data from dozens of systems, platforms and company departments. That fragmentation slowed decisions down and made it hard to see the business as a whole. Handling the data, managing the team and executing took a lot of time and a lot of people.
As lead designer, one of my key challenges was an MVP that could consolidate those sources into one coherent data language, so executives could make informed decisions quickly and without the effort.
The solution
A unified data intelligence platform for eCommerce executives.
To solve this, we built a unified data intelligence platform. The MVP, designed under my lead, focused on five key elements.
ConnectDefineManagePlanAct
Intuitive UI & UX
An interface shaped around how eCommerce executives actually work. Simplicity came first, so they could move through the platform and reach the right insight with minimal effort. User testing and feedback loops fine-tuned it.
Actionable insights & decision support
Built on a top / down / act method: start from a high-level overview, drill into a specific area, find the drivers behind performance, then prioritize issues and act on them before they grow.
Strategic empowerment & growth
A strategic planning tool and growth-opportunity finder. Executives define which metrics to measure and get data-driven suggestions for growth areas, resource optimization, goal setting and future planning.
Real-time monitoring & tracking
Live performance tracking against targets. Executives assign action items to team members and follow progress toward key goals, keeping teams accountable and improving continuously.
Project setup
My role, the team and the tools.
My role
- Research, wireframing, prototyping
- UI and UX design
- Handoff to the dev team
- Working with cross-functional teams to ensure clear, consistent design
- Owning every design touchpoint, from product to brand and marketing
The team
- Developers 4
- Data Scientist 1
- VP Product 1
- Product Manager 1
- Designer (me) 1
Tools I used
- Figma UI · DS
- Adobe XD Prototypes
- Miro + FigJam Research
- After Effects Motion
My design process
Six steps from research to the final product.
01 Research & personas
Two people who run the business from different seats.
To keep the work user-centric, we ran extensive research into the pain points and needs of eCommerce brand executives. Through interviews, surveys and usability testing we identified two primary audiences.
Sara
Executive · Chief Marketing Officer- Background
- Holds a key leadership role in the brand's marketing strategy and decision-making.
- Goals
- A holistic understanding of the business, spotting growth opportunities, making data-driven strategic decisions.
- Challenges
- Overwhelmed by scattered data, no unified view of the business, struggles to prioritize key issues.
Alex
Operations · Chief Operating Officer- Background
- Responsible for optimizing and streamlining operations across departments.
- Goals
- Cross-organizational insights and optimizations that improve overall business performance.
- Challenges
- Fragmented data systems, and no context layer for benchmarks and external events.
Product research: industry & competition
02 User interviews
Listening before drawing.
32open-ended questions in the interview script
During ideation I ran user interviews to build the personas and inform the design. With the team, we prepared a script of 32 open-ended questions about our audiences' values, motivations and daily routines. We came back to the interview findings throughout the entire design process.
03 User journey
Mapping the path from first login to daily habit.
The journey map traces how an executive moves from connecting data, to understanding the business, to assigning and following up on action.
Onboarding flow
04 Sketches & wireframes
Fewer distractions, faster decisions.
I started with low-fidelity sketches and wireframes to speed up decisions through visualization. The sketches drew on the first user interviews, the business goal and a heuristic evaluation, and all of them pointed to the same thing: there were too many distractions in the flow. We kept coming back to them to stay focused on our primary goals.
- We began with a "standard" dashboard. Then, guided by interview feedback and our goal of disrupting the dashboard approach, we iterated.
- Because the data is complex, I made multiple versions. The main difference between them was how and where the data was visualized.
- We chose the clearest one: a semi-dashboard with a calm layout and a clear arrangement of elements on screen.
- Sketches and wireframes let us move fast and walk our design partners through user flows early.
In Figma, I turned the sketches into low-fidelity wireframes, then refined them with relevant stock images and copy from the marketing team. At that point they were defined enough for user testing. After 4 tests I made a few changes and moved on to high-fidelity prototypes.
05 Components & design system
A system built for dense data.
KPI cards with target chips, department health gauges, financial tables and timelines all share one component library, so every new screen speaks the same visual language.
Component example
The Gantt.
We needed a Gantt component that could live in many places across the platform. It sits under every over-time graph, lining up events, alerts and team efforts with the data, so planning and context are read together.
EventsAlertsEfforts
06 Final product design
The final screens.
With the usability issues resolved, I designed the final screens in Figma. The goal was a visual identity aligned with the brand's values and message. I also reviewed the competition and dug into my own catalog of references for inspiration. Scroll inside each screen to see it in full.
Conclusion
A fascinating product and industry, and a project that taught me a lot.
I crafted the brand identity, the product and the website, including all the marketing materials. I worked with every stakeholder and team, ran user interviews, and presented ideas to the CEO and other directors. Within the usual technical constraints, I had complete creative freedom.
Along the way I mastered Figma (and still use it every day), refined my design and research process, and built the soft skills to carry a message across the group and bring my voice to the decision-making table.
Thanks for reading.
