Christydesign

A designer's blog

[designchristyyip]

5/4/2017

Nothing is a mistake.

There is no win and no fail 

There is only MAKE

[designchristyyip]

1. but if you’re trying to go really broad and horizontal, you have to adapt to the way that people work and let them use your tool to map the way that they’re thinking about the problem.

2. We are focused on the team’s view, in the same way that if you were out in woods and you were lost, you’d want to have your map or your GPS. You’d look down at it, and everyone would look at that to see where they were at and where they needed to go. That’s how we think about the way people use Trello

3. That’s the great question. Very early on we knew that a lot of the features people were going to ask for were going to be developer-type features, because that was our audience. That was Stack Overflow, that was Fog Creek Software. People that knew us were going to say, “This is cool. Can you add all these Kanban-type things and swim lanes and Gantt charts?” When you’re building a tool for the mass market, those things make no sense. We just weren’t building a Kanban tool. We weren’t building an Agile software development tool..

4. You have to understand the horizontal use case and take a step back and listen to that first and try to figure out if you can solve it that way before you put in a very specific feature. Going back to my earlier point about vocabulary, when you introduce new abstract concepts in software, you’re taking on a lot of costs, because it means you’re going to have to teach that person what that concept is.I’ll use an example from Trello. We made a thing called Collections, where you can put boards into a collection. That’s like an abstract concept. It isn’t a thing, and currently the feature is only half implemented, because you can’t see the collection really. It doesn’t provide value in a way that’s very visual and very Trello-like. It does allow you to organize your boards, but now people have to learn what collections are. We have to teach them that.

5.you’re thinking about buyer personas and you’re trying to target people, it’s like now you’ve got eight.

6. In the future I could see a world in which you’re basically solving a very specific use case with a board by turning on a couple Power-Ups and essentially turning Trello into a lightweight CRM, or maybe a lightweight applicant tracking system. There would be a Power-Up that does that and maybe you pay extra for that. There are a lot of different axes that we can do. We’re expanding with that and learning.

[designchristyyip]

Trello’s Michael Pryor on building a mass-market product

Without the right marketing strategy, the right product released at the right time can still fail.

Introducing new, abstract features into a horizontal software product comes with heavy costs, because you’ll have to teach users about the concept.

Michael doesn’t see templates as the right onboarding technique for new Trello users. Rather, he’s planning to bet on crowd-sourced, community-driven use case stories.

Marketing a horizontal product is hard, but there are specific use cases that offer downstream benefits, e.g. targeting HR to use Trello for onboarding new employees means every single hire gets a free lesson in Trello.

It’s crucial to charge for your product, but flat rates leave a lot on the table. Your pricing scale should align with the value you give users.

[designchristyyip]

Notes

Unfortunately, designers tend to have a love affair with animations, partly because animations are so fun to create that we might not know when to stop.

The Take Away

Isn’t it fun looking at examples of bad design? Thankfully, it’s educational as well. Here are the key lessons and best practices from the five examples of good and bad designs:

Understand what your users need, then deliver that information.

If you’ve got lots of information to convey, try using visuals instead of text.

Always label your links! Users don’t like mystery links.

Avoid adding any kind of friction to user actions, unless they’re meant to dissuade the action.

Test your clever designs and include them cautiously.

Animation is like cursing. If you overuse it, it loses all its impact.4

[designchristyyip]

‘The art of the start 2.0′ speech

Speaker : Guy Kawasiki 

27/07/2016 1. Ask simple questions - “There for what” based on different version - “Isn’t it interesting” - “Is there a better way”

2. Make a MVVVP make a minimum .... product  - Visible : branding & label  - Valuable : make a better life - Validating 

3. Get going — don’t create plan, create product your purpose is to create customers and create products.

4. Do something cringe-worthy - Review and get feedback - Find complementary/soul mates : someone is better than you, someone have skills that you do not have, but basically you two are in the same way. - make a mantra - Define a business model : be very specific. for example, if your job is making money, your goal should be wealth transfer, or functions.  - Keep it simple  - ask women : because men want to kill everything

5. weave a MAT Kawasaki suggests creating a system of milestones, assumptions and tasks to keep your business on the right path and increase your chances for success. - milestone : finish the prototype & design - Assumption : primary assumption that you can get - Tests : launch your sites - Tasks : hire engineers

5. Tell your story - make it personal  - apply the opposite test - embrace the 10/20/30 Rules - your slides never ever use white background

7. Hire infected people with passion - ignore the irrelevant : some have perfect background some might not have  - hire someone who is better than you 

8. Socialize  - you should have a perfect/ professional profile : “Tinder” App actually has given a great example to showing the relationship between people, there are only two kinds of options when you are showing your socialize profile to someone else - interest and not interest.  - embrace Wikipedia model : providing you rvalue all the time

9. Seed the cloud - let a hundred flowers blossom  - find the influencers : people tell/share something to each other. - make your product very easy to use - do not let clowns grind you down : avoid negative people 

“It is too far to drive, and I don’t see how it can be a business”

[designchristyyip]

Usability(2)

- users should find it easy and become proficient when using a design interface - they should be able to achieve their goal easily through using that design - they should be able to learn the interface easily, so that return visits are just as, if not more, easy. - visibility of the system’s status. - match between the system and real world. - user control and freedom : users make mistakes. there should be an emergency exit which is easy to find and exit the current system state without having to jump through hoops. Undo and redo functions are essential.

[designchristyyip]

Usability

Usability refers to the ease of access and/or use of product or website       - it should be easy for the user to become familiar with and competent in using the user interface on the first contact with the website. - a usable interface will be relatively error free when used - guidelines show a product’s features proven to improve usability. - we can measure usability throughout the development process, from wireframes to prototypes to the final deliverable. Testing can be done with paper and pencil but also remotely when we have higher-fidelity prototypes. - it is important to analyse the users’ performance and concerns with a web design as early as possible, from there, we can fine-tune design revisions according to the guidelines. - users should find it easy and become proficient when using a design interface - they should be able to achieve their goal easily through using that design - they should be able to learn the interface easily, so that return visits are just as, if not more, easy.

[designchristyyip]

iOS human interface guidelines notes(2)

Avoid providing destructive actions. Thank carefully before providing destructive actions in a notification detail view. If you must provide them, make sure people have enough context to avoid unintended consequences. Actions identifies as destructive appear in red.

Content is your highest priority. Changing focus when the environment changes can be disorienting, frustrating, and make people feel like they’ve lost control of the app. Ensure primary content is clear at its default size.

Provide ample spacing for interactive elements. Try to maintain a minimum tappable area of 44pt*44pt for all controls.

App icon Embrace simplicity. Find a single element that captures the essence of your app and expire that element in a simple, unique shape.

[designchristyyip]

Product design spring

Design spring 

1) High-level storyboard     Th first Kickoff Workshop with the client. Document the client’s concept and idea of the product. (basic requirement)

2) Basic mood board     Get inspiration from Pinterest, collect the similar product and design. Organize them to artboard if that is necessary. Show the artboard to the client in the second workshop.

3) Functional flow     Document the functionality of the product. Tag the priority level to each function. During the kickoff workshop, feel free to draw on the wall then capture a screenshot. After the meeting, the basic function should be all done. The detailed and expanded functions would be depicted. 

4) Wireframe and screen flow     It is the basic visual document for the next workshop. Keep in mind, there always are two versions. One is just sketches. one is a completed document with explanation. 

5) Consolidation

6) Design

[designchristyyip]

Note (Zero to one)

why do people compete with each other?

Marx : people fight because they are different. The proletariat fights the bourgeoisie because they have completely different ideas and goals. The greater the differences, the greater the conflict. 

Shakespeare : all combatants look more or less alike. It is not all clear why they should be fighting, since they have nothing to fight about. 

[designchristyyip]

Motion

Motion is the next level of tech. It is a natural way of interacting with things and it’s absolutely critical to the design of the future. We need to say goodbye to static user interfaces and create interfaces which much more human and alive. Creating a motion language for your app will reinforce your brand and compliment your design. 

[designchristyyip]

iOS human interface guidelines notes

Widget Allow user to add the widgets they care about to the search screen, which is accessed by swiping to the right on the Home screen and the lock screen.   - a great glanceable experience : it is essential to deliver the right amount of information and interactivity, provide tasks that can be completed in a single tap (not pan or scroll) - show content quickly : should not need to wait for content to load. (cache information) - provide ample margins and padding : at least a few pixels between each edge and the content. content tends to work well when lined up with the centre of this icon. - be adaptable : A collapsed widget is the height of roughly two and a half table rows. An expanded widgets is ideally no taller than the height of the screen. - avoid customising the background of a widget : design for consistency and legibility for the blurred widget background. Never used a photo as a background, as it may clash with the lock and home screen wallpaper. - use the systemic font in black or dark grey for text : about legibility, dark colours work well with the standard widget background. - when appropriate, let people jump to your app to do more. - pick a good widget name : the inclusion of your app name instills confidence that the widget is in fact provided by your app.

Messaging Static content, such as text, photos ,videos, and sticker, or interactive content such as a multiplayer game board or collaborative takeout order. Shared content is visible to all recipients of the conversation, regardless of whether they have the app containing the extension. To interact with the shared content, however, the app is required. the app store opens and prompts them to install the app. Design an intuitive extension interface. If your extension provides static content,  make sure it is easy for people to browse and select items for insertion into the conversation. if your extension provides interactive content, make sure its functionality is useful and understandable, While your extension;’s interface can support vertical scrolling, horizontal scrolling isn’t permitted, because this gesture is used to switch between extensions, People can also expand your extension and view it in full-screen mode. use this view as an opportunity to show more content at once. or to scale tour content larger for greater visibility.

Siri Strive for a voice-driven experience that does not require touching or looking at the screen. (because people don’t always look at the screen when using Siri they may interact with Siri through a headset.) Respond quickly and minimise integration. Take people directly to content, do not show intermediary screens or messages that get in the way or slow people down. Be relevant, accurate, and appropriate. you app’s respond should always be relevant to the current requires and should accurately reflect people expectations. never include content that might be considered offensive or demeaning. Provide example requests. user these phrases to teach people to easiest and most efficient way to use Siri with your app.

[designchristyyip]

Ux testing steps

1) idea to hand-drawn sketches : hand drawn sketches out the ideas and put them together in CanvasFlip or other softwares and invite internal users to test them out 

2)hand-drawn sketch to wire framing : you have the most formatted version of user interface. icons and labels are in place. It is a good idea to show it to external audience at small scale. 

  3) Wireframes to early mockups : once you have mocks in place, it;s good to start putting this in front of actual audience for first-hand experience. you can iterate and work towards the final user interface based of the user feedback on this stage.

[designchristyyip]

InVision

- Make annotated documents when necessary

- Communicate constantly and respect the engineer’s opinions

-  Don’t be shy to admit you need advice. 

- Make sure you’re in control of the execution of the final product.

- Make the engineer’s job as easy as possible

[designchristyyip]

Be more pragmatic when decision-making

You need a solid understanding of what is feasible to build within the scope of your product. 

[designchristyyip]

story teller

Story-driven design identifies use cases beforehand then designs product experiences around those scenarios.

[designchristyyip]

Prototype Time!!

Feel better when I gave up on Quartz Composer Origami, starting using Pixate for the final prototype. Update later.