Published on | Prototyping: From UX to Front End — Medium Ekaterina Semeshina

So I’ve successfully passed the first three steps of Toptal’s screening process.

The initial interview was quite easy; you can read more about it in my next article.

The portfolio presentation part was a challenging one.

The second interview in regards to my portfolio, process, and style of work has been excellent. I truly loved speaking to Cristina — a senior designer at Toptal.

And finally I’ve come to the part, that’s exciting and frustrating at the same time. The test task. I got inspired by the series from Bill Tribble on “8 Hours to Join Toptal” and decided to share my experience as well, as I hope it will help future applicants understand the process better and prepare in a proper way, in order not to waste as much time as I did. (on that in my Join Toptal Series articles)

Before I got the brief, I read a lot of articles in regards to this process, and the idea I got from what people wrote was that you’re given 8–10 hours to complete a design ask this very moment when you agree to do it. That there will be some sort of a time tracker, and hey — I have to admit, I was scared a bit. But this is how the brief states it:

“We keep this brief intentionally open for interpretation, and we expect to see what you can achieve and how far you can take it. Please share your process and typical approach as a designer and use this as an opportunity to showcase your skills, creativity, and talent. We recommend spending around 8 hours on this challenge. If you are available and want to spend more than 8 hours, feel free to spend longer.”

So technically, if I wanted to spend 80–100 hours on this project and present something complete thought through, I could…

My first question was why would you give 2 weeks time, but at the same time recommend to spend around 8 hours on the task. Then I found that some contestants complained about a question from the person who was reviewing their work, that says: “Why didn’t you spend more time on the task, since you had the opportunity to?”

So this drove me into some research, but about it in another article…

Let’s dive into the brief:

BabyTrack Application

BabyTrack offers everything you need to track your baby’s growth, development, and health. The power of this app is in the collection of data that allows input from multiple users and is easily shared between parents, doctors, and carers. Design an app that makes it easy to input data on the go, pulls data from various sources, and allows areas of common data collection inputs plus custom inputs. Create an automatic alert for common patterns of concern.

My first questions were:

What are the needs of young mothers? What are the relationships between parents and nannies? What do doctors tell young mothers? What is their input?What information is relevant in a child’s development?

Being neither a young mother (having a Doberman puppy doesn’t count), nor a nanny, nor a doctor my first instinct is to get asking people. Given the limited time frame, I’m going to begin that process with a survey, and perhaps ask some questions on Facebook, VK groups and some of my friends who are young mommies.

The format of my design process is to be done in 8–10 hours, instead of a proper 7–10 days. Of course, I’ve read about many conversations toptal’s senior designer had with contestants and asked them why not spend more than 8–10 hours on the task, when you’re given two whole weeks to complete the work.

My understanding is that the timeframe that is given to see what you can come up with during this time, your way of thinking and mainly prioritizing tasks, as this is crucial in an agile design and development processes.

The Process I chose to follow in this case

UX Research strategy suggests 5 stages of Design Thinking: Emphasise, Define, Ideate, Prototype and Test. Hence due to the limited timeframe, I am going to be juggling between those.

Redefining the brief or what is the app all about

I started by redefining the brief for myself. And this is how I understood the scope of the project:

In today’s fast pacing world, it is hard to keep track of everything. Regulations get stricter, and there more and more of those. In some countries, laws are very demanding regarding documenting the child’s development, in others parent wish they were. Children’s psychology is one of the most exciting fields, as it shows how a small organism evolves into something complex, and how particular person come to be.
Any adequate parent wants to provide the best possible conditions for their children’s development. Send them to the right courses, catch bad behavior before it is too late, or just accommodate their individual needs.
Today I am going to try and encompass all of these use cases in our baby tracking app.

What am I trying to achieve?

Clear communication between all members involved in the child’s life
Timely alerts for any arising issues or opportunities in the child’s development process
Sync of information input by various participants
Facilitating parent’s lives by automating day-to-day tasks they need to perform with their children
Giving them access to child psychology library in a simple and applicable form
Creating a digital life print of child

How am I going to do this?

Gather some default child’s growth research to understand the scope of work and process (my background in psychology helped me a lot, because I knew which direction to dig in)
Ask some of my friends and colleagues, who are young parents, about what is important to them, what do they need, what do they do, what do they keep track of, what apps do they use. Create personas that would be different from one another as much as possible, because there are two sides to the children’s development. On one side there is the general information, and on the other side there is a large spectrum of personal issues that might not touch everybody.
Look at the competitors
Choose a user story or a couple I would sketch out, because hey I don’t have the luxury of doing them all this time.
Information Architecture
Sketching
Prototyping

So let’s get started…

Image Source

My main external reference for the information was the World Health Organisation’s website.

I also found Kids Health website very helpful in terms of building the development part of the app.

This is what a child’s development looks like from 1 months old until 5 years of age.

Source

As research shows there is a lot to know, and with the overload of information it is quiet easy to miss something.

What data is important in child’s growth and development?

There are a couple of ways to look at this question. First and foremost, as stated in the WHO article, some standard medical indicators describe the growth process of your child. Those indicators are:

– length/height-for-age
– weight-for-age
– weight-for-length/height
– BMI (body mass index)-for-age

These measurements need to be performed each month during the first year of life, later on, based on physician’s recommendations and opinion.

Later on, it is important to measure the development of following items:

– language
– physical
– socio-emotional
– cognitive development
– nutrition
– exposure to violence
– availability & quality of programs that aim to support childhood development
and much more…

Those indicators also help gather data for better understanding of any undesired developments, such as personality disorders, or any physical reactions to different events in life.

It is a matter that is very personal to every parent. Here are some personas based on real-life people, and the items they named during our conversations. The names of these people have been altered to protect their identities.

Personas

Since I didn’t have too much time creating a Google form or a Typeform questionnaire to send off to potential users, I went old school and used phone conversations, messengers such as Facebook Messenger, Whatsapp, and Telegram to send off my five questions to potential users and gather their answers. Since most of them were Russian, I decided not to post their answers here, the translation and summary of their answers and transformed into personas. I’m using a pre-made template for personas I’ve found somewhere on the internet.

Competitors

A conclusion that can be drawn from the look at the UI / UX competitive analysis, is that they all offer the general baby growth functionality, such as feeding, diaper, sleeping, pumping, growth logs. Some provide medical visits, medication intake reminders, illnesses records. None of these applications provide a complex solution that would solve the issues mentioned by the parent in the interviews and tailored to our brief.

Features that apps supportPlatforms SupportedThird Party Apps Integration & Communication & Sync between users

Based on this research I decided to illustrate how our Baby Tracker will work. This is a very high level diagram.

High Level Overview of the Baby Tracker App

Based on the concept of information sharing between multiple users, as well as having multiple roles in the child’s life — it suggests that we will have 3 different interfaces to build. Here is the overview:

Interfaces in the Baby Tracker App

Use cases I decided to work on

By this moment I don’t have any time left for any more research, so I’d better be starting my sketching, prototyping, testing, putting together some UI, create an Invision prototype and sending off to Toptal. Remember in their email; they said it present as if you were to send it off to your client. That means I need to still prepare a proper outline for the work I’ve done in just under 7hours.

Sketching

One of my favorite parts of any Application Design process is sketching. As I have time to sketch out a couple of solutions, this is what I am doing. (Obviously, if my team were with me, we would have delivered far more in this amount of time, but hence this is my exercise).

My Focus timer is on ( hey I need to fit into the desired timeline), my Nespresso is hot and smells so good, and I am plunging into the sketching. Of course having the problems and functionality required outlined in front of me will help me enormously.

Source: Google Search

So I started sketching out some concepts, organizing my thoughts and ideas into something that is comprehensible.

First and foremost I outlined what the tasks at hand are and what am I trying to solve.

For those who can’t read my writing, the three images ay:

Users Want: personalized interface, tailored to their children’s needs, easy sharing of information across contacts involved in their children’s development and care, relevant actions & information, scalable or customisable, little commitment barriers

Users Issues: a lot of functions that are irrelevant, difficult to input information from multiple sources — no full picture of the situation going on in their kid’s life, scatteredness, too many apps to manage

“How can our baby tracker help?”

1. We will tailor the experience of the party involved based on the child’s information. There is no need to display the breastfeeding if the child is two years old, for example ( though there are cases when mommies still breastfeed at this age, then they will have to turn this option on manually )

2. Simple actions required. No manual filling in of conditions, symptoms, the interface should allow an almost physical like interaction.

3. Have as many pre-filled sections as possible. Later on, in my sketches, you will see that I made an accent on the “Logs” Page and particularly the Development Logs. It is a critical report that is filled in directly by the parent and nanny, so I thought I required more thought than other generic screens that are also present in many different apps and some concepts are quite good by the way 😉

4. The information is shared across contacts that participate in the “digital life” of the child/children

5. Documents library. It is an option that I thought of while browsing through ideas of how to keep medical reports together and available for new doctors. Obviously, the scanning functionality of a medical report is a great tool, but there will be a situation when it is not applicable. For this matter, I thought that adding a PDF scan of the doctor’s report would be helpful in the logs’ section.

What about the content?

Designing with real-life content make the app more lively and helps understand the concept very well. Since I am short in time, some of the content stayed “Lorem Ipsum, “ but the activity logs and development sections got some real stuff in, that I took from some books I read online and some medical articles on children’s development in their first five years of life.

So here are items that are critical in different stages of the child’s growth, and I am outlining them in a list form because of the time of the essence. Below you will find the concept of how the development logs section will work.

The logging in starts at about two months of age, as this is where the child starts showing his or her abilities, and we need to keep track of them.

The whole idea behind tracking them is to have a parent enter them as they notice these things happen. If something didn’t happen in time, the item will be transferred into the next milestone and marked as delayed. If something happens before the usual time, it will be marked as early development. The statistics will be sent to the family’s physician and this way both the doctor and the parent can be up to date with the baby’s path, notice any alert moments or explore exciting opportunities. Many parents I’ve spoken to express their concern on how to keep track of the development and know what qualities to develop in their child. Hopefully, this approach will allow us and them move closer to the goal, and help the genius take over, or prevent any undesirable behavior, such as violence or psychological disorders that might impair the child in the future.

The whole list of milestones and items related to them you can find here.

First Sketches

I had a great couple of chats with my colleagues and friends this afternoon and got some great feedback on my wireframes.

So being confident with the solution, I am sketching out a rough solution on paper and transferring it to my Sketch App file.

Sketch App Low Fidelity Mockups

I open a pre-made wireframe kit template for Sketch App, change some colors and fonts, set up my layout (decided to go with the iPhone 7) and launch my Sketch Mirror up on my Red iPhone 7. I am ready to go.

I add in some basic iOS elements from an iOS UI Kit into my file ( thank God for Shared Libraries in Sketch 47 Beta — gotta love those ), some icons are in place thanks to another shared library I plugged into my Sketch Beta Libraries.

Next, I am laying out the primary screens with some real data I gathered in my research phase because designing with real data give the app another feel and look.

The first part of the use case is here and looks good and clear to me. I am almost ready to proceed with the UI for that.

First steps into the baby track app

The part of role selection is done, and I am good with presenting the basic screens for the three roles we defined.

Once this is complete, we’re moving onto the most interesting part today. The parent’s interaction with the app. As mentioned above I decided to illustrate the process of monitoring, and filling in the development of the baby. The home screen offers a variety of customised shortcuts to the parent and a summary of all activities of their baby. By choosing one graph, the parent gets to the screen with the details.

The calendar is pretty basic, and offers different views: Daily, Weekly & Monthly.

Then we can see some basic screens for the logs

And finally the development section. As you’ve seen above the development is tracked in 10 milestones, or at least this is how it’s recommended to do.

The milestones are: 2 months, 4 months, 6 months, 9 months, 12 months, 18 months, 2 years, 3 years, 4 years, 5 years

As I was sketching, I was still getting some feedback from my colleagues and friends, and they suggested I change the baby switcher from a slider (like you see on the “development Section”) to an account switcher in the left upper corner:

Making the baby switcher in the corner will leave you more valuable real estate for actual actions to perform and statistics to display, will allow the users to concentrate on one baby at a time and avoid any confusions, mistakes and irritations due to bad finger usage…

Switching the baby slider to a dropdown will help your users concentrate and perform the task better. It definitely is my way to go about multiple accounts interface…

Some mommies have shows their concerns about the slider for the development milestones and requested to display it as a to-do list

I believe having it as a slider will make me do too many movements, and it will be hard to know if you’ve completed one or not. A short summary of milestones on the same page as the to do tasks would nice to have…

So I did it, now the development tracker looks like this:

Development Screen

So the low fidelity screens are ready, I’ve got my notes down and some are kept safe in my mind, and I am ready to make this app presentable to my client, in this case a Senior Designer form Toptal, Mike.

UI Inspiration

As many designers I go and look for the UI inspiration all across the web. My favourite place are still Dribbble, Behance, Pinterest, UI8.

Here are some UI concepts that I liked and I believe would be great for the baby tracker app. Minimalistic, with accents in the right places, fit all genders and are not overwhelming on the eyes.

Source: Dribbble

Letting the creativity take me away …

One and a half hours later I come up with the registration, roles, home & logs screens. All I am left with are a couple of development screens, a baby’s profile page & some alerts.

Sign Up FlowHigh Level FlowTab Bar Overview

Quick check up on weather we met our objectives

Input from multiple users : I’ve illustrated that multiple users with different roles can participate in the child’s digital card population
Sharing between parents, doctors & caregivers: as stated above, the app syncs in real time and all three roles receive relevant information on their side. Notifications & alerts are send in various situations accordingly, as well as reports, statistics, achievements & memories can be shared right on the spot with those who are part of the babies digital life, as well as by using outside services such as email, messengers and social media.
Inputting data on the go: the app supports various logs that can be made as the process is happening, as well as after. From the doctor’s side the data can be synced in real time, as certain medical testings / procedures are happening.
The app pulls the data from various sources such as doctor’s medical software, scanned reports, manually entered data, and third party apps that are integrated with the baby tracker app.
Allows areas of common data collection inputs plus custom inputs. This part is illustrated in the logs, and the development flow.
The app provides push & in app notification, as well as alerts for common patterns of concern.

Conclusion

Rationale

Overall I am happy with the result, though I know that in two weeks time I could have done something much more detailed, I didn’t want to exceed the desired spent time by much. My final result is delivered as a PDF with annotations and a simple Invision Prototype.

Things I could have done better

Hey, there is always room for improvement, and as I am a Capricorn ( yes I believe in Astrology), there is a lot to be done to reach the fullest potential of the application’s design. Regarding delivery, I could have delivered a principle animated showreel of the app, and I could have worked on the UI more.

That said, I am used to collaborating with developers and system architects on building such complex systems and find best solutions on multi-level interactions. Having other designers producing different concepts and groups of users to test them on leads to better and more refined ideas, which allows delivering high-fidelity mockups quicker and in higher quality.

I hope you liked it. Remember to give me a Clap & stay tuned for more posts.

Toptal Test Task for UX/UI Designer was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Toptal Test Task for UX/UI Designer

Cool stuff, every week

More Articles