#Shaunak Storyboard

1 messages · Page 1 of 1 (latest)

pliant wolf
#

The illustrations work just fine, and suit the flow. The text is a bit rougher, and doesn't quite sell the story as expected.

#

(I'll follow this with notes for each frame 😄)

devout shuttle
#

Hey before I get into that there was a convo about green check boxes and things like "Just an idea, but I'm not sure if it's worth exploring or not... Could you reframe the text so that they do still want the green check? Like
"3rd party tracking blocked"
instead of changing the check that's already readily known to more text?
It might depend on context though"

#

What this regarding my storyboard or something else cause I got confused. LOL

pliant wolf
#

That was for Cyber Querent's question about a feature comparison table, entirely unrelated. ayy

devout shuttle
#

Got it lol.

delicate forge
#

Hehe

pliant wolf
#

(Take all of this for whatever it's worth. I'm to writing in a decisive form, 'cause it's faster.)

#

Frame 1
"Brad is doing grocery shopping for today but he has no change with him and wants to know in advance how much he will pay before checking out so can save more money."

Can be shorter, less run on, and each sentence should be valuable.
"Brad is grocery shopping. He has no cash on hand, and is budgeting tightly. He wants to track exactly how much he will spend today."
Action. Need.

#

Frame 2
"He notices a sign in the store of an app customers can use called Pikk. When Brad download the app he sees that he can take pictures of items he wants and contains a cart page to see how much he will pay."

Again, can be more concise, and have more important details. Also watch for typos and mis-conjugation, eg. "download" should be "downloads".
"Brad sees a sign near the front of the store advertising an app called Pikk. Brad downloads the app. He sees the app lets him take photos of products, and then see a total cost on a cart page."
Still a little awkward, but something like that.

devout shuttle
#

Basically you saying is just shorten the amount of text?

pliant wolf
#

No. Shorten sentences. Make each sentence a concise idea. Watch for spelling mistakes.

devout shuttle
#

LOL that is what I ment. My bad

pliant wolf
#

Also the third frame is a good example of the importance of order and what you're trying to show.

devout shuttle
#

No need to type so much for me man. I will take care of it but thanks for the feedback.

pliant wolf
#

Frame 3
"Brad easily walks around the store and takes pictures of items he need such as soda, chips, spices."

Brad walking easily is not important. What's important is how easy it is to use the product. The items are not terribly important, either, but they do add some flavour.

devout shuttle
#

Yeah LOL should have ment that.

pliant wolf
#

Indeed, that's why I'm pointing it out. What you meant doesn't matter if it doesn't come across.

#

Okay, meeting time. Lemme know if you need any further info.

#

Run another draft by us.

#

Nevermind, meeting cancelled.

#

So, a more general note. Make sure your narrative style remains the same. In frame 4 you're talking about what the app allows rather than what Brad is doing. "For some items, Brad adds multiple to his cart." is focused on Brad's story, rather than the product's functions.

#

Frame 6 just doesn't compute for me. I can't quite make sense of what it's trying to say. I know what it should say, but the text is very confusing.

devout shuttle
#

Got it i want to focus on using 6 frames only just to keep things simple and scannable. Just need to work on making the sentences more clear.

pliant wolf
#

I don't know that scannability is important here. User stories are an internal tool, so the audience just wants the information. Conciseness is important so that the right information comes across clearly.
And this isn't a comic book, you don't have frame or page restrictions. Use whatever space you need to get the full story across.

devout shuttle
#

Hey man, it may not look like much changes but here is the new and revised one. I have to be careful. I was trying to add more content to the frames for the first one but nothing was being added. I had to delete the first one and redo it again. SMH. I am able to change text though.

#

And for the 4th frame I honesty feel it get a story though. It shows a feature that you can update quantity.

pliant wolf
devout shuttle
#

LOL okay I get in now.

#

So a storyboard is all about the user?

pliant wolf
#

Wait, this app is to walk around the store taking photos of items, then having someone else go around and pick up those items while you pay for them?!
You take photos instead of shopping and someone else has to do the real thing?

devout shuttle
#

yup

pliant wolf
#

That's double the work and time.

#

Who's this for?

devout shuttle
#

That how it was in the beginning. I am just redoing certain things in my portfolio. It was an internship I got through networking and talking to people.

pliant wolf
#

Is someone building this? Is this a product out there?!

devout shuttle
#

Never sat for an interview though. I am basically someone who graduated from college in January trying to better myself in UX Design.

#

And focusing on building more experiences and doing free projects.

pliant wolf
#

Okay, so, yeah, in UX storyboards are about the user, and understanding their behaviour. Or at least creating a stand-in for the user and your assumptions of their behaviour. It's an easy way to communicate to a team who it is you're making it for, and why.

devout shuttle
#

I see its all about creating for the user.

pliant wolf
#

So highlighting features means you're ignoring the user, to your own detriment. You're focusing on your own (or, the company's own) egoic needs, rather than the needs of the user. Your product is not for you, it's for your users. The better you understand them and their needs, the better the product will be.

devout shuttle
#

Got it.

pliant wolf
#

If you think you have a good feature, trying to make a realistic narrative that solves a user's problem with it is also a good reality check.

devout shuttle
#

Thanks all the feedback on ways I can improve.

pliant wolf
#

No problem!

devout shuttle
#

Since you looked at my storyboard do you maybe want to look at a app I made using Adobe XD? It was a school project I did that I decided to make updates to it.

pliant wolf
#

Sure. I can take a look in a couple of hours.

devout shuttle
#

Just look at the screens and see if you would see yourself using it and does it look modern day looking. I will tell now it is a mental health app to help college students mange anxiety. Fill free to add more feed back when ever you are free. Thanks.

pliant wolf
#

Whoa that's pink! Why's it so pink? That's a whole lot. It is overwhelming, which is not what you want for a mental health app.
Just to be clear, are these wireframes or final mockups?

devout shuttle
#

Final mock up

pliant wolf
#

Okay.

devout shuttle
#

I am trying to make better UI LOL

#

Maybe you can see something else that I can improve on that maybe I cant see?

pliant wolf
#

Yes, definitely. I'm gonna write a whole bunch, hehe.

#

So, this doesn't look finished. Styles are inconsistent. The colours are really difficult to look at, let alone use. Hierarchy of information is all over the place. Use of icons is varied and confusing. I'll break down each of these points and give you ideas of how to solve them.

devout shuttle
#

Thanks

pliant wolf
#

First and foremost, the colours. That magenta is an incredibly strong colour. Those bright red colours grab at our attention, which is good to know and use strategically. It activates a very base level human reaction. That colour can mean poison or danger in animals and plants, so we instinctively take notice.
But you covered your whole app in it. So even corners of the app that have nothing in them are fighting just as hard for the user's attention as the actual important bits. This is actively stressful to the user.
This is why apps usually have white or black/dark grey backgrounds. They're not being unoriginal, they're being cognizant of the effects of colour on people. A background colour should not be fighting for attention with everything else in the app. You can use a colour, but make sure it's heavily dulled, either by using a tint (mixed with white), a shade (mixed with black), or a tone (mixed with grey). Tones will have a middle value (dark/lightness), and more difficult to contrast against with foreground objects.
Your messaging screens are thus the most successful, as they're mostly a light grey background. Something like that makes a lot more sense.
To add to that, you use red (again, a very strong, vibrant, attention grabbing colour) throughout as... a barrier between magenta and much stronger contrasting colour. The effect of this is dulling the pull of the actual action you're trying to bring attention to, and instead highlighting the outline of the object, and the colour fighting happening between the magenta and red. This should be the opposite, pulling attention to the action itself.

#

Even beyond that, your most important actions (login, create account, start new journal entry), and some of the least important actions (back, logout) use the same style, a very difficult to read style that actually looks like a disabled style. You're putting white text on light grey. The easiest thing to see on those buttons is the outline. The text should be as high contrast as possible, while limiting colour fighting.

#

Relatedly, all of your titles seem to have outlines on them. Outlines, unless the text is very large, usually make text more difficult to read. You would use that in logos, or in graphic design where you need to separate text from the background. In this case you're putting white text on magenta, it's already contrasting enough.

#

Choose colours that don't find each other, and don't fight the user. Be aware of the effects of those colours, and make conscious choices about how you're using those colours. Draw attention where you want it, not where you don't.

#

Oh, another bit on the colours, you're using red icons on magenta. Same problem as before, I can barely make out the actual icon, all I see is the colour fighting edges.

#

Next, styles. You have 6-7 button styles, alone, and all of them very different, without any clear reason.

#

You also have multiple styles of text inputs, and non-input elements that also look like inputs.

#

Some screens have back arrows in the top left, others have large back text buttons in the bottom left.

#

All buttons that are multi-line are left aligned. This can work, if done right, but it's really gotta be sold as a stylistic choice. Typically buttons are center aligned, and multi-line buttons are avoided as much as possible.

#

Text input placeholders, on the other hand, should be left aligned (or right aligned for RTL languages), as that's how the text will be filled in.
Also consider your input styles. Your login and sign up forms have square-corners, centered text, and a thick black outline. Your search bar is tiny (too small to use), with a lighter outline, and rounded corners. Your chat input is closer to search, but a different size. These should all have the same style.

#

The spacing and sizing of elements does not feel considered, and is not reflective of use. On the friends list, for example, the avatars are huge, and the names are distant from them, all forced to be multi-line because a huge button on every single item takes up 2/5 of the width. Your avatar can be smaller, the names should be on one line as much as possible (one long one, that demonstrates how you would handle multi-line, would be helpful, just don't make it default), and that message button could be just an icon. In fact, if the only action with a friend is to message them, why even have that button? It could be an arrow, or nothing.

#

Further considering the sizing of elements, you should use a grid (look up "Adobe XD grids"), even if it's just four columns. Something to give you guides as to how to position things, and how to fill up your space. On the Create Account page, all the elements should line up to one grid line or another. Right now everything's floating, vaguely lining up. The email and password inputs are, for some reason, thinner than they are on the login page, even though the first and last name inputs expand to the full width, as do the titles and other inputs.
You want to be able to actual tap on inputs easily, so they should be wider than the actual space needed to type in/display the content. First and last names should both be full-width instead of sharing a line. The month, day, and year should be wider, or better yet, a single date type input, which the system can handle. Don't re-solve problems that are already solved better.
Given the other information you're asking for, "Gender" stands out as less- or not-at-all necessary. If you are going to include it, at least have the option for "other". When it comes to mental health (and health in general, for that matter), genderqueer, non-conforming, trans, or otherwise non-binary people are some of the most underserved. Don't add to that problem.

#

The profile screen ... seems to be misnamed. There's a button to view profile on the My Profile screen. It looks more like a menu to access all the other features in the app, or the landing page I'd see when I open the already signed-in app.
Those circular buttons are more difficult to use and read than a simple list of those things. On the pages that are linked-to from this page, like Games and Activities, you use icons in the title pages. Why not use those icons on this menu page? That will cement the icon's meaning, making them more useful when you use them elsewhere for navigation.

#

There's plenty more to say, but I think this is already an overwhelming amount of information.

#

My suggestion is that you remove all colour from these and call them wireframes. This is your first sketch, placing elements where they're needed, ignoring style.
Next step would be lo-fi mockups. Don't worry about colour yet, you could still work in greyscale, or use limited spot colours for important elements. Start positioning things better, use a grid, be consistent in your elements, even if they're not the final style. If you use another style of the same type of element, say another button, ask yourself why, and if you can't justify it, use the same button as elsewhere. Get some more feedback here.
After that, start working on the app's branding. Starting with your colour scheme, figure out what you want your colours to be. Use the 60-30-10 rule (https://www.youtube.com/results?search_query=60-30-10+color), or something like it, to limit yourself. Get some more feedback.

#

Some important things that I skipped or skimmed, because this seems like more an exercise UI design than UX, are the deeper usability issues, touch-target sizes, navigation standards, information architecture, or even the value of certain features. That'll come later.

#

I hope you're not scared off, but eager to make this better! jz_yougotthis_db GoodTeammate

devout shuttle
#

I will be honest I started with sketches and then moved on to the hi-fi mock ups. I felt like I could have done the wire framing portion of it but I felt like I was doing the same thing over again which is creating UI but just adding colors to it.

#

Basically with everything you told me it is all about improving the visual design of everything right such as colors, texts and buttons and placements of items right?

pliant wolf
#

It's about improving everything.
The point of doing sketches, wireframes, lo-fi, hi-fi is to identify problems as early as possible. Between each step you re-examine and reflect on decisions. You figure out what you did right and what needs improvement or removal. You get feedback from stakeholders. If you just do sketches, then make those into hi-fi mockups, you haven't judged anything, you're just re-making the same thing, with the same mistakes.

#

You shouldn't be "just adding colors to it". You should be rebuilding it with a better understanding of it, possibly very different from the original.

devout shuttle
#

Makes sense thanks. Will make small improvements day by day with this.

#

Basically things have to keep on getting improved when you move on to sketches and wireframes and mockups

#

While getting approval from stakeholders.

pliant wolf
#

Yeah. But not just approval. When you're showing someone like a customer, an end-user, you're not just taking their direct feedback at face value; you need to recognize how they use/test/talk about the product and figure out the truth from there. They may tell you one thing, but mean or need something very different. The end-user is your most valuable resource for information about use, but they're not necessarily UX experts, they don't have the skillset or vocabulary to express their needs. So take their experience as a whole.
Did they miss a feature or have trouble finding things they expected to be there? Did they complain that they couldn't tap on something? Do they understand what the app is for? Are they frustrated by how to navigate somewhere?

devout shuttle
#

I see.

#

Thanks for everything Phill. If I have any questions regarding UX Design which I will, I will get back to you. LOL. I trying to learn a lot and focusing on not being so general when it comes to ux process. I will admit I only have surface level knowledge and I need to get in deeper.

pliant wolf
#

Great! The only way to get more experience is to do it! Always happy to give feedback, so keep posting in here or #💫design-feedback . Mention me if you want my particular feedback, but there are tons of other amazing designers here with excellent feedback. Hearing a variety of opinions is also very important.

#

Also, if figuring out and designing a whole app at once is overwhelming, just pick a screen or two to start, really get those to a place you're satisfied with, and expand to other screens.

devout shuttle
#

yeah i have gone on the adp llist alot

#

so i am getting advice from as many people as possible

pliant wolf
#

When it's just for learning/experience, it's really low stakes. No need to finish everything if at one point you've learned all you can from a project.

devout shuttle
#

This is very random. Go ahead and be harsh on me lol. Out of 10 starts how good was the app in general to you? In terms of current visuals, the ability to solve users problems and how modern day looking it is? This way I have an idea where I am now and where I can improve?

pliant wolf
#

It doesn't look like an app, it looks like wireframes. It doesn't look modern, or even complete.
I barely paid attention to features, but they seemed standard, if not a bit weird. The various parts also kinda spread the user's attention thin. Having counselor calling and journaling and exercise tracking and random simple games? That's too much. Focus on the highest value piece, maybe a second feature. I think the calling and journaling are the key useful parts here, as they're the most connected. The other pieces will inevitably be done better by other apps, so they're just distracting you from doing the core features as best as you can.
The rounded buttons were fine, when they were centered and single-line. Their colours, of course, are another story. No other element really stuck out as finished.

#

Part of what makes it all look like wireframes is the thick outlines on things. It looks like pencil outlines, y'know?

#

Look up inspiration on Behance, Dribbble, Muzli, or wherever. Figure out what you like about those, and try to emulate it.
A warning: a lot of what is shown on design project sites isn't necessarily great functionally. But you'll get a good idea of colour and style, and how to make something appealing.

devout shuttle
#

I know. Thanks again

pliant wolf
#

Don't let this get you down. It's a great start for a project. You put together a whole app. Now keep iterating on it.

devout shuttle
#

Your good. You are giving me ways on how to improve. There have been times I have gotten down on so many rejections and cold emails for hrs. SMH. First time feeling the heat.

pliant wolf
#

Good. Keep at it!

devout shuttle
#

Okay so i want to do things slowly at a time. I made just color changes to the profile page. Let me know what you think

#

BTW I have also looked at mobile apps such as facebook, whatsapp and google meets to get an idea of colors, button positioning, layout etc. Gives me an idea.

pliant wolf
#

The background is better, but, again, if you use a colour that demands your attention on every button, it doesn't work. A colour that bright should be you 10% colour, not 30%.

devout shuttle
#

Interesting. Not arguing just want to understand. Why is that? Colors like that should not be in your face too much demanding for attention?

#

Dont you think it can look less aesthetic?

pliant wolf
#

Did you watch a video on 60-30-10 that I linked to?

devout shuttle
#

Nope was so busy yesterday but will watch it later today. I even look at other peoples portfolios. There are a couple of apps I see that have mostly white background.

pliant wolf
#

If you walked into a hospital that you'd never been to, and you wanted to go to the cancer ward to visit a friend, but didn't know how, what would you do? You'd like for signage to lead you there.
If all the signs were bright pink and huge, you would be overwhelmed, and uncertain what to look at first. You'd be confused and frustrated, and end up going to a person to tell you where to go. That's a wayfinding failure.
If all the signs are different, moderately toned colours, with one high-contrast sign calling your attention, with a legend for all the other colours, you can quickly find the colour you need to follow to your destination. You're on your way without asking anyone. Success!

#

Here, this is 2.5 minutes. It will explain 60-30-10 colour palettes. https://www.youtube.com/watch?v=V-SD_zV9S2c

How much of a color should you use? Are there rules for how to use a color palette? In this video, Greg Gunn explains the foundation of how to use and balance your color palette using the 60/30/10 rule.

Want to learn more about color? Sign up for our color course - http://bit.ly/ColorCreatives

Follow Greg on Instagram - https://www.instagram.c...

▶ Play video
#

It's all about hierarchy. Lead the user to the main action, give them the tools to discover the rest.

devout shuttle
#

LOL I just watched two videos. I just learned that colors convey mood. 2nd the 60% means the color takes up most of the design, while the 10% or less is what you want the user to focus on.

pliant wolf
#

The mood of magenta is "OMG LOOK AT THIS! PANIC!", not the calm feeling you probably want for a mental health app.

#

Softer pinks, or yellow-to-pink-to-purple gradients would be more calming.

#

Find subtly in colours, rather than full value, full brightness. Get a sunset mood going on.

devout shuttle
#

Okay and I read your comments regarding spacing and positioning. I do need to make that better. For the button and text you say I have 6-7 button styles. Is that bad for consistency purposes? Your saying best to keep most buttons the same?

pliant wolf
#

Correct. If they are different, you should have a good reason for it. A user will recognize the first button as "button". If you keep piling on different styles of buttons, the user will start to get confused about what is and isn't a button, and why, what the difference is.
Why would you want different buttons, anyway?

devout shuttle
#

LOL makes sense.

pliant wolf
#

However, you can have different states and modes for buttons. This is different than entirely new buttons.
States would be default/enabled, hover, pressed, selected, disabled. These are functional parts of a button, how they react to the user or the state of the app.
Modes/styles/variants would be call-to-action, primary, secondary, tertiary, dismissive, destructive. These are variations on the main button style to bring more or less attention. If you think of a dialog that asks for a permission, you'd probably end that with two buttons, "Yes" and "No". You probably want the user to hit Yes, so you give it more prominence than No.

devout shuttle
#

lol we pasted a messege at the same time,

#

This is very random want your opinions on this. A lot of people even on LinkedIn will say "make entry level jobs entry level jobs" Why 3-5 years experience" Or "Hire someone based on character and potential rather then experience. You can always teach skills" Do you think this applies to entry level UX designer coming out of college trying to get that industry level experience?

pliant wolf
#

Yes, I think an entry level job makes sense for someone coming out of college. They'd want to demonstrate an ability to learn new skills, rather than a history of experience. But some jobs just want to buy a solution, rather than accept that people are ever-changing and growing.

devout shuttle
#

Okay I'll ask it there.

#

Thanks again. I'll spend some time making more and updates. Dont want to bother you too much. LOL

pliant wolf
#

Consider the order I suggested, too. While colours are fun, you need to build from the ground up. Colours won't fix the text issues, button issues, spacing issues, etc.

devout shuttle
#

Yeah makes sense

pliant wolf
#

Here's an example of (small) a set of button variants: