The first step was learning about users for whom I was building the product and emphasizing with them.

My Client also has these use cases in mind: overworked boss who's stressed because his company's growing fast and he wants to prepare himself to team retreat remembering employees info; business professional trying to stay on top of his game; solo business owner who needs to keep an entire CRM in her head; political wonk; focused student. These stories helped me to empathize with Users and build design having all of them in mind. However, I narrowed down one User Persona and tried to address that person every time I had to make design decisions.

Exploring how other transformers work and the advantages/ disadvantages of competitor services.

When I analyzed competitors and understood the target audience's needs, I narrowed down the main problem in experience, which was a tedious card setup. No one wants to spend time copying and pasting rows and columns into the cards. So the answer was to give auto setup and make manual setup as easy as possible.

To understand how users would interact with the product and which controls they would need, I created a journey map. It was divided into two main parts of experience: the new document setup and interacting with the existing document. Based on understanding the touchpoints, I worked on defining the controls for flashcards and building the manual setup flow. The paper prototype was the starting point for the design process.

I defined the app's main parts and worked on card setup flow to understand how to build a usable interface. Based on the wireframes and reflections on it, I built an initial design with the most critical functionality intended to reveal the structure's biggest issues. That became the basis for the first user testing.

Based on data from user testing, I understood that the product had a few issues the cognitive perception of card controls, and a problem with quiz logic.

Received feedback allowed me to build a system where data forms the dashboard with a visually understandable hierarchy. I worked with stakeholders to ensure the design I'm building is possible and relatively easy to implement. The early feedback helped me to identify the biggest issue to solve: How to improve the flashcard experience? The solution: Moving from classic flashcard design to a customizable dashboard view.

To fix the design based on Users' feedback, I decided to change the few sections' structures.

– Change the control "Hide fields" to something more obvious.
– Make the names of the tabs "Card/Table/Quiz" more noticeable and distinguish them from other controls.
– Take away sorting in quiz settings.
– Move "number of questions" up, and change "All" to "All possible."
– Change the logic for "Columns for answers."6. Add tab "Settings" to a quiz.
– Add interaction for tapping on data visualization.

Card changes progress:

Working on the dataset's quiz section, we decided to use a question-by-question flow, rather than scrolling down and seeing all questions.

The testing revealed that quiz settings had some issues, so I made minor changes to improve user experience.

Iteration process

According to Nielsen Norman Group, the key to getting a useful web application is constant iteration. The more you test your product and improve it, the better it's going to get. So after a couple of testings, I landed with a design with better structure and more refined interactions. Although the card building flow still needs the polishing, it finally came together.

Designing the home page, the task was to wake the customer's interest in trying out the product.

The app's home page is the Catalog page, which consists of all the User's datasets.

The dataset page consists of file info, privacy settings, and actual card/table/quiz section.

The interaction between tabs of the dataset includes the controls bar animation.

Card customization includes a few controls that allow Users to change the appearance of the card. That way, they can turn on/off data visuals, set up the auto-transition, sort, and filter data.

The visual system components of the design.

The interaction of question-by-question flow for the quiz.

Final prototype

The result of my design efforts landed on this final MVP for Superknowing. It included limited functionality that allows to introduce service to Users.

This guy over here is interactive, just scroll through the screen ⤵

+ Video of the prototype

‬Card settings

‭Although I tried to make it easy to understand how to adjust card components‭, ‬I feel like service needs further work done on this part of the design to make it really simple and straightforward‭.‬

‬Manual and auto card setup flows‭

I worked on the second part of the user journey‭, ‬which included interaction with the existing card‭, ‬but setting up the file is‭ ‬also a very important part of the experience‭.‬

Finishing quiz flow

‬It needs more work and iteration because I did just partial testing for it‭, ‬so it probably has a few issues‭.‬