.jpg)
Redesign food documentations software, BESTMIX® SpecTrack
About them
Say goodbye to the frustration while managing food documents.
For food suppliers and manufacturers, managing food documents can be a frustrating task. A lot of documents are saved and shared in separate storage.
With BESTMIX Spectrack, all documents can be shared in one platform. Users also get notifications to renew the document, about the document status, and the flow for the next step. An efficient platform to manage food data.
Roles
To redesign the complex SpecTrack platform. I collaborate closely with another UX/UI Designer, a project manager, some analysts, and a UX technical writer. Since I'm still at Junior level, I'm guided by a Senior UX/UI Designer through trainings.
​
We all do the iterative design on how we can improve SpecTrack software and guide users to accomplish their goals smoothly in the platform.
​
Tools
- Figma
- OneNote
​
How do I start to redesign
1. Learn about food production
This job is very challenging for me. It's about food production. Something not familiar to me. Therefore, I need to learn deeper about documents to share between food suppliers and manufacturers, such as certificates, product specifications, risks and claims, assessments, flows, and the terms of food production.
​
2. Getting to know the SpecTrack product
I tried to link the complex problem of managing food documents with the services that SpecTrack provides to users. How we can make their task more simple.
​
I break down information that I need to know about Spectrack and write it down on Notion. About its business goal, target users, food documents, features that SpecTrack provides, and food terms.
​
​
​
​
​
​
​
​
​
​
​
​
​
​
3. Notice and make note
The moment I learn how the software worked, I notice many parts need to be redesigned. Therefore I make the documentation of problems and my plan for how I would redesign these with possible alternative solutions.
​
4. Choose a small part to redesign
To redesign one whole page in one release is impossible since it's a complex design. I don't want to get a headache. So I break it down and choose a small part, an element, or a problem. This can be chosen by analysis or by me based on urgency matter.
​
5. UX research on the software and the internet
I collect information about this part, the flow, and the problem. I write down my plan for how I would redesign this with possible alternative solutions.
​
6. Let's be creative and solutive
It's time to redesign. I go straight to high fidelity because it's easier for the team to see and choose.
​
7. Discuss with UX writer
Show my design to UX Writer and propose to her the UX writing I change. Also, ask her for feedback.
8. Present my design to the Senior UX/UI Designer
Brainstorm and ask for feedback. We try to align our ideas before we show them to the team.
​
9. Present my design to the team
Be ready to be shot with many questions and valuable feedback.
​
10. Talk with users
A few times I join the Project Manager when he gives a demo of SpecTrack to potential users. I enjoy this activity: talking with users and asking them questions.
​
During the demo, I notice how our potential users pronounce the food terms. For example on our platform, we use the term "assessment" for our Assessment feature. But in their team, they use the term "questionnaire". Something that we can discuss furthermore with our internal team. I also can notice when they are confused in some parts. Which indicates that those parts need to be improved.
​
These steps are iterative and some can be reversed.
​
Case: Mark the
undefined ingredient
Problem
In the SpecTrack platform, users can not notice immediately if there are additional ingredients on the table list. This additional ingredient can be a big deal for some users because it can change the taste of the food.
​
Current design
​
​
​
​
​
​
​
​
​
​
​
​
​
UX research
​a. How to mark or show a warning in a table:
- with a warning icon
- with text
- with alert
​
b. Find patterns in SpecTrack to show mark or warning
1. I screenshot the warning or status that shows on SpecTrack
2. Analyse: the pattern when status or warning icons are shown, what elements should be on the table, and how the flow works.
​
​
​
​
​
​
​
​
​
​
​
​
​
c. Find another word to replace the "undefined ingredient" term
Among our internal team, we use the word "undefined ingredients" for talking about the ingredients that are not listed in the Setting.
I think this word is not easy to understand by our users who are not from English-speaking countries. To confirm this, I talked to my colleague who comes from India and has experience working in the food industry. She said "we don't use "undefined ingredient" word for this term. This word is used only in our internal team." She also agreed that this term is not easy to understand for users from non-English speaking countries.
So I try to find another word to replace the "undefined ingredient" term.
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
The alternative solutions
I show to the team all possible solutions with pros and cons in each design. They also shot me feedback for each.
1
Remark: square yellow icon
2
Remark: yellow round icon
3
Remark: yellow triangle icon
SpecTrack has a triangle icon to show a warning of a data:
4
Remark: yellow badge
Pattern in SpecTrack software to show a remark is by using badge.
There are 3 kinds of badges in SpecTrack:
- badge in grey, to show neutral info or status
- badge in green, to show positive status
- badge in yellow, to show warning status
5
Remark: on new column "Remark" and text
6
Remark: grey badge with text
7
Remark: sub text
8
Remark: line and highlight
9
Remark: highlight the row
Decide the best solution
From the 9 alternative designs above, I choose the best design as the solution. Also, mention the reasons.
​
This one I chose the most because:
- The mark (badge and text) looks clear but does not too much catch users' attention
- We have this pattern in the software to show a mark
- The location is under the list, so it's not taking horizontal space.
- The text "additional" has only one meaning which is to add what is present. Besides the word is clear, it's also concise.
​
Most of the team members agree for this moment.
What I learn
1. Crowd data is okay for power users
I believe clean design can work anyhow on all platforms, even in complex design. How complex the design is, users will feel comfortable with a clean design. But my belief is not working in this complex software.
​
Complex software has power users who do not mind with crowd interface. They want to see many data at the same time. That's why we need to design everything with strong analysis and less white space.
​
2. I need to let go of the power of white space and aesthetic
In design, clean and aesthetic have always been my things after solutive. For this complex design, I'm struggling to convince my team that we need a clean design. For example just to add more white space in the crown table. In the end, we need to show data, data, and data in the crown interface as users need.
​
3. Be more confident to speak up in a meeting with a big team
Meeting with a big team is something new for me. More comments and questions are shot after I present my work. I learn that I should be more confident in explaining my design decision, handling questions, handling contradictive comments, and giving my opinions during the meetings.
​
4. Food production and terms
I get more insight into food production which makes me more grateful when I eat. How complex the food production is until it serves on my plate.