Viewing entries in
Design

10 Tips for Building Wireframes

10 Tips for Building Wireframes

I have been learning to create low and high fidelity wireframes for both mobile and web devices. There are a variety of different tools you can use to create these wireframes like Illustrator, Photoshop and Sketch ( only available on Mac ). I have been using Sketch 3 to wireframe as its a simple combination of both illustrator and photoshop. 

More and more designers are using vectors for wire framing. The following tips will help you make the most of your wire framing experience. 

Wire framing is about working rapidly and iterating quickly. The aim is not to create attractive interfaces; your number one priority is to design information and experience. 

Below are 10 tips that i believe to be important when designing wire frames. 

1.  Start Sketching

Sketch them first with pencil and paper for a quick sanity check. This should take about 30 seconds and opens up the possibility of getting early feedback. This can save a lot of time and money. The feedback gained through peer review or, best of all, from some early and informal user testing (you may need to spend a little more than 30 seconds on sketches if they're for user tests). 

2. Go Monochrome

Wireframes make clear the hierarchy on a web page; they visually demonstrate the order in which users should process the available information. If you want users to process the headline before hitting the "buy now" button, the headline needs to "trump" the button by demanding more attention.

This visual hierarchy can be defined in a number of ways. We could use size to make the headline more impactful, we could use positioning (by placing it before the button). We could use colour, contrast and a range of other things, but doing so in a wireframe only makes things more confusing.

By removing colour from the equation, the visual relationship defined by position, size and (if you want to go the extra step) contrast, is much cleaner.

We're not building pretty, pixel perfect UI kits here. Stick to a limited range of greys, then use color just for labels and notes. 

3. Don't forget the goals of the page 

Keep the goals of the page in mind when designing a wireframe. Focus on driving action. Organise the information into hierarchy that serves the goal of the page. 

4. Pick Your End Point

Prior to commencement, work out who will be consuming the wireframes, how they'll consume and what what level of fidelity is required. Remember that theres a relationship between the level of fidelity and type of feedback. Will quick paper sketches suffice or will they need to be fully interactive with accurate dimensions? Keep in mind: the less precise the wireframes are, the more liberty and creativity a designer is going to take with them. On the other hand, if you think they look perfect designers may feel inhibited and merely "colour in" the wireframes, preventing the design process from really getting going. 

5. Keep the rest of the team informed

Wire frames are not just for the client. All members of the web team should provide feedback on them, buying into the process at an early stage.

syd-creative-team.jpg

6. Use common elements

When designing a set of pages, use tools that allow you to make multiple changes to all common page elements at once. Moreover, as you're creating the wireframes, look out for design patterns that repeat. Leveraging these is key to gaining efficiency and consistency. 

7. Consider the content

If your wireframe aren't sketches then be realistic about the amount of content that will be added to the page. This holds true also for number (and length) of links and navigation. If practical use accurate sized fonts, images and consider what will happen when more text then ideal is added. Nothing on the web should be etched in stone, so ask if the design will flow as required. 

8. Draw on your experience

You do not need skills in design or development. All anyone needs is experience in using web apps or websites. Of course the more experience the better but you don’t need to understand relational databases to wireframe.

9. Keep it clean

If a particular page requires two text boxes and a button then it should have just that, no more, no less.

10. Get feedback 

I have learnt not to be afraid to test your wireframes with a couple of informal user tests. Grab people from around the office and ask them to find various bits of information or explain what they think the function of the certain elements is. 

 

 

 

 

 

 

 

 

 

 

 

 

 

10 Best Practice Tips for User Onboarding to a Mobile Application.

10 Best Practice Tips for User Onboarding to a Mobile Application.

1.The Goal.

The main goal is to accommodate your user and to get them using your product, ASAP. It’s highly important to make a fantastic first impression and to then carefully familiarize your users with the product so that they come back.

 

2. Communication is key.

You don’t want to talk their ear off but you want to be as charming as possible. Simply: Tell the user what they need to know. In as few words as possible, make them like you, being as witty or delightful as you can while doing it. It is also important to make sure you type in the correct formality for your members.

 

3. Welcome them properly.

It doesn't feel great spending so much time filling out registration and membership forms to then only walk in through the door with every single staff member acting as if you don’t exist.

 

A major part of the on boarding process is making a new member feel welcome. You want to be able to thank them for taking the time to join your product instead of just sending the invite to the junk box. If you haven’t set up a welcome email, then make one. It doesn't need to be long.

 

4. Making it easy.

This is where you will lose sign ups. Life is complicated enough as it is and if you do not make your sign up simple, you will be losing customers. Take some time to figure out what you actually want to know from your customers- the bare basics.

 

5.  Save them time.

Nobody, including ourselves, like being asked to fill out questionnaires or registration forms by people in the streets. You’re in a rush, you have to go to the doctor with your headphones in.  I’ve used all the excuses in the world not to stop to be asked to fill out a questionnaire. We don’t have a lot of spare time. We value our information and don’t necessarily feel comfortable sharing a lot of information right from the start.

 

pinterest.JPG

Social log-in is a great time saver that is appreciated by a vast majority of consumers. You’re going to have some people who do not want to use this option, but you can offer a different mode for them. Pinterest is a great example of this. They have an option for a social log-in, or you can create a direct account. Do the same thing for your visitors.


The on boarding process should be warm in tone, fun and offer additional guidance if necessary. For example, if you've got a video available on how to make the most of their experience, this information should be included both in the email you send out and in their welcome  page.


6.  Creating a compelling CTA.

No matter what market you’re in, chances are you are facing some stiff competition out there. What can you do to make signing up for your customer a “must”? Take a step back and distil what it is that makes you unique into no more than 2 sentences. Your tagline should be placed in a prominent spot on your landing page.

7. Making Referrals.

2.png

The best way to make an influential person shout about your company? Start including friend referencing on your boarding process.  A fantastic example of this is Facebook. When you sign up and are getting your profile ready, you have the option of inviting friends/existing contacts.

There is nothing more influential than a customer who is totally excited about what you have to offer and wants to be the first person to share it with friends.

The added benefit of a referral goes back to your growth funnel. It takes a lot of people pouring into the funnel to keep it full so why not let your customers help you keep it full.

8. Don’t break the flow.

Designers usually strive to get the users into a state of “flow” in which a person performing an activity is fully immersed in a feeling of focus, full involvement in the process of the activity. There are many tools to help designers make this happen that can also be implemented into the design of your on boarding process.

 

One of the main requirements is to be as unobtrusive as possible. For example, don’t surprise your users with unexpected pop ups and messages. The best way to prepare the user is show them what steps are coming up and what they have left. For a fluid experience, context is important.

 

 

9. On boarding is a relationship and is ongoing.

Relationships are built on trust so don’t mislead your users and make it easy for them to trust you. Your users are new and are figuring out there way around your product. You need to nurture the relationship between yourself and them to keep the relationship going. Engage your users in a natural yet friendly way. You should spend time very early on in the on boarding process getting to know your users and what their needs are. This could be sending me them a personalized note to each individual right after the moment of email verification.10. Ease them in gently. People, including myself hate it when you visit a page or an application where it’s so busy and over complex, it makes me want to stay away. This isn't to say that you should not do something personal and fascinating.  What you don’t want to do is overwhelm the new users on their first visits to your application.There some examples of pages and apps where all the white space is full of content. Colours, images and words. It can all be a bit too much for a new user to handle. With some effort, the experience can be elegant and informative without over stimulating the user. Short tips and pop up notifications are a good way to guide new users through the appropriate steps. Be sure to show them one at a time. Tell them directly what they need to know and when they need to know it. Don’t make them remember too much as they will forget it. Instead, use reminders.Overall, on boarding new users should be a fun and creative experience to help develop your product. There are hundreds of tools out there to help you optimize your product. Experiment with different tools and features to your advantage.

 

 

Sources and Further Reading

http://www.blogtyrant.com/best-about-us-pages/

https://zapier.com/blog/user-onboarding-user-interface-inspiration/

http://www.dtelepathy.com/blog/design/ux-flows-onboarding

http://blog.piethis.com/post/84814920128/improve-onboarding-tips

http://www.hubba.com/improving-new-user-onboarding

http://www.hubba.com/improving-new-user-onboarding

http://growthdevil.com/user-onboarding-techniques-successful-growth-hacking/

 

 

Lumpy - iOS App Concept (Part 1)

The Background:

My initial, unqualified view was that there is a problem related to people's perception of the risks of some kinds of cancers, in particular skin cancer, from my own anecdotal experience. It didn't take very long to find an article reinforcing this viewpoint.

All cancers can be fatal if not detected or treated properly, but a new poll has revealed that people worry less about skin cancer because they don’t think it’s as bad or as serious.

Some 53% are less concerned about getting skin cancer than other forms of the disease and 18% think it can be easily avoided, the survey of 5,000 people for theBritish Skin Foundation found.

Almost four in 10 (38%) do not realise that skin cancer can lead to death, while 56% do not know that malignant melanoma - the most deadly form of skin cancer - can spread to other parts of the body such as the liver and brain.

Dermatological surgeon Dr Bav Shergill said: “Skin cancer kills seven people in the UK every day and rates of malignant melanoma continue to rise faster than any other type of common cancer.

”In fact, there are more cases of skin cancer diagnosed each year than any other form of cancer in the UK. However, this research shows that people are often underestimating how serious the disease can be and the lasting impact it can leave on lives.”
— http://www.huffingtonpost.co.uk/2014/03/19/people-dont-take-skin-cancer-seriously-_n_4992759.html

My second view was that I suspected that there would be a significant proportion of the population that

a) Didn't check themselves regularly for lumps, check their moles and other less-well-known risk areas for signals of problems.

b) If they did find something not quite right, the chance of them seeking professional medical advice were slim and that the rates for the population would be low.


Only around a third (36%) of people polled admitted checking their skin or moles for changes that can indicate skin cancer, while 35% say they did not know what they were looking for.

Just a quarter (25%) would get a mole checked by their GP straight away if they noticed a change, while 8% would wait for it to get noticeably worse.

More than a third (34%) were unaware that skin cancer can appear on any part of the body - including under nails and the soles of feet - while 18% were unaware that people of all skin types and colours can get skin cancer.
— http://www.huffingtonpost.co.uk/2014/03/19/people-dont-take-skin-cancer-seriously-_n_4992759.html

ASIDE: The research was from the British Skin Foundation and was only published by the HuffPo.

 

Product Hypothesis

My initial thinking was that an app could work to break down some of these barriers in a number of ways.

How would it work?

A user will register in the app and login.

The user will be able to add their friends as contacts from the list of users.

The user can capture a photo or video of the problem area.

The image is stored locally on the users device.

The user can send the image or video to a selection of their friends list as they see fit.

A friend will receive a notification that they have received a message from the user.

The friend will view the message containing a photo or video.

The viewing of the photo/video is time limited.

The friend will be invited to provide a form of simple feedback to the user "Check it" or "Look's Fine" (or something to that extent).

The image or video is removed from the Friend's inbox

If sent to multiple people, after the final friend has viewed the image, the image is destroyed on the server, unless...

The user opts in to a program for Lumpy to keep images and meta information (votes from friends), but remove the relationship between the image and the person, for the purposes of research (another post on that to come..).

How will this help? 

1. As a way to seek external advice about an area of concern, with minimal friction / commitment and maximum privacy protection.

2. Using social / peer pressure for follow up actions.

3. To learn from the images, using machine learning techniques, as a predictor for risk areas from photographic samples.

 

Designing the App

Initially, I'm going to start with primarily standard iOS7 UI components and gradually customise them and add more complex UI functionalities. Here goes....

 

Team Treehouse

Team Treehouse

A key part of my structured training, has been to learn the fundamentals of web design - encompassing HTML & CSS.  And to learn this, I've been using Treehouse.

Treehouse, a leading online education provider,  seeks to help prospective coders become great coders by providing a rich library of over 600+ videos organised into specific learning tracks, along with interactive quizzes and code challenges. Treehouse provides deep and high quality training in HTML, CSS, Javascript, User Experience, as well as Back-End development in Ruby, PHP, iPhone and Android applications.

I have found it a truly enjoyable experience learning on Treehouse; its simple, effective, and offers so much for the learner to get to grips with. 

Along the journey you get to create projects that help you to understand the process. The first thing I created was a single page website for a bakery company called "Smells like Bakin". It took you through all the coding and then they give you a quiz at the end of each little section to make sure you understand what they've been teaching. Then, after that, there's a code challenge where they ask you to code yourself what they have taught you, via the online code editor, to start creating your web page. 

Screen Shot 2014-02-28 at 13.12.51.png

So this was the first project I built through Treehouse, which covered all the basics in HTML and CSS. 

The next stage works on other basics including tables, charts, links, text, lists, objects and forms, again at the end of each of these you have to take a quiz and a code quiz to show you have grasped the fundamentals, I find it really easy to learn from this and has helped a lot in giving me some foundational knowledge of how websites are made and the challenges we face when designing and building for the web. 

The next module will be learning more advanced HTML and CSS that I will be able to add to the Project to make the website more dynamic and engaging. 

 

Reigniting an Old Flame || Fuelr

When I was 18 (I think, it was such a frickin' long time ago), I used to sit in office buildings for 12 hours straight, working site security to pay for my university fees (well, beer money). I was fascinated by the idea of offering prescribed physical activity for people with chronic conditions, and for the prevention of disease in at-risk populations. 

I had completed a module in my sports studies degree, on this very subject. The NHS had not long released the framework for quality assurance, for the prescription of exercise and exercise referral schemes.

I used to write business plan after business plan, how I would construct a company to offer such services. I would talk to GPs and practise managers. I would do cashflow forecasts and P&Ls. I would research the equipment needs, and create startup cost budgets. 

Then I did nothing about it. Until now. 14 years later.

Not only am I now working on a next-generation Social Care platform, which is all about re-enablement and self-management of conditions, but I'm also working on a health and wellness platform for tracking and improving your overall wellbeing, by improving your knowledge and behaviour through the use of smart technologies and connected devices. I am now positioned to build something that does what I wanted, only a decade ago.

But, this is not the same plan - such has been the journey and has lead me back to this point. My education, in particular over the past 4 - 5 years, has armed me with what I was missing back then.

- Technical skills and the ability to execute.

- The mental processes that force me to ship a product

- Confirmation that my passion for this space is unyielding.

- Knowledge of a global market opportunity, enabled through technology, for distribution and scaleable business models.

The original idea was nice. But it wasn't scaleable. It was a lifestyle business idea, like a hairdressers, or an activity centre owner, or a restaurant owner.

I was in San Francisco 2 years ago, when I saw the idea, realised, working and gaining traction. A US startup called Wello had pulled together nascent real time video streaming protocols, such as webRTC, and modern web application development techniques, to offer a marketplace for exercise professionals.

 

Go to the site, and you can take part in pilates, yoga, circuits, cross-training, strength training... you name it. Delivered by real experts, in real time, at any time, wherever you or they are.

Now, this really appeals to me, both conceptually and technically.

So, this thread of posts is going to follow my exploration into building a very similar service offering, with I think, some key differentiators. We'll tackle the main technical concepts, including:

  • Building a web services / API using Ruby on Rails
  • Building a native iOS application, specifically for iPad
  • Using webRTC and the different options available to make this easier
  • Creating an admin area for the business
  • Creating the web application front end views

 

 

 

New Tools | Optimizely

New Tools | Optimizely

So I have recently been introduced to Optimizely.com. Its a fantastic A/B testing site that is super simple to use. 

Optimizely makes website optimization software for companies. The Optimizely platform technology provides businesses the ability to conduct A/B testing, Multipage, and Multivariate testing allowing them to make better data-driven decisions.

 

 

It's very simple, you take your web page URL and input it into the box. Optimizely will pull through all your information from your website and bring it into a window where you can then add, edit, and change HTML, CSS and inject javascript. 

 

Its a very intuitive tool to use to create variations of experiments to try on your web page to try and increase various things such as clicks and sign ups etc. 

Screen Shot 2014-03-07 at 14.25.02.png

Once the page loads up, you get the options for changing, editing and adding HTML to the page so you can create variations of experiments to test out on the website. Once submitted you can then track how both compare to one another. 

 

As you can see from the image it is very simple to add HTML to the site where you can style new elements via CSS, in this case in our Header where I've just added a new <h2> element. The Options are endless to what you can do with Optimizely, you can create any amount on variations of your webpage to submit. 

Screen Shot 2014-03-07 at 15.03.25.png

I look forward getting to grips with Optimizely properly in the near future for various projects, as it's a very simple tool to use which could make the difference of new users signing up to our site or more people clicking links.

@steve: Tools like this are very powerful, when used correctly. Firstly, for most companies, the job of split testing design treatments, styles, messages and communication should not have to go into the development team to implement, where possible - marketeers, product owners, whoever it is responsible for optimising the site against the companies key metrics should not have a technical constraint to be able to make this part of their every day job.

The second thing is to remember, that split testing and optimising sites is just one aspect of the funnel. You need traffic first, so address this with your SEO strategy, social media, PR and other forms of organic traffic sourcing. If you’ve got even a small amount of budget, then Facebook or Google Ads targeting your market segment would be a good way to ensure your AB tests have a predictable sample set of fresh eyes to properly extract insights from your experiments.






Creating a Design Brief

Creating a Design Brief

Ben Schofield is a 23 year old adventure sports fanatic. From December 2013, Ben has started a new career in digital technology, startups and entrepreneurship. Follow this blog as Ben writes about his experiences, learning a new industry from scratch as an Apprentice to @r3trosteve

Walking into the office this morning, Steve was waiting, ready to deliver his briefing for the day. 

To begin with, I was given just a verbal set of requirements by the client, in this case, that role was played by Steve. As with any creative brief, however it is delivered, is to ensure that all requirements and assumptions are captured in writing, and signed off to ensure alignment from all parties. So I went into Microsoft Word and created a very simple design brief to have as a hard copy and for reference. 

Once complete, I was to email this to the client for sign off. The next step was to do some research on themes and existing "coming soon" pages. I used Themeforest for this as it gives you hundreds of examples of layouts & themes. I find it a fantastic way to motivate myself and to get my creative juices flowing.

Below are some examples of theme's I found to be visually effective and stood out for me, you may see a slight pattern in the themes I have chosen. 

These pages have been sourced from: www.themeforest.net

Capture rageen.PNG

This Coming soon page is strong. The colours, the image, and the simple layout of the countdown timer work so well together, there's nothing really that I can say anything negative about. 

Capture V.PNG

This is very similar to the top image. Again, very strong with the dark image set behind and the countdown timer so customers can see how many days, hours etc they have until the site is re launched. They also give the opportunity for customers to sign up with an email input, contact button and a meet us button, which gives the customer some extra options for interaction. 

 

ultimate-coming-soon-page-example.png

Again, this image isn't as dark as the others but still gives it that intense effect, it's not as transparent but does still give the customers some interaction by allowing them to enter their email so they can be alerted when the site is launched.

@steve: I’d like to see a few more examples that you feel are sub-optimal and to hear your views on why they are not best practise.

The second part of the brief response is a cost plan, which details the top level milestones of the project and task level assignments. With a time estimate for each of these, we can build an accurate budget / cost estimate for the client sign off. Here is what I have specified:

Research: 

  1.        Researching examples of coming soon and maintenance pages
  •  2 hours x £20.00= £40.00   

       2.         Critique of Examples

  •   2 hours x £20.00= £40.00

       3.         Review of best practice

  •   1 hour  x £20.00=   £20.00

       4.        Create presentation and report findings

  •  2 hours x £20.00 = £40.00                   Sub Total= £140.00

 

Wire Framing:

  1. Create prototypes of web page 
  • 2 hours x £20.00 = £40.00                      Sub Total= £40.00

Design:

  1. Create the final Design of holding page
  • 2 hours x £20.00 = £40.00                      Sub Total= £40.00

Build:

  1.  Code website and format to final finished project.
  •  4 hours x £20.00 = £80.00                  Sub  Total= £80.00                 

                                                                                                                                       

Total =  £300.00

 

The next step of the task will to be create some prototypes / wireframes so I can place the main objects in place to see how the holding page will be structured, before finally coding the page so that I successfully get what I'm trying to create.

So today, I have been creating some prototype wireframes using Fluidui, so I can visualise how I would like the Page to look when I finally come to designing and building it. I will post images below of each page and give you critique on each one. 

 

So this is the original holding page that was created, it's very simple, but not very visually effective, it has all the important information, but the way in which it is formatted I find is just plain boring. It needs bringing up to date and made more visually exciting, here is what I have created below:

 

 

This is the first effort I created, I have gone with using a very strong background image, with a dark tint over the top of it to soften the colours this allows me to add the important information onto the page without any distraction being taken away from the picture. 

 

 This is the second prototype I have built. It consists of a large background image with someone in a wheelchair expressing their freedom while at the beach looking out to sea. I then used a translucent blur over the image to soften it so that you can really focus on the important information on the page. I really like the soft colours of the beach in the background, it's not to in your face and you can still read the main writing with ease. Fonts I have chosen is quicksand as it's very easy to read and very modern. I haven't yet added the logo of the company but I quite like it without, its clean and crisp, and when the customer reads the notice they will know who it is and what to do next. 


This is the final design I have created, its pretty different to the above two as I have used a solid image without softening or blurring it. However, I have added an alert over the top of it which creates a circular fade from centre to edges which you can see from the image. The picture of the wheelchair has been formatted to the left corner and the information has been aligned to the right, I'm not too sure about this design, It look's a bit dreary and dark. and my eyes are drawn firstly to the picture then the writing, whereas I think it should be vice versa. I may go back to this design and have a shuffle around with layers and formatting the layout. 

 

So, I have just edited the last prototype (as shown above),  I have moved the writing to be aligned centre, and added a translucent layer over the background, you can still make out that its a wheelchair, it's just not so harsh on the eye. and I also inserted a rectangular tab bar and inserted the link inside of that to break up the block of writing. I fell its visually more effective. 

 

The next stage is to look over these with Steve and get some feedback. Keep an eye out for an update. 

Schoey.

 



Tools I Use: Hammer for Mac

Tools I Use: Hammer for Mac

Caution: Non-Mac Users, this is not for you - sadly. 

The guys at Riot have really helped me out over the past few months with their product Hammer for Mac

Hammer for Mac makes creating static websites, well actually, really good hearty fun. 

The Product

Download Hammer for Mac from the Apple Store and get started straight away, by creating a new project from scratch or by using one of Hammer's small collection of project templates.

Read the full Hammer documentation (they're pretty short and easy to digest), and I'll just give you my favourite bits of the product, which I've come to rely on. 

 

Screen Shot 2013-09-17 at 16.52.29.png

Includes - I now take great delight in segmenting my HTML into nice and tidy snippets via the HFM @include feature, without needing to run MAMP and use PHP as I used to.

 

SASS and Coffeescript auto compiler - The HFM build process automatically processes my .scss and .coffee files into .css and .js. If you're not familiar with either of these technologies, you should dig in. Coffeescript use is still a bit contentious, but SASS is a no-brainer. 

 

Screen Shot 2013-09-17 at 16.52.36.png

Javascript & Stylesheet includes - Clever paths that will rummage around in your file directory and automatically find and load your javascript and css files regardless of where you put them. A huge time saver. 

Screen Shot 2013-09-17 at 16.52.24.png

Clever Paths - Image files and other such assets are now always (super)relative, regardless of which folder you put them in or if you move them. HFM will find those pesky assets and load 'em into the page in a snip.

Screen Shot 2013-09-17 at 16.52.17.png

Placeholder Images - when you're desperate to eat lunch and you want to crack out a template, the placeholder shortcut will quickly jazz up your page content with correctly sized image placeholders. You'll be ordering a beer and burger 30 minutes before anyone else with this baby.

Screen Shot 2013-09-17 at 17.04.25.png

HFM is now on version 1.6 and the most recent updates to the software seem to have really focussed on performance - general processing speed and caching in particular. 

There's a few features within the software which I've really also come to love within the workflow.

The optimize toggle switch, which on request will compress and minify your code. 

 The Export archive link - just because it's easy and simple.

and most significantly for rapid publishing and sharing of work in progress, is the Publish Build function, which uploads your site to HFM's AWS servers with a short url to share with teammates, colleagues and clients. Hammr provides their own wrapper to the page for navigation and access to core site files, which is nice.

 

I met up with the guys from Riot around 18 months ago, when HFM was still in closed BETA. 

I was really impressed with Elliot and the team's focus on this product and how they've taken the "Mac-centric" approach to product development. I appreciate their style and business model and I really hope that HFM continues to grow and become adopted by front end web developers and designers around the world. 

Nutribu, Feedo and the Launch Festival

"What's that thing called where you take picture with your phone and then convert it to data? That would be cool, huh?".

Around 4 weeks ago, that was the brief conversation I had with one of my long term clients, Sergio Mottola from Ideando. It was in reference to what became a very exciting, very intensive project build that involved a number of new technologies, techniques and things I'd not done before - mixed in with some things that we are already very well versed in.

A Brief Recap:

2 years ago, my team was hired to build a fully custom web-based ePOS till system for a flagship restaurant in Soho, London. For a more information about this particular project, see this link. Owning and running an operational store was my clients way of realising his vision for improving the quality and cost of food, whilst setting a new standard in nutritional information transparency.

The software we built was the result of being able to deliver on Foodsecret's requirements for a full integrated till system that would be able to act as the interactive touchpoint for staff and customers, operational administrative system for stock management, reporting, staff incentives and a marketing / promotional engine, with integral loyalty schemes and discounts built in. To complete the cycle, this was also integrated with an optional public e-commerce platform - for the store to sell direct to customers outside of their four walls. 

As it turned out, they came to realise that it didn't take making and selling food, running a kitchen, paying rent on an expensive prime-location retail outlet to realise the vision, but instead to take the smarts of their nutritional algorithm out to the wider industry.

The ePOS system was rebranded as NutryPOS, and is set to be made available to restaurants and fast food premises that want a fully baked, web-based till, administration and e-commerce platform with the ability to deliver transparency of nutritional information to their customers  - an increasingly conscientious consumer who cares about what is going into their bodies and a society that is increasingly demanding to have clear, honest transparency into the supply chain at the point of sale.

Nutribu is Born

NUTRIBU api.png

So, it was time for a strategic review, the result of which was to understand the key value proposition that made most sense for realising Sergio's vision.

The key was to make sense of the complex, difficult to understand and not very fun world of nutritional data and make it readily & easily available to the industry, through application developers, own-built products and partnerships in order to create a common language around nutrition that is social, competitive and fun.

Nutribu is an API that makes complex and fragmented nutritional information available to developers, in order to build useful and intriguing applications with nutrition at their core.

Just like we did with NutryPOS.

nutribu-active-docs.png

So building on that work, we broke out the nutritional components, raw database, patented algorithm and logic into a standalone, centralised database with an interface for application developers to register, gain access to various methods to use the data, handle developer access, commercial options, analytics and performance metrics.

3rd Party API Proxy or Build Your Own

One early decision we had to make, was whether to reduce the amount of investment in API software development required to have an operational platform, by paying for service such as those offered by popular 3rd party API proxy providers like Mashery or Apigee.

Given the tight project parameters (budget and timeline - more on that in a minute), but with an eye on the future, we were looking for a solution that would offer a good mix of low barrier to entry, in particular, by way of small or no startup costs. Mashery doesn't make pricing public, but after a couple of calls to Boston and San Francisco, it was clear that although their service is probably the most slick and with some top clients on their roster, it wasn't going to be an easy or quick process to negotiate a suitably low starting agreement.

Apigee, however, was free to get started and that was attractive, coupled with the fact they are a top provider once again, with some high profile clients. I'd met and heard Apigee Vice President Strategy, Sam Ramji talk at the Power of One conference back in 2011 and was interested in their service. But one issue that stuck in my mind, was that whilst their pricing tariff is simple - base level FREE, paid upgrade $9000 per month. That's quite a hefty jump and I wash't convinced that was right for us.

After a fairly in-depth research and review, I was struck by a number of posts on Quora by staff at another API provider, 3Scale, based in Barcelona. Their answers were particularly interesting, in that they came across as genuinely helpful, impartial and seemed to offer the type of solution we were looking for:

  • Free to get started
  • Provision of services we needed, such as developer token management, analytics etc. but;
  • Allowed us to keep control and ownership of the proxy and traffic to the API - reducing overhead and latency (I suppose) for the service.
  • More granular pricing tariffs gave me a clear roadmap of costs versus traction of the API over time.

So, we set about building the API. And quickly. Clock ticking 'n-all.

As I mentioned, timing was critical as we decided that the new brand and product would be great to promote and relaunch at the Launch Festival in San Francisco - just 3 weeks later!

But alas, an API is not really very interesting from a demonstration perspective in it's own right. Sure, there's some nice tech in the background, but no-one knows about or understands that (well, outside of the developer community). So what would make a great demo for an event like this? Well, we could present NutryPOS of course, a fantastic example of how Nutribu can be used to add value to a market and product that needs to put transparency at his heart.

But still, we weren't convinced that this would make the best demo. It is after all, a multi-faceted product with lots of components and sub-components specific to the operational requirements of running a restaurant. Not a consumer oriented technology event. We needed something else, we needed something tight, clean, intriguing and an innovative use of Nutribu API.

Feedo

So, as if 3 weeks wasn't tight enough to build an API from scratch (with everything that comes with doing that), we deciding to build a native iOS application, called Feedo.

Feedo is a an app for capturing a recipe with your mobile device, analysing the ingredients list and returning a personalised nutritional calculation to the user.

This introduced some very interesting challenges - we needed an OCR (Optical Character Recognition) engine (along with some ways reduce the inherent errors that exist within these technologies). We needed an interface for isolating and selecting the ingredients from the image and we needed a working API to process and validate the ingredients, generate products and return our Nutribu score.

I'll follow this post up later with more on how we did that, and some of the more specific product and technical challenges we faced - but needless to say, we're very happy with the result.

So, as I write this, I'm sat on the plane following a pretty amazing team performance to design and build the new database infrastructure, identify and produce the necessary API methods, API portal, branding, product website, event launch materials. Well done team.

As well as my technical team doing a blinding job, a big mention to our designer, Alfredo Violante, who worked on the Nutribu and Feedo brands, the website and iOS designs in a very very short space of time. I think you'll agree it looks fab. You should take a look at his work, he's the don. Thanks Alfredo.

Double Digital - Brand Refresh

In some spare moments over Christmas (there really weren't that many), I took the opportunity to give my "freelance services / boutique consultancy" website a bit of a facelift. First thing was I've moved to a new URL - www.doubledigital.co, from the previous domain of www.doubledigg.com.

home.jpg

It's weird, because I actually have very little to say about name itself - other than Doubledigg was always short for Double Digital.

When I recall back a few years, it started as an attempt to build a kind of freelancers platform, similar to elance or freelancer, but using the globally sourced developers, designers, seo-ers, administrators and researchers that I had personally vetted - worked with, trained, developed, learned from and gave experience to - and make them available to a network of my own.

I didn't really persevere with it, because I preferred to work closely with my global remote-based teams rather than just stick profiles on a system and let people dive in and help themselves. It's very difficult to make remote working work well - there's lots of horror stories which I'm sure you've heard before and have scared you off of outsourcing to places like India, Russia, China, the Philippines, Vietnam, Argentina... well let me tell you that it's because people don't understand the process, the mindset, the compromise.

Truth be told, the other reasons I went for the name Doubledigg at the time were kind of funny. First, Digg.com (remember that?) was kind of a big deal then and I though the similarity in the name could piggy back some sort of brand association, misguided searches, that sort of thing. 

Also, my friends at the time had just started out in business on their own - a retail marketing agency (and I must say, they've done brilliantly since - if you are responsible for creating stores with wow factor, you should give them a call), called Double Europe. I figured, if I built something remotely interesting, they may want to buy it or bolt it on to their business some day (still waiting for that to happen).

Anyway, when I started consulting and doing work for clients, building websites, SEO, strategy, project management, I just used that name as the website was already setup, I had built a bit of a Twitter following and Facebook Fan page like-count, so just stuck with it. 

Is it the best name in the world? No, sadly it's not.

Do I care? Not really. I have thought about rebranding to something really cool like my friend @fuel-digital or the guys @riothq, but what the hell. What about some of these names? Could I name it after someone who screwed me over like the guys at THE BANK did? or what about HIGH HEELS & BANANAS? Or hang on, what if I was to name my office the Embassy of the Republic of Moosylvania?

But, what is cool?

Well, I decided to make a statement. I've spent too long on the train back and forward to offices in London, not really existing here or there. Well, I decided to sing loud and proud, I live and work in a stunningly beautiful part of the world which I take for granted. Super talented photographer and friend Jake Moore has given me the ability to not forget that fact, by providing some glorious images of the surrounding area where I get to come home to, from wherever I've been travelling.

portfolio.jpg

There's a pretty cool portfolio section, which I'll flesh out and add some more details too the case studies in there shortly (just images for now), but there's some more in depth write ups on this site in the Projects & Portfolio sections in the meantime.

Anyhoo, that's done. Back to saving the world (or at least the economy) from Information Overwhelm!!!

Working the Brain Illustrations

These were a couple of illustrations that I did, which unfortunately, never got to see the light of day as they were intended as kind of tongue-in-cheek graphical treatment  as part of a design update to the MySpareBrain platform. It was intended to soften the technical side of what is quite a complex product to explain. Unfortunately, they never saw the light of day, but nonetheless, I'll post them here so they at least get their 5 minutes...

An early sketch of the Brain Lab scene

Early sketch of the Brain Conveyor Scene

First Brain Conveyor concept. Some felt finely slicing the grey matter was a bit gross. I liked it... ;)

The alternative? Why shrinking brains of course!

And here we are, the Mad Scientists at work. That was my last 12 months, I even have the lab coat!