CareerVillage Mobile App - From idea to mockup

Designs by Akhil Dakinedi04.06.15

CONTENTS

RESEARCH

BRANDING

INITIAL CONCEPTS

REFINED CONCEPTS

Lifestyle Imagery

Visual Tree Metaphor


Lifestyle Imagery

FINAL CONCEPT

APP GOAL

BACKGROUND

Designs by Akhil Dakinedi

KEY TAKEAWAYS

04.06.15

LESSONS LEARNED

RESEARCH

BRANDING

INITIAL CONCEPTS

REFINED CONCEPTS

Lifestyle Imagery



Lifestyle Imagery

FINAL CONCEPT

APP GOAL

BACKGROUND

KEY TAKEAWAYS

LESSONS LEARNED

01

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.

http://CareerVillage.org

RESEARCH

BRANDING

INITIAL CONCEPTS

REFINED CONCEPTS

Lifestyle Imagery



Lifestyle Imagery

FINAL CONCEPT

APP GOAL

BACKGROUND

KEY TAKEAWAYS

LESSONS LEARNED

02

““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

RESEARCH

BRANDING

INITIAL CONCEPTS

REFINED CONCEPTS

Lifestyle Imagery



Lifestyle Imagery

FINAL CONCEPT

APP GOAL

BACKGROUND

KEY TAKEAWAYS

LESSONS LEARNED

03

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).

KiwiJelly

Quora

RESEARCH

BRANDING

INITIAL CONCEPTS

REFINED CONCEPTS

Lifestyle Imagery



Lifestyle Imagery

FINAL CONCEPT

APP GOAL

BACKGROUND

KEY TAKEAWAYS

LESSONS LEARNED

04

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.

RESEARCH

BRANDING

INITIAL CONCEPTS

REFINED CONCEPTS

Lifestyle Imagery



Lifestyle Imagery

FINAL CONCEPT

APP GOAL

BACKGROUND

KEY TAKEAWAYS

LESSONS LEARNED

05

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.


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.


Topic Selection Home Screen (all topics)

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.


Browsing Topic (College) Question Detail View

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)

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.


Lifestyle Imagery

Winner: Visual Tree Metaphor

RESEARCH

BRANDING

INITIAL CONCEPTS

REFINED CONCEPTS

Lifestyle Imagery



Lifestyle Imagery

FINAL CONCEPT

APP GOAL

BACKGROUND

KEY TAKEAWAYS

LESSONS LEARNED

06

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.


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.


Splash screen Topic Selection

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.


Browsing Topic (College) Browsing Topic (Psychology)

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.


Question Detail View Answer Detail 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 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.

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.


Lifestyle Imagery

Winner: Visual Tree Metaphor

RESEARCH

BRANDING

INITIAL CONCEPTS

REFINED CONCEPTS

Lifestyle Imagery



Lifestyle Imagery

FINAL CONCEPT

APP GOAL

BACKGROUND

KEY TAKEAWAYS

LESSONS LEARNED

07

FINAL CONCEPTThe 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

FINAL CONCEPTFinal 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)

FINAL CONCEPTQuestion 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

FINAL CONCEPTThe 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.

RESEARCH

BRANDING

INITIAL CONCEPTS

REFINED CONCEPTS

Lifestyle Imagery



Lifestyle Imagery

FINAL CONCEPT

APP GOAL

BACKGROUND

KEY TAKEAWAYS

LESSONS LEARNED08

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.

RESEARCH

BRANDING

INITIAL CONCEPTS

REFINED CONCEPTS

Lifestyle Imagery



Lifestyle Imagery

FINAL CONCEPT

APP GOAL

BACKGROUND

KEY TAKEAWAYS

LESSONS LEARNED09

LESSONS LEARNEDThis 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.

LESSONS LEARNEDEven 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.

Designs by Akhil Dakinedi04.06.15