With Yahoo finally being sold to Verizon, let's take one last look at one of their best design achievement, their news app.

1. APP DESIGN TEARDOWN
PRODUCTDESIGNPRO.COM PRESENTS...

2. HOW THIS WORKS
I’m going to walk through two
common things a user would
do and share my insights as a
mobile app designer.

3. Yahoo, my old friend.
How have you been? What
have you been up to?

4. Ooooh what’s “More?”
Im intrigued by your app name

5. In-depth?… Not exactly what I
know Yahoo for. They have
more of a reputation for lifestyle
and click-baity pieces, but we’ll
see.

6. Solid rating at 4.2 with 149,000
reviews.
TIP
When looking at apps as a
designer, I always read
reviews because it gives you
a real sense of what’s
working and what’s not
working, regardless of how
beautiful the app is.

7. The breakdown of reviews is
great! Lots of people really love
it. Bravo!

8. Wow! Yahoo is replying to feedback.
This is one of the best ways to learn
from your users, and make them feel
heard and loved. All anyone wants in life
is to be known.

9. SCENARIO 1
Getting my
mid-morning news fix

10. AFTERNOON LULL
Time to see what’s
going on in the world.
I’ll check Yahoo.

11. Ah. Beautiful! This is relaxing.

12. Hm its beautiful, but is it weird
that the weather is here? I guess
it gives me a sense of “my day”
However, when I read the news
I’m looking outside myself for a
sense of “the day.”
Maybe I’m being a bit too
philosophical :)

13. Nice way to upsell into their
other app by showing a snippet
of its value front-and-center, and
then offering more full features if
you download the app.

14. Im bummed this is the top story
of today. Let’s see what else
there is…

15. Wow, It’s as easy to scroll
quickly through my news as it is
to read Instagram. It’s a familiar
Instagrammy UI, too.
TIP
It’s good to *ahem* reference
UI’s from popular apps because
then your users will be familiar
with the interaction patterns.

16. See?

17. Just noticed these tabs. They’re
subtle enough that they aren’t
distracting. It’s clear that I can
tap or scroll to move to different
sections.

18. I don’t really care for celebrity
news, I wish there was a way to
quickly remove stuff from my All
Stories feed.
I bet there was a prototype built
where you could swipe to get rid
of stories and customize your
feed. The problem with that is
that then you can’t swipe to
navigate between sections. So,
navigation is more important
than customization.

19. Well, let’s just go ahead and
read that top story.

20. The priority here is clearly
reading. There’s no action bar
with navigation or actions like
comment or sharing. That’s
below.

21. This is really easy to read,
typographically. It reminds me of
USA Today’s recent rebrand.

22. Instead of an action bar or other
button, it relies on android
buttons to navigate back home,
which is thoughtful. They saved
some screen real estate.

23. Looks like the second time we
see a place to comment…
I wonder if some people just
jump straight into the
comments without reading the
article.
Could Yahoo reduce trolls by
putting comments only at the
end of the article?

24. This view was super fast to load,
and I can see why. It’s just text. I
like that there are just headlines,
no pictures.

25. Nice placement of related story.
The CTA is explicit, which likely
converts better.
NOW WATCH OR ELSE!!!!!!!!

26. Hm okay, so no navigation
makes this super clean, but Im
left wondering...
How do I get to the next story?

27. Got it. Swipe!
There could be a tip encouraging
me to swipe the first time I got to
the end of an article, or ever right
after I land in my first article.

28. Again, I wish I could let the app
know that I want to see more
articles like these. Maybe by
tapping Society...

29. Society
+ More
− Less
✕ Always hide
Something like this could pop-up

30. OK, back to business. Let’s
swipe to see the next story...

31. *Ah! A Wild Ad appeared!*
Hm, and visually it’s a little
wonky. Add some margin, guys!

32. Visually, I really like their little
sponsored icon. I recognize it
from Tumblr. It’s playful, and
takes the edge off the fact that
it’s an advertisement. It says “Im
an ad! But at least Im honest…”

33. The CTA is weak. “Earn more” or
“Apply now” or “Get more miles”
would probably convert better.
OK, let’s keep swiping.

34. Cool. Looks like I can pop this
out somehow.

35. LOL. “swegway”
Gotta share that!

36. Good placement of the share
icon, right by the sweet-spot for
my thumb.

37. “Read more” changes into “Read
less” and stays in place. Its
useful if I want to look at the
whole photo again. It makes it
easy to go back and forth
between reading the description
and viewing the picture. I also
like that the full description only
covers a little bit of the photo and
then creates a scrollable region.
Great “design for scale” choice.

38. At first I thought “Why not use
dots to show pagination?” and
then I realized why this is a
much more scalable design
solution.
Imagine you have 23 photos..
you can’t fit 23 dots across the
bottom. Text was the better
choice.

39. OK, let’s get back
to all the stories.

40. Classic Yahoo News headline.
Let’s swipe right to
change topics.

41. Swiping through these sections
makes it easy for me to quickly
get an overview of what’s going
on in each category of life, and
then deep dive when I find a
topic that I care about.
I imagine that this is nice for
people who like browse, but my
guess is that most people only
really care about a few topics.

42. Having such a long list of topics
also has some other issues...
Haven’t we seen this story
already?

43. Which brings me to our
next scenario...

44. SCENARIO 2
Customizing the app so I don’t
have to bother with the topics I
don’t care about

45. Inspired by this bit of feedback
and this awesome response

46. SATURDAY MORNING
I’ve used the app a few
times, and am committing
to using it regularly if I can
tweak it the way I like it...
Let’s make it mine!

47. There’s really nowhere
else to look for settings
other than the menu…
Let’s take a look.

48. Great! I can edit the categories
that show up.

49. An idea I’ve expressed earlier
is that the categories reorder
based on how much time you
spend reading each one.
ie when I primarily read
Yahoo Beauty, it becomes my
first section.
The downside is that there
might be unpredictable
ordering and re-ordering, and
that would be super
frustrating. A way to remedy
that would be to ask before
reordering anything.
“It looks like you’re reading a
lot of Beauty, make it the
category you see first?”

50. Anyway, let’s edit these

51. What a wonderfully simple UI.
It’s clear these grippies help
reorder the sections.

52. Actually, maybe too simple?
At first I didn’t know what the
checkmark meant. Also I didn’t
know if it was checked or not. I
would recommend just using
the standard checkbox
component to make it clear
these are checked.

53. Clearer, right?

56. I’ll re-order these in the order
I want to read them in by
dragging them around...

57. Well, that was easy and clear.
Success!

58. THANKS!
Learn more about
Product Design at
www.productdesignpro.com