Ricoh Transform Manager
Role
UI/UX Designer, Front End Developer
Timeline
3-month Internship Project in Summer 2022
Working with four other interns in development and product ownership, I created high-fidelity prototypes
and a user interface for a new SaaS file conversion tool.
Overview
Transform Manager is a tool to convert file types and adjust settings to prepare them for print, storage, or a variety of other needs. When I began my internship, this tool existed only as a “ground” service, accessible through an API and Command Line Interface (CLI). Following the Agile development style with a team of four other interns comprised of software developers and a product manager, we transitioned this service to the cloud as a SaaS product and created a basic user interface to perform the file transforms. I also generated several high-fidelity prototypes for more complex use cases, which I hope will be implemented as the project develops.
Project Goals
Users need an interface through which they can view the status of their file transform, including errors and states.
Users must be able to transform large batches of files simultaneously, efficiently, and accurately.
My Process
User Archetypes
The above goals were generated after conducting a few user interviews, and creating user archetypes. Though Ricoh already had user personas for some products, creating archetypes offered a new, more general perspective on the types of interactions and motivations of our customers.
I first identified a few key trait scales of our users, and mapped how each of two generally-named archetypes fell on those scales. Primarily, our two types of users differed in their skill level and familiarity with Ricoh products, which impacted how they handle errors and failures in transforms. From here, I created more in-depth profiles of these archetypes, noting their goals, needs, actions, and pain points, and providing a narrative on their interaction with transforms.
User Flow
I then created a simple diagramming showing the flow of how the user interacts with the transform to help guide the design process.
Early Ideation
I began designing in Adobe XD after this, and worked in a simple grayscale to consider different layouts and interaction styles. The low fidelity design which I used as my primary reference going forward, can be viewed as an XD prototype here.
Since our users might want to transform multiple files at once, I organized sets of transforms into groups represented by card-like tiles. Upon clicking into one of these tiles, the user could view a list of their file transforms in a couple of different views, to best suit their needs. I took the table-style view to a high-fidelity prototype.
Early feedback
“I like the status bars— that’s a nice touch. Is that the status for the whole file or just that step?”
— User feedback
“What happens if the transform fails? ‘Cause that happens a lot…
I like the table. I could see that being useful for transforming a lot of files“
— User feedback
“I’m a little confused on my why the status bar isn’t in the status column. It took me a little to understand what was going on there.”
— Another UX Designer
High-Fidelity Prototyping
Using existing style guides as reference, I created a user flow for adding and transforming batches of files. As I iterated on my designs, I received feedback from other designers that our users valued automation, and worked to make complex transforms kick off with as few clicks as possible.
Improving the Automation
This is the first design for the file conversion process. Here is a step-by-step list of what the user needs to convert a batch of files:
Select the file from their device
Select the output type for each file
Check the box next to the files for each file, then click convert at the top of the page -or- click the convert button for each file
Download each file individually
“So I have to select the file type for each one?... well, sometimes there’s a hundred files I have to transform and I don’t want to click that many little boxes...”
This is the revised version of the file conversion step. From here, the user is presented with a dialogue box immediately after uploading the file. This is the new process the user follows:
Select the files from the device
Select the file output type once that will apply to all files
And, that’s it. From here, the files are automatically converted, and then downloaded as once zip file. The user could change these settings to customize the flow if needed.
Front-End UI
From these designs, I scaled back my prototypes to create a minimum viable product (MVP) user interface. This is what could be accomplished in the span of the internship. At this point, the interface I designed needed to be completed in just over a week, so it was scaled back to only transform one file at a time, with little access to settings or any of the other bells & whistles.
The Takeaways
Highlights
Seeing a project from end-to-end in a short period of time improved my collaboration skills with my teammates working in development, product management, and other fields.
I found that first creating prototypes that were too ambitious in the project timelines, then using these ideas to scale back to an MVP got the team excited about the possibilities of the project, and made creating an MVP a very smooth process. I envision that this would make scaling the project up easier, as well.
User archetypes were helpful in understanding our users very holistically, without getting caught up in the fine details of personas.
Challenges
There was a bit of an adjustment period getting used to the Agile development style and finding a flow that worked for our team. But Eventually, we were running smoothly and I enjoyed the regularity and efficiency of our work.
Our team had bi-monthly demos to receive feedback. It was difficult to concisely communicate two weeks of my work in just a couple of minutes, but greatly improved my presentation skills.
Getting access to users was difficult, so I needed to make the best use of the interviews I could conduct, and find other ways to develop accurate user profiles.
Early-on in the process, there was not much work to be done in my team within the UI/UX space, so I needed to create tasks for myself to contribute, like secondary user research, affinity diagramming, and evaluating existing solutions.
Looking forward
In the future, I would like to involve users more along the way– while I valued feedback from my peers and mentors, I would have liked to speak with a larger pool of users and receive feedback to iterate on my design at more points in the process.
I enjoyed working with people from other technical and non-technical fields, and would love to continue to broaden my horizons by working in a diverse environment.