Improving App Design Review, Ensuring Design is Ready for Development

iphone-6-psds

Well-coordinated work across teams – let’s say design and development – is a huge deal when it comes to delivering a good product on time! So, part of my job as a project manager is making sure that the assets passed from design into development are ready for implementation.

At the very heart of the process, design review is nothing complex. You should know human interface guidelines, platform restrictions, requirements and a little bit of common sense =)

Here are the common issues I often face, when reviewing design:

  • Design does not incorporate all the details on features planned;
  • Navigation controls are used inappropriately from the native experience point of view; or simply not intuitive;
  • Assets are missing during delivery phase;
  • Mockup does not look good, when populated with real user data; mockup has not been stress-tested on extreme cases.

As our teams worked together, we optimized our process to minimize adverse effects on the points above.

1. Kick-off with an interview.

When the team is excited – it shines in willingness to collaborate on building a valuable product. Once an applicant to a designer position is excited – she starts to ask questions and share her ideas. I try to understand what the candidate thinks about the project, her motivation, her past projects experience: was there an established flow when this designer had been working on a product, how did the teams collaborate.

Usually, our projects involve UX and UI designer. An iPhone UX expert knows navigation controls, their proper use, typical user flows, analytics and split testing, how to structure information elegantly and effectively. She creates prototypes and mockups for the upcoming app. UI designer provides GUI for a mock up (colors, iconsets, sizes for different resolutions).

2. Help designer to understand the product, build solid requirements

There is a timeframe for a designer to get to know the product. Have materials prepared, older designs structured (for the retrospective view), corner cases described.

The whole team was pleasantly surprised when our new UX designer asked for requirements documents and stayed knee-deep in them for a couple of days. He came up with rational and neat optimization.

We describe global functional requirements in Confluence, with obstacles, corner cases and retrospectives added to the main article. This gives a designer (and practically any new person in the team) the understanding which issues and mistakes we faced, what are the bottlenecks of particular solutions, and why we currently have an effective solution if we already do.

We describe platform-specific flows and requirements in User Stories, which also work as checklists for designers.

The one thing I want to point at again, are the corner cases. They usually fall out of scope and do not apply to typical user behavior, but may result in unpleasant experience. We brief a designer on corner cases before he starts prototyping.

3. Create checklists for mockups

There is a quite popular problem companies face: real user data doesn’t play nicely with the mockup. The design may look gorgeous and trendy and flat, but once you start populating it with longer names, venues, low quality photos, vivid photos that make overlayed text unreadable – the whole greatness falls apart. What to do here?

  • Reflect min and max length for the fields in the requirements. This way designer knows what to expect from the real data.
  • Prepare corner case text examples, to check how well the mockup stands against them. For example, use location named ‘Venkata Narasimha Raju vari Bahadur’ instead of ‘Union Station’. Show how long text should be cut, if needed.
  • Keep in mind that if you support multiple languages, some buttons may require more space for a label to fit.
  • Check for active / inactive states for buttons, segments, toolbars.
  • Alerts and message boxes for whatever reason can be (connection loss, lack of space, unsaved data, …)
  • Text overlays. If text overlays a picture, be sure that text is still readable even on a bright vivid photograph.

4. Wording for mockups

Wording mistakes happen quite often. You may have ‘Done’ button in current application, and ‘Save’ in an updated mockup, or even different labels for the same action in different sections. I make sure wording is correct and synced across designs, before dev team starts implementing it. Easiest path is to have all metaphors documented inside a task-tracking or wiki-system, so that designer knows how to name each element properly. This saves a lot of time and nerve for everyone involved.

5. Standardize assets delivery

In order to be sure we got all the assets we need we created a small guide on design delivery in a form of simple folder structure.

#project_folder
    - #project_iOS 
        - #comments_screen
            - comments.psd
            - #_icons
                - icon.png (for 1x)
                - icon_@2x.png (for retina)
                - icon_@3x.png (for retina HD)
                -

This hierarchy serves to ensure we have needed states and sizes for icons, and a structure that will confuse noone.

Overall, I hope that this brief article helps you optimise your process and get design delivered faster =)

Special thanks to Ksenia, Rishat, Igor for reviews =)

How to accurately estimate external projects. Part 1 – Delays caused by communication

accurate_1

This is a first article from “How to accurately estimate incoming projects” series, aimed to help you see the possible future pitfalls. This includes both outsourcing projects and the ones where different teams around the world are involved.IT industry is dynamic. Companies change APIs, IDEs, upgrade hosting servers software, raise new compatibility issues. Of course improvements are welcome, but there is no way you will have a perfect product once and forever – it needs to be re-iterated. Don’t forget about hundreds of different environments that the system should work on. And people.

1. Client Interaction Time

It’s not a big deal when we are talking about local business (and even in such close distance email response delay time could be significant and expensive), but when you’re dealing with international clients and partners, this becomes a more significant issue.

There are several simple rules that are wise to follow in order to keep up with the deadlines:

  • Don’t underestimate time needed for interaction;
  • Client won’t run and read your email instantly, he has work to do;
  • Response time could vary, but prepare for the worst.

Let’s look at an example: you are building an ecommerce website. The catalogues structure is a bit tricky so you need to clarify where a product recommendation slider leads.

  1. You send the request;
  2. Client reads it in 2 hours;
  3. Gets back to you with some questions in order provide proper answer;
  4. When you answer him – you are already off from work;
  5. You read the final response the next day only.

Of course it’s not what may happen every time, but you need to take such issues into account before they happen. Here is what could cause “lags” on the client side as well:

  • Clarification from a third party (could be a hosting provider, lawyers, content providers, etc);
  • Interaction between departments;
  • Approval of department manager and other bureaucratic procedures.

In addition to that, there’s been quite a few times, when our clients from other countries needed to clarify detailed info with a a third-party with no people on that side speaking English at all.
The main point of this section is to make you understand how heavily client interaction lag can affect the entire project. It’s worth mentioning because these things rather frequently fall out of scope of attention.

How to avoid possible adverse effects? A checklist or a roadmap will be helpful to manage handling tasks in advance. In Codebranch, we prepare a project roadmap with Freeze dates, which are the last dates that a certain part of team-client interaction is due. For instance, there are:

  • Design Freeze Date – this is when the client takes a final approval and signoff to the proposed design, all the amendments and improvements to the design have to go before that date.
  • Functionality Freeze Date – the milestone by which the final application functionality should be agreed upon.
  • Content Delivery Date – this is when the content provided by client is due, so the client would know the timing in advance and have enough time to gather the content.
  • Hosting or CDN accounts purchase dates, domain name registration deadline – when, and no later, the accounts need to be available to the development team in order to set the environment up and deploy on time.

These dates are elaborated together with the client, basing on the delivery timelines that the client suggests, and adjusted accoring to the internal development milestones. This approach helps both the team and the client meet the responsibilities in working on a web project, and contributes into building a good working relationship.

no title

Nothing new this 2 weeks. Well, in fact tons of new stuff this 2 weeks, but no time to blog at all. We are experiencing extreme-2-week-game-development and are almost ready to release “how not to screw up big projects” book (this is a joke, everything’s under control).

Meanwhile, we posted some stuff at codebranch blog, and want to say “HI” to our folks at LeWeb in Paris this week 😉

Here are the previews for two next posts:

How to Accurately Estimate Projects for Outsourcing? Part I – Delays Caused by Communication

In addition to that, there’s been quite a few times, when our clients from other countries needed to clarify detailed info with a a third-party with no people on that side speaking English at all.
The main point of this section is to make you understand how heavily client interaction lag can affect the entire project. It’s worth mentioning because these things rather frequently fall out of scope of attention.

How to avoid possible adverse effects? A checklist or a roadmap will be helpful to manage handling tasks in advance. In Codebranch, we prepare a project roadmap with Freeze dates, which are the last dates that a certain part of team-client interaction is due

How to accurately estimate outsourcing projects. Part II: Accessing Web Services

1. Compatibility and environment issues.

The most common problem though is the environment. Whether it’s an API, a plugin to work with it, it may require additional adjustments to your server. Documentation should be carefully revised so that there are no flops when integrating the solution into your own website or service.

2. Sometimes a client wants solution for a service, that has no public API. i.e. Pinterest has no public API and provides a gateway just for iOS.

Developers start to use workarounds, gather together to find solutions. And so – 3rd party APIs are born. Returning to Pinterest, as a great example, apps that use 3rd party API access Pinterest via iOS gateway, identifying themselves as iPhone. Of course, that won’t always work as expected, even minor changes in Pinterest API now breaks almost every single app that uses 3rd party API.

MS to challenge interactive web with kinect controlling JS library

kinectedbrowser

Latest post by LongZheng reveals MS Research’s plans to ship JS library for kinect-enabled website. We already mentioned this in our twitter, but today’s little article will take a look at opportunities that this fact brings to the market.

Kinect has been a revolutionary addition for XBOX and sold millions of copies first year, becoming the fastest selling product in Microsoft’s history. Although, I didn’t like the release name (codename: “Project Natal” was much smoother to our ears), we all now take it for granted. There are still no hardcore games for Kinect, titles like Sesame street (a must-notice title for parents out there) and Kinect adventures are great for kids so they sell well, while Dance Central series popularize this device as an entertainment.

It is said, that Microsoft gets in a right vibe on the third time. Kinect sold more than 18 million devices in 1.5 years, but the development for 3rd parties has been limited due to lack of experience. However, consumers love and use Kinect voice more than Kinect-gestured controls, simply because of the accuracy and easiness. “XBOX Pause/Play/Search” words are much more comfortable, than trying to swipe left and right with your hands in attempt to make a menu scroll.

Kinect for Windows Release and the Beginning of Kinect Hacks

In February 2012, Microsoft released Kinect for Windows, with improved sensors and SDK. And while many people were skeptic about the reception, partially because of the higher price, researchers and developers loved that they wouldn’t need xbox to play around with Kinect anymore. Thus, PC/MAC-based experiments started to crowd coding4fun section at channel9.

We remember first example Kinect-enabled virtual fitting room in Topshop, Moscow. That was really cool. Accuracy was average, but the customers loved to see if the dress fits their style without trying it on. And of course – social network sharing.

FakeCake Dressing Room

Kinect SDK made it pretty easy to track body parts moving.

There are 20 parts that kinect can track:

  • left foot, right foot
  • left ankle. right ankle
  • left knee, right knee
  • left hip, right hip
  • hip center
  • spine
  • shoulder center
  • left shoulder, right shoulder
  • left elbow, right elbow
  • left wrist, right wrist
  • left hand, right hand
  • head

It’s an initiative of MS Research, to ship the library. No further details revealed, since it’s only a peek.

Since its first appearance as a companion for Augmented Reality (AR), Kinect is quickly growing as a must for various digital media events. Mostly these are digital kiosks for interactive advertising. There are tons of articles and case studies written about how Kinect is used in advertising, but the post mentioned above expands the development part, merging kinect-enabled web and application development together.

Opportunity to Jump In for Web Developers

Today’s approach for developing Kinect applications is the same as any other involving sensors: you take the SDK, create an app, connect the device and test it, get the data you need. JavaScript library for Kinect-enabled websites could help merging the application development, limiting the functionality but making the solution more universal. Just imagine: you create a website with an interactive kinect-enabled module. Of course, talking about Microsoft’s piece of technology, we get a platform limitation: feature is IE only. Features are delivered via ActiveX, and that means no support for other browsers. Good news: IE9 and 10 are much better than the older versions and are capable of rendering great websites (almost) correctly.

This website would provide the same content both for common users, as well as for the interactive user group. No need to develop a special app, just integrate your module into the website and place a giant display onto the windows: engage your users via interaction and create unified experience both on interactive and common web browsing sides.

This in fact could engage many web developers to experiment with the controller and to position the Web as a great place for Kinect Hacks and Tricks. We will definitely follow the story.

Read this:

Microsoft Research to ship Kinected Browser JavaScript library for Kinect-enabled websites
Interactive Tabletops and Surfaces Conference
Kinect Controlled SwimBrowser
Microsoft Research, Kinected Browser
Kinected Browser: Depth Camera Interaction for the Web 

AWESOME! Microsoft’s Speech Recognition and Instant Same Tonal Voice Translation

Having worked in the sound recognition field in mobile space (bird sounds) I know about this hard process a bit. Mostly I was using predefined algorithms and just implemented them in c#, but my poor knowledge and puny brain would never do such amazing stuff!

Natural UI comes to life! You can always see that some awesome MS Research powered speech recognition displayed on MS keynotes almost in real-time, but yesterday’s article on The Next Web highlighted the new addition to that wonderful feature: same voice tone speech translation in Mandarin! Check this out!

Source: Microsoft Demos Amazing English to Mandarin Translation, Allowing for Real-Time Audible Translations

Apple moves to ARM? No way in at least the next 4 years!

7 years ago Apple announced that they would be moving from PowerPCs to Intel’s x86 CPUs in two years because they had been producing less heat and running much faster (PowerPCs were built by IBM. The 8-core version of this chip also powers PlayStation 3 ). This was a very dangerous step, which definitely brought massive boost in performance for Apple products, but caused additional emulation layer to run the legacy applications.

Apple previously made a transition from Motorola’s 68K to PowerPC architecture, and included Motorola 68K emulator to run legacy apps. The same happened when Apple started using Intel chips, instead of IBMs in 2005 – the additional layer to run the older code was called Rosetta. Will it really be that painful, if Apple would change the architecture one more time?

This week brought us not only MS Office for Android and iOS confirmation, but also an article by Bloomberg, whose informer claims that Apple is thinking about moving from Intel chips to ARM ones, particulartly A6X to their Mac product line. Why is this really important?

This could be the biggest shift in Mac history.

Literally. The Macs now are the second biggest ecosystem and Intel chips helped Apple with the desktop expansion. Apple’s marketshare in PC reached 7.59%, and more than 12 million Macs were sold in 2011. That is a huge number for a single OEM with vertical infrastructure (it’s when a company maintains full-cycle production for its products: both develops software and designs, as well as produces the hardware). iOS domination in mobile space significantly helped in gaining worldwide market share. Apple took a clever way of delivering incremental updates to simplify and improve the OS. Even more: the design unification across all Apple’s devices made it very compelling to start using a Mac, if you already had an iPhone or iPad.

Source: StatCounter Global Stats – Operating System Market Share

Backwards compatibility (running current OS X apps) and mobile development

Some might say that Apple is not a freshman in architecture shifts, but moving from x86 can result in a big performance drop.

  • ARM processors are not as advanced as x86 (Intel core architecture)
  • ARM only plans to start 64 bit versions chips production in 2014 with AMD (64 bit version will deliver huge boost in performance for the same power consumption)
  • Good news: ARM already supports out-of-order execution, unlike Intel’s Atom processors (Next Gen atoms confirmed to support this feature)

There is a good chance, that Apple is already testing some prototypes deep inside its labs, but it’s a huge work on optimization to be performed, and the OS could become fragmented. As it is with Windows 8 on x86 and limited Windows RT on ARM.

ARM-supported version of OS X should include an emulator-cushion, same as Rosetta, Apple provided for PowerPC => x86 transition. AllthingsDigital states that there is an example: Russian Company successfully runs x86 software on ARM.

Such scenarios could happen: development-wise it’s Cocoa for the UI. And the app that calls windows will still do that on ARM version. Apple has developed an awesome IDE that simplifies the process of development between OS X and iOS. But running x86 code on ARM with the emulator could help if we’re talking about the simple applications that call the standard UI libraries and common stuff like that.

High-performance applications

But let’s turn to the elefant in the room: what will happen with the low-level applications? You can’t run Photoshop in emulator. Neither 3d Max, Office and many more. Meanwhile, these apps are crucial when it comes to the professionals working on Macs (mainly Macbook Pro / iMac). That’s why we are not that clear about porting a full-featured OS X to ARM. These apps will be needed to be fully re-written for the new OS.

Layers, OS X

One might argue that developers and customers still would buy new Macs so that they would create a market. And if a developer wouldn’t want to re-write an app, then money-hungry competitors would occupy the sunny spot and get all the money. The obvious issue is whether you could per se run a full 3D rendering suite on ARM. Right now there’s no way you could do that. We’re talking about something like 3DMax, Photoshop in particular.

We’d also like to point out high-performance games. We’re not talking about the hits like Shadowgun and Infinity Blade. Even if Infinity Blade is built on Unreal Engine, that doesn’t mean that it uses the fully featured one like on PC / XBOX. It’s a special ARM version, because ARM architecture is not capable of rendering complex shadows / advanced lightening / fully featured particles.

Macs just started to gain some traction in gaming space, you can see huge titles across Mac App Store, but ARM move will kill the gaming culture in Mac space. Same applies to Steam.

And one last thing: no Parallels for ARM.

Some more quick points

IDE & development ecosystem unification:

  • iOS developers gallore. We can bet – a lot of developers will emerge from iOS and help OS X in gaining apps
  • Desktop developers will get even easier porting. iOS userbase is much better than OS X’s. This could trigger even more great apps of iOS and further iOS growth (possible solution to compete with Android in the future)

iMac / MacBook for Work and Macbook Air differentiation

  • Macbook Air is the best selling Apple PC. Most people use it as a device to access the web, mail, office. Good candidate to include an ARM chip. As a result: much lighter and thinner gorgeous looking laptop, with no vents at all
  • MacBook Pro and iMac could be left for professional use (music / video editing / rendering / photos) with x86 chips
  • Possible creation of a whole new line of Macbooks for content consumption and text editing as an alternative to the MacBook Air

ARM is dominating in mobile world with almost no room left for the competitors. The latest collaboration with Google and Samsung is the new Chromebook, an affordable and very limited in functionality laptop for just $249. No wonder ARM wants to bite a piece of Intel’s market share, especially datacenters and servers. ARM CEO is confident in his company and promises even more amazing computing power to come in the nearest future.

These are the scenarios we can think of, when discussing such rumors. This in fact could be a mass hit: Microsoft was able to lower the power consumption and reach 10-hour battery life with x86 tablets. We are really living in a very interesting world.

Read this:

“Apple Said to Be Exploring Switch From Intel for Mac”, Bloomberg Original Article

Apple Looking to Drop Intel Chips From Mac Computers [REPORT], Mashable

Will Apple Switch the Mac to ARM? Why the Rumors Do — And Don’t — Ring True, AllthingsDigital

ARM Chief: It’s a bit early to write Intel’s obituary, AllthingsDigital

Windows 8 Slates. Moronic Pricing in Russia

Hi everyone, as always I’d like to rant on the following: greediness and insanity of Russian retailers. The latest issue of  Svyaznoy’s catalogue is a great example of utterly insane management and completely moronic pricing amongst almost any hardware company here.

I was pleased by 6 tablets announced to be sold by the retailer this month, all 6 from Sammy, Asus and Acer. I was happy to see my beloved low-cost Acer Iconia W510 ($499 in US) (previews (1) and (2))! But here it’s priced as some crazy-ass magnesium-made premium ultra-fucking-machine. And that’s for Clover Trail! No way!

 Asus Vivo Tab RT (WinRT)

Hi there, Vivo Tab RT =) Long time to see! Had a pretty good review both at the Verge and Engadget. Got a sweet price for the US as well ($499+). Russian Retail Price, anyone? $1130 And that’s for the RT tab! Are you out of your mind? Really? Ok, moving on.

 

Continue reading