Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Designs by Akhil Dakinedi
04.06.15
CONTENTS
RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
L...
RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle ...
BACKGROUND
CareerVillage.org is a web
Q&A platform where
students can ask
questions about careers
and professionals can
an...
RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle ...
““
APP GOAL
The primary demographic
of the platform is high
school students (mostly
from a lower
socioeconomic
background)...
RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle ...
RESEARCH
The users of this app will
be students, professionals,
and educators.
Other Q&A apps don’t
have a solid market
di...
RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle ...
BRANDING
The client wanted to stick to
the existing brand as much
as possible, which is a tree
for an icon, representing
g...
RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle ...
INITIAL
CONCEPTS
Step 1 was sketching. So
much sketching that I filled
up two entire mini-
sketchbooks with ideas on
how to...
INITIAL
CONCEPTS
I selected a few different
ideas that I liked from my
sketches and started
compiling a concept around
them...
INITIAL
CONCEPTS
While browsing a topic,
“liking” a question is done
by tapping the leaf icon to
its left, which animates ...
INITIAL
CONCEPTS
In order to present the client
with something to contrast
the tree concept with, we
presented an alternat...
INITIAL
CONCEPTS
We presented the concepts
to the client. They fell in love
with the tree concept. They
especially loved h...
RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle ...
REFINED
CONCEPTS
Here are some early
iteration ideas on the tree
concept. I experimented
with a centered layout for
displa...
REFINED
CONCEPTS
A splash screen would be
shown before anything else.
The refined topic selection
screen marks the user’s
p...
REFINED
CONCEPTS
An active topic is shown in
contrast with an inactive
topic. The canopy color
changes as the leaves turn
...
REFINED
CONCEPTS
Refined question and
answer detail views. User
can swipe left/right to view
questions in the question
view...
REFINED
CONCEPTS
Although I did not spend too
much time on it, I did want
to show the client what a
cleaner and simpler ve...
REFINED
CONCEPTS
When I presented the
refined concepts to the
client, they were still leaning
towards the tree concept (as
...
RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle ...
FINAL
CONCEPT
The visual aesthetic of the
branch goes back to the
original concept design
where it feels more
authentic an...
FINAL
CONCEPT
Final topic screens were
overhauled with visuals of
sun, sky, clouds, and birds
subtly animating in the
back...
FINAL
CONCEPT
Question detail view is still a
pop-up modal that appears
above the previous screen.
User can browse questio...
FINAL
CONCEPT
The client was extremely
satisfied with the final
concepts. They loved the
overhauled visual treatment
added i...
RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle ...
KEY
TAKEAWAYS
• Careervillage.org’s brand
identity of a tree still
works with this concept.
• Topics are “branches” on a
s...
RESEARCH
BRANDING
INITIAL CONCEPTS
REFINED CONCEPTS
Lifestyle Imagery
Visual Tree Metaphor
Visual Tree Metaphor
Lifestyle ...
LESSONS
LEARNED
This was a good challenge
for me, as it did not involve
the typical design process of
research, wireframin...
LESSONS
LEARNED
Even with lots of iteration,
the original branch that I
drew ended up making its
way into the final design....
Designs by Akhil Dakinedi
04.06.15
Upcoming SlideShare
Loading in …5
×

CareerVillage Mobile App - From idea to mockup

681 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

CareerVillage Mobile App - From idea to mockup

  1. 1. Designs by Akhil Dakinedi 04.06.15
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 34. Designs by Akhil Dakinedi 04.06.15

×