UI/UX: Designing screens for a new app
A freelance job brief analyses
On current times, having a great business idea is more often than not being translated into a startup setup with a complex digital product to boot.
This job started within those parameters. A friend of mine, a fellow designer, was conducting a robust product discovery research. Its main goal was to propose a digital product that would enable his client to streamline their work process - that is providing a service know as Knowledge Translation - and understand its feasibility and marketability.
Knowledge Translation allows scientific researchers a way to make their papers more affable. The client’s job resides in understanding the scientific paper matter and translating it into an approachable format for a targeted audience such as students, medical bodies, politicians and others.
I got involved in the project with the task to establish a user flow and design the screens for the MVP. The goal was to idealize a simple enough solution, easy to develop and quick to test.
Through the discovery, it was found that all the busywork could be optimized and all required data could be standardized into filling forms. The greatest difficulty being the large amount of required information, not only for the user sign up, but for the research paper registration as well.
This article contemplates: user sign up; user profile (with empty and filled states); research paper registration (papers to be translated); translated papers list (home screen). To maximize development efficiency, every component was based off Bootstrap.
The following is a brief overview of those screens and a bit of the user flow. You are also definitely welcome to check everything in detail on Figma.
User flow
Using the data from the discovery research as a basis, I sketched a user flow, with two main tasks: a user sign up and the research paper registration.
With the user flow laid out, I was able to conceptualize the following screens on high fidelity.
Login and sign up
The visual aesthetic of the screens was based off the brand’s identity, with the login screen being the most prominent one:
The sign up was lengthy, since we had to account for multiple kinds of accounts that would be able to be created in later versions. At first, only the researcher account registration was considered.
Profile page
Within the profile page is the most important CTA, a button to request the Knowledge Translation service, which starts the research paper registration flow.
The page also changes state (from empty to filled) when the user goes through the research sign up at least once.
Research sign up
To request the Knowledge Translation service, the user must go through a research sign up, giving enough information to guide the translation process. This means a lot of input and select forms, not only about the research itself, but also the objective to be achieved through the translation (for example, reaching municipal administrators to change healthcare policies).
To minimize the number of forms, we defined what data needed to be obligatory and added it to the first step of the registration flow. Everything else, excluding the research paper’s stage which has a dedicated step, was placed in a optional third step. The user could chose from a list of additional topics, complementing with extra information. Or it could simply be skipped.
Home
The home screen shows all public translated researches in a list. The user can search, filter and access each research detail’s page. The research card has a picture and shows a preview of text, and up to four themed tags.
Final thoughts
As it’s stated at the beginning, this is a brief analyses of a project that spammed through 2 to 3 months. What I’m showing in this article are the final screens, but as is common in design projects, it had many iterations. This version was approved through a series of user interviews, where we showed the whole flow and asked for feedbacks.
At the end, the client got very satisfied, the potential users saw a great deal of value in the product. On top of that, participating in a way to make knowledge more accessible is very nice indeed, working with something you believe is always a great plus.
Don’t forget to check it in greater detail at Figma! ☺
