My design process explained for a client project that I worked on at Intrepid Pursuits.

1. Designs by Akhil Dakinedi
04.06.15

2. CONTENTS
RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle Imagery
FINAL CONCEPT
APP GOAL
BACKGROUND
Designs by Akhil Dakinedi
KEY TAKEAWAYS
04.06.15
LESSONS LEARNED

3. RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle Imagery
FINAL CONCEPT
APP GOAL
BACKGROUND
KEY TAKEAWAYS
LESSONS LEARNED
01

4. BACKGROUND
CareerVillage.org is a web
Q&A platform where
students can ask
questions about careers
and professionals can
answer them.
Students kept asking
“Where’s the app for this?”
repeatedly.
The client engaged us to
come up with a concept to
port over their current
platform to mobile. They
did not want wireframes
and an entire app; simply a
concept with a few screens
detailing the interactions.

5. RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle Imagery
FINAL CONCEPT
APP GOAL
BACKGROUND
KEY TAKEAWAYS
LESSONS LEARNED
02

6. ““
APP GOAL
The primary demographic
of the platform is high
school students (mostly
from a lower
socioeconomic
background) looking for
career advice.
Students mentioned that
they are stressed out all the
time and don’t seem to trust
adults around them.
Goal: App must have fun,
interactive, and engaging
UI/UX. Must stand out
from other Q&A apps in
its own unique way.
...to democratize access to the career
advice and guidance America’s
underserved youth need to create
professional goals and understand
their personal paths to those goals.
CAREER VILLAGE MISSION STATEMENT

7. RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle Imagery
FINAL CONCEPT
APP GOAL
BACKGROUND
KEY TAKEAWAYS
LESSONS LEARNED
03

8. RESEARCH
The users of this app will
be students, professionals,
and educators.
Other Q&A apps don’t
have a solid market
differentiator. Quora and
Answers.com keep it
simple. Other novelty
apps like Jelly and Kiwi
seem to be pushing
towards higher
engagement with new
design patterns.
A careful balance had to
be struck on usability
between the three
different audiences (ex:
students are used to the
latest app navigation
patterns whereas the
adults may not be).
Kiwi
Jelly
Quora

9. RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle Imagery
FINAL CONCEPT
APP GOAL
BACKGROUND
KEY TAKEAWAYS
LESSONS LEARNED
04

10. BRANDING
The client wanted to stick to
the existing brand as much
as possible, which is a tree
for an icon, representing
growth in the “village”.
It is supplemented by retro-
style 8-bit avatars that
become the default student
profile pictures (real pictures
of students are never shown
for anonymity).
I wanted to take this
concept of a tree
representing growth and
see how far I could take it
to integrate it into the app
with the aid of a visual
metaphor.

11. RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle Imagery
FINAL CONCEPT
APP GOAL
BACKGROUND
KEY TAKEAWAYS
LESSONS LEARNED
05

12. INITIAL
CONCEPTS
Step 1 was sketching. So
much sketching that I filled
up two entire mini-
sketchbooks with ideas on
how to incorporate the tree
into the app.
These were incredibly
loose rough doodles that
served more as a proof-of-
concept rather than a
concrete layout guide. I
wanted to ensure that the
idea was good before
jumping into perfecting
the UX and designing the
screens themselves.
Visual Tree Metaphor

13. INITIAL
CONCEPTS
I selected a few different
ideas that I liked from my
sketches and started
compiling a concept around
them.
The volume and color of the
leaves in the topic selection
screen would denote the
amount of questions/
answers and recency of
activity within that topic,
respectively.
Leaves start to fall off the
branches of topics that have
been inactive for a while,
encouraging the user to get
them active again by
contributing to it.
Visual Tree Metaphor
Topic Selection Home Screen (all topics)

14. INITIAL
CONCEPTS
While browsing a topic,
“liking” a question is done
by tapping the leaf icon to
its left, which animates a
leaf from the icon up to the
branch above. Asking a
question would add 3
leaves to the tree, serving
as a strong call to action.
The question detail view is a
modal that pops up over the
topic screen. Tapping
answers expands them.
These are loose concepts
(navigation, buttons, etc.
missing) that were done in
order to show the client
whether they liked the idea
of this visual tree metaphor.
Visual Tree Metaphor
Browsing Topic (College) Question Detail View

15. INITIAL
CONCEPTS
In order to present the client
with something to contrast
the tree concept with, we
presented an alternate
version that incorporated
lifestyle imagery.
It’s a lot more playful, a lot
more cartoony, and pops
out quite a bit. It attempts to
bring out the funky 8-bit
avatars to center stage in
order to promote the UI as
fun and engaging.
I personally did not like how
cluttered and distracting this
was turning out to be. The
user is overwhelmed with
colors and it feels overdone.
Lifestyle Imagery
Topic Selection Browsing Topic (College)

16. INITIAL
CONCEPTS
We presented the concepts
to the client. They fell in love
with the tree concept. They
especially loved how it urged
users to nurture their “tree”
by participating in the
community. It gives students
a sense of belonging.
As expected, the client was
not too crazy about the
second concept. They felt it
was over-the-top and “too
vibrant”, but were open to
seeing a cleaner and more
professional aesthetic for
this idea.
Visual Tree
Metaphor
Lifestyle
Imagery
Winner: Visual Tree
Metaphor

17. RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle Imagery
FINAL CONCEPT
APP GOAL
BACKGROUND
KEY TAKEAWAYS
LESSONS LEARNED
06

18. REFINED
CONCEPTS
Here are some early
iteration ideas on the tree
concept. I experimented
with a centered layout for
displaying the branches,
which provides for more
flexibility and adds visual
symmetry, but did not quite
reinforce the “tree” as much.
I also tried very hard to
make the tree look as on-
brand as possible. Even
subtle variations in the
curve of the branch can
drastically change the tone
of the screen.
The straight branch seemed
to be closest to their
currently branded tree.
Visual Tree Metaphor

19. REFINED
CONCEPTS
A splash screen would be
shown before anything else.
The refined topic selection
screen marks the user’s
progress as they choose
topics they are interested in.
The bar in the header fills up
as they pick the suggested
amount of topics.
I liked where this was going,
but I felt like the execution
wasn’t quite right. The
branches also started to look
less authentic and more
cartoony to me. There was a
lot more that could be done
here if iterated enough times.
Visual Tree Metaphor
Splash screen Topic Selection

20. REFINED
CONCEPTS
An active topic is shown in
contrast with an inactive
topic. The canopy color
changes as the leaves turn
orange and fall off the tree
due to topic inactivity.
Although this was heading
towards the right path, I felt
that it was getting too noisy
with the extra visual details.
Navigation and buttons were
also added in order to show
the client what the final
screen would look & feel like.
All questions and answers on
all these screens were taken
from their actual website to
best represent real content.
Visual Tree Metaphor
Browsing Topic (College) Browsing Topic (Psychology)

21. REFINED
CONCEPTS
Refined question and
answer detail views. User
can swipe left/right to view
questions in the question
view, and can swipe left/
right to view answers in the
answer detail view.
Tapping an answer in the
question detail view brings
the user into the answer
detail view.
Pulling down the banner
from a user’s profile picture
displays additional
information about them. It
can be dismissed in the
same way.
Visual Tree Metaphor
Question Detail View Answer Detail View

22. REFINED
CONCEPTS
Although I did not spend too
much time on it, I did want
to show the client what a
cleaner and simpler version
of lifestyle imagery would
look like.
Here we see one prominent
image in each topic with the
content going for an elegant
aesthetic appeal.
Lifestyle Imagery
Browsing Topic (Design) Browsing Topic (College)
The “Did you know…” section
in these refined concepts
attempts to educate students
of lower socioeconomic
backgrounds about career
options. Tapping it in this
case would take the user to
the “Chemical Engineering”
topic.

23. REFINED
CONCEPTS
When I presented the
refined concepts to the
client, they were still leaning
towards the tree concept (as
expected). They liked the
newer visual appeal of the
lifestyle imagery version, but
nothing more beyond that.
However, they felt like the
tree and the branch felt “less
authentic” this time around.
It seemed to have lost the
sense of genuine realism it
had in the initial concept.
This was a surprise to me, as
I felt that this tree was more
on-brand.
Visual Tree
Metaphor
Lifestyle
Imagery
Winner: Visual Tree
Metaphor

24. RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle Imagery
FINAL CONCEPT
APP GOAL
BACKGROUND
KEY TAKEAWAYS
LESSONS LEARNED
07

25. FINAL
CONCEPT
The visual aesthetic of the
branch goes back to the
original concept design
where it feels more
authentic and genuine. The
canopy on top is now gone
for a cleaner look.
Final topic selection screen
starts off with a seed and
grows into a tree (at the
bottom center of the screen)
as the user picks more topics.
The topics become branches
on the tree and add
themselves to the tree as the
user adds more.
The branches still denote
volume and recency of
activity. The visuals were
updated to be more pleasing
and relaxing.
Splash screen Topic Selection

26. FINAL
CONCEPT
Final topic screens were
overhauled with visuals of
sun, sky, clouds, and birds
subtly animating in the
background (College).
Leaf concept of animating
up to the branch upon liking
a question still stands. User
can ask a question from the
centered button in the
navbar below. “Did you
know” section still works as
before.
In a dead topic (Psychology),
the sun and birds are gone.
Leaves are turning orange
and falling off. Serves as a
strong call-to-action for the
student to get the topic
active by liking or asking
questions.
Browsing Topic (College) Browsing Topic (Psychology)

27. FINAL
CONCEPT
Question detail view is still a
pop-up modal that appears
above the previous screen.
User can browse questions
by swiping left/right and
horizontally scroll across the
answers below.
Tapping an answer opens up
the answer detail view.
Colors were updated to be
more vibrant and appealing.
Pulldown banner still stands.
Timestamp and location
were repositioned to where
they make more sense
hierarchically for the student
and professional. User can
swipe left/right to view other
answers in full view.
Question Detail View Answer Detail View

28. FINAL
CONCEPT
The client was extremely
satisfied with the final
concepts. They loved the
overhauled visual treatment
added in with the nature
theme and overall had a
very good feeling about it.
They acknowledged how
well we were able to pull off
the concept of using the tree
as a visual metaphor and
had a good outlook for the
users of the app.
They especially loved the
fact that we were able to
make it stand out from other
Q&A apps by implementing
a unique interaction model
and a beautiful aesthetic
appeal that feels fresh.

29. RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle Imagery
FINAL CONCEPT
APP GOAL
BACKGROUND
KEY TAKEAWAYS
LESSONS LEARNED
08

30. KEY
TAKEAWAYS
• Careervillage.org’s brand
identity of a tree still
works with this concept.
• Topics are “branches” on a
student’s tree. Leaves on
the branch denote the
volume and recency of
activity in that topic.
• Pleasing and relaxing
visuals provide stress
relief for high school
students.
• Empty branches, leaves
falling off, and the lack of
other aesthetic design
elements serve as a
strong call-to-action for
the student to contribute
to the topic.

31. RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle Imagery
FINAL CONCEPT
APP GOAL
BACKGROUND
KEY TAKEAWAYS
LESSONS LEARNED09

32. LESSONS
LEARNED
This was a good challenge
for me, as it did not involve
the typical design process of
research, wireframing, look
& feel exploration, and
creating mockups.
Instead, it involved coming
up with a strong concept
and executing it well
through a few mockups.
I learned the importance of
presenting an alternate
concept to help the client
contrast the stronger design
with, because it helps sway
their decision towards one
or the other. It’s also a good
fallback strategy, even if you
as the designer know that
one design is definitely
stronger than the other.

33. LESSONS
LEARNED
Even with lots of iteration,
the original branch that I
drew ended up making its
way into the final design.
I learned the importance of
going with your gut. I had a
hunch that this could work
in the beginning and kept
trying to make the idea
shine through mockups. It
didn’t dazzle until the very
end, when everything came
together beautifully.
After our client raises funds
to support the project, they
will develop the app and
launch it on both iOS and
Android in the near future.

34. Designs by Akhil Dakinedi
04.06.15