Transitioning takes learning and vice versa, I dedicated 2020 to make a more permanent transition from graphic design into UX design. By joining Memorisely’s UX/UI Bootcamp (June 2020), I set out to expand my tool stack and best practices. With the goal of adopting a Product Design mindset.
The start
Since the beginning of February 2020, I have been following the Memorisely tribe. A remote community of UX/UI Designers from all over the world.
After becoming enthusiastic about their monthly book club and loving all the positives vibes. I figured I could fill in some of my knowledge gaps by joining the first Memorisely UX/UI Bootcamp.
Before the Bootcamp started, I set out to complete the Bootcamp’s Prep Design Task to start thinking like a Product Designer. It helped to get into the right mindset.
My current workspace
The goal
Learn the ins and outs of a UX/UI design by observing and analyzing an existing product.
The task
Start by analyzing a product you frequently use to deepen your user-centered knowledge. Forming user stories from your own experience before moving towards empathizing with a target audience.
Matching user stories with a visual user flow using screenshots and reviewing them to understand every key step. Then moving on to verbalize user flows into a text-only walkthrough to understand the importance of explaining the leaps taken between steps. Moving to the physical step of rapid prototyping on paper, sketching out components, getting idea’s on paper quickly.
Finally, by summarizing all the above and explaining them in a video format you will learn how to transfer ideas as you would in, for example, a design standup.
The steps
- Choose a product
- Define user tasks
- Create visual screenshot flows
- Write out user stories
- Sketch out a paper prototype
- Record and explain paper prototype
The product
The app that I am most delighted about the past few months is the Dutch ‘Makkelijke Moestuin’ (Easy Vegetable Garden) App. Their step-by-step concise way of guiding you to grow your own vegetable garden is simple yet effective and fun, making an effort to find my green thumb.
“By analyzing the Dutch Makkelijke Moestuin App, a DIY gardening app, I aim to uncover how to split a multistep input process into easily digestible chunks.”
Defining user tasks
In the book Lean UX, by Jeff Gothelf and Josh Seiden, user stories are described as:
“The smallest unit of work expressed as a benefit to the end user.
The book also gives a handy template of writing user stories.
‘As [user], I want to [fulfill task] so that [gained benefit and achieved result].’
In this case, I will write 3 user stories. Each user story is written with myself as the ‘user’. Each story aims to accomplish one task focussing on one main goal and outcome.
1. As Rianne, I want to create an account so I can start learning about gardening
2. As Rianne, I want to start a new gardening patch so I can start with sowing
3. As Rianne, I want to plant seedlings so I can track the growth of the soon to be vegetables
Task one: Create an account
After the onboarding sequence, this is the first thing you’ll do.
1. Visual screenshot flows
By reviewing each screen, breaking up one experience into bite-size visual steps, I started to see how you are guided towards a set goal. Adding directions in the form of emoticons:
Click / Swipe
Pain points
Success!
2. Write out user story
Actions taken to complete task one:
- Open MM App
- Swipe/Skip through onboarding
- Click ‘Aan de slag’ / ‘Start here’
- Pick option to create account, via Google / Facebook / E-mail
- Select ‘E-mail’ input
- Type e-mail using mobile keyboard
- Select ‘password’
- Type password using mobile keyboard
- Optional: pick a ‘gebruikersnaam’ / ‘username’
- Type username
- Click ‘Maak account’ / ‘Create account’
- All set!
3. Sketch out paper prototype
No details just thumbnails
4. Record and explain paper prototype
Verbalize design steps and user flow to understand connections hidden underneath the surface.
Task two: Start a new gardening patch
Next up: create a garden patch to start your little victory garden.
1. Visual screenshot flows
Click / Swipe
Pain points
Success!
2. Write out user story
Actions taken to complete task two:
- Select the garden patch icon in footer menu
- Select ‘Ik wil mijn moestuinbak(ken) toevoegen’ / ‘I want to add my vegetable patch’
- Edit the default vegetable patch to desired size. Click ‘Afmeting moestuin’ / ‘size patch’ to edit garden area
- Choose size from dropdown menu
- Optional: Click the toggle to add extra’s if your garden has a ‘klimrek’ / ‘climbing frame’ or ‘poten’ / ‘legs’
- Select ‘Naam’ / ‘Name’ to give your patch a name
- Type name
- Select ‘Opslaan’ / ‘Save’ to finish
- View your set up garden patch, ready to start sowing
3. Sketch out paper prototype
4. Record and explain paper prototype
Task three: Plant a seedling
Start tracking the growth of a seedling.
1. Visual screenshot flows
Click / Swipe
Pain points
Success!
2. Write out user story
Actions taken to complete task three:
- View your set up garden patch
- Click garden square where you want to sow
- Search for a vegetable to sow
- Select vegetable
- View ‘Meer over [deze plant]’ / ‘More about [this plant]’ to read more plant information and stats
- Click ‘x’ / ‘close’ to go back to main vegetable page
- Select ‘Zaai nu’ / ‘Sow now’
- Tap through the (7) ‘Plant onboarding’ pages or view the ‘Why this’ stats
- Finish by viewing your garden patch
- Repeat for sowing more plants
3. Sketch out paper prototype
4. Record and explain paper prototype
Key take-aways
After reviewing these user stories and diving deeper into their design, functionality and flow I once again realised that the union of these elements make or break an experience.
The most fun part? The odd realisation that my brain flows at the same speed of paper prototypes, moving offscreen gave me the ‘Aha’ moment where the step-by-step user flow ‘clicked’ into place.
Result
I felt my brain going from: ‘Hey, cool colour palette and graphics!’ to ‘Wow, this works intuitively, but could it become even better?’ Which is essential in a UX/UI design setting.
It feels like my brain has tuned into a new learning mindset by going through the motions. Say hello to some new neuron connections! This has been a definite fun way to start adopting the Product Designer mindset.
