Grow - process
the challenge
As urban density increases, more people are finding themselves living in smaller homes and apartments. The affordability of high bandwidth telepresence and the increased overhead of office space has increased the percentage of people who work from home.
Therefore, the challenge is to seek meaningful designs that address the challenges faced by telecommuters who live in smaller homes.
8 weeks of ideation & Iteration
research
Wireframing
I did rough paper wireframing using index cards to explore different user interfaces and to visualize the user flow.
Style exploration
I started by exploring different illustration styles.
Then, I did illustrations of the watering can, sun, and nutrients of my top 3 styles.
I combined them to view the full picture of my home screen.
screen iterations
Home Screen
Task Page
Weekly Review
change of metaphor
After few rounds of feedback and careful considerations, I decided to change my metaphor from a tree to a world. There are several reasons:
Building a city/world is more exciting than growing a tree. It will have a better app retention rate.
The user will unlock landmarks, local food, traditional games and many other unique things to the city when they complete their tasks which could indirectly inspire them to travel.
I changed my art from 2D illustrations to 3D CAD because I want this app to be available in VR or AR in the future. The user can fully immerse in the world they build.
inspirations
Form Inspiration
I wanted a to build a city with a harmonious flow and some stories behind each elements in the city.
Color Inspiration
I used pale and calming color palette because I wanted my user to slow down their pace and appreciate what they have accomplished.
CAD Building process
Build models in Solidworks then import them into Keyshot
2. Do sketches to plan the 3D scene
3. Arrange them in Keyshot
4. Add colors
User flow
I mapped out how a user would interact with the app.
visual composition
Exploration of different composition of the screens.
Prototyping
Transition Planning
After having all the screens done in Sketch, I printed them on paper to plan the transitions animation.
From Sketch to Invision
I watched tutorials of several prototyping softwares and decided to use Invision to make the transition animations.
final design
how it works
Click “View” to see the task flow.
