Enhancing
async export
Overview
During my 5-month internship with Alasco, a German start-up focused on digitalising project management in real estate and construction, I was tasked with improving the UX of the asynchronous export for the invoices table. This case study highlights my approach to improving UX through research, collaborative ideation, and effective design solutions.
Market
B2B
My role
UX research and design
Time frame
3 weeks
Tools
Figjam, Figma, Jira
Setting the scene - the company
​Alasco provides cloud-based software for project management, decision-making, and financial processes. I joined their design team, working on UX improvements and developing a new ESG module. This project focused on improving the feature of asynchronous export of invoices.
The challenge
Managers handling projects with many invoices need a better control over the exporting process.
The team
As a new intern, I worked on this project with guidance and in collaboration with senior designers.
The research phase
Deep dive into exports
First step? I analysed all export processes in Alasco (turned out there are 22) and categorised them into three types. Then I created user flows for each type*.
* excel has 2 user journeys as they are significantly different in different parts of the product
Defining user pain points
To find out what to improve I:
-
prepared visual user flow of the export I was optimising,
-
matched reported user pain points to the right moments on the journey,
-
created a How Might We for each pain point,
-
ideated on possible solutions,
-
got feedback every step of the way to make sure I was on track.
Here is the result!
Prioritising
To ensure I was addressing the right issues, I turned user goals into Jobs To Be Done and matched them with the pain points and their corresponding HMWs. Then prioritized them based on user feedback and potential workflow disruptions.
Competitive analysis
I also looked into different products where users might export large volumes of data such as Shopify, Figma, Recurly, and White Space. It gave me a better understanding of handling the pain points I defined and gave me ideas for easy and proven UI and interaction design practices.
The journey to better UX
Ideation #1
An organized discovery phase allowed me to smoothly cue Sophia, who joined me as the senior designer, into the project so we could start ideating.
-
We classified all ideas by whether they helped to find exports or improved notifying (or both),
-
created low-fidelity drawings and frames for all of them and determined what pain points each idea solved,
-
narrowed them down to 3 - basing the decision on the design critique feedback about scalability, budget and answering HMWs.
Developement
After gathering feedback we continued with the toast idea. Both export page and email notifications were dropped as they did not sufficiently fulfil the needs of our users and were too complex for development. But we still needed a way to make finding the exports easier, leading us back to brainstorming.
Keep calm and move on
Ideation #2
In the first round of ideation, we learned some of the user pain points were out of scope, so I analysed the feedback and reduced them from 8 to 3. The ideation that followed was messy but effective - so to avoid the chaos and sum it all up we classified all new (and some old) ideas as 'Design' or 'Not Design'.
This time my focus was on:
indication of export progress, UX copy, collapsable dropdown and banner/toast.
While creating those wireframes, I considered developer feedback and asked for their input to make sure my ideas were within scope. Leading me towards smaller but impactful changes.
Progress indication
Information design on the button
Both the export page and email notifications didn't sufficiently fulfil user needs and were too complex for development. We decided to improve the dropdown and UX copy, shelving modal and tabs in the process, because:
-
For the majority of customers, the export will be fast (within seconds), so toast might be less annoying/interruptive than modal.
-
Using a delete icon instead of a cross to distinguish between finally deleting and just removing it.
-
Ditching download history to manage user expectations on other highly requested features.
With those decisions set, I cleaned up the dropdown design options and prepared button and layout alterations.
Refinement
Final solution and implementation
I prepared 3 mid-fidelity flows:
-
A true MVP
-
An extended MVP (by adding a collapsible)
-
An ideal flow that hits most of the requirements
I presented them during a refinement session and answered the questions of the developers had. We came to a consensus that the MVP is the most viable one for the time being and will be developed in a couple of months.
Mid fidelity flows
New UI elements in German and English
Reflection
Lessons learned
It's better to ask early
This project taught me to always ask questions and check in with people as soon as I have a doubt. A question about FE to BE connections seemed very complex to me but was a simple 1-minute explanation for the person who worked on it.
Designing in a team
I also learned how much I enjoy teamwork in design. Bouncing my ideas off someone else was very fun and made the whole project very fun to work on.