Life at CalceyUX

UX Design @ Calcey

Here at Calcey, UX plays a very important role in all that we do. Given that a lot of our work is aimed at everyday and not power users, the very success of the projects we undertake sometimes hinges on getting UX right. In this post, our UX Lead Ranga Weerasinghe walks us through how we approach this intricate, complex, yet beautiful process.

Q: Can you tell us something about yourself?

Well, I’ve been working at Calcey for the last four years. In that time, I have worked both as a UX Lead and also as a front-end developer, helping our development teams every once in a while. I am aware that it’s not a very common arrangement in the industry, but I happen to have both an artistic and programming background. That allows me to juggle these two roles, and I’m quite thankful for it.

 

Here’s Ranga conducting a UX workshop at our office

Q: How do you and your team approach the UX design process?

The first and most important rule we follow is that there is no cookie cutter approach. Of course, there are industry standard best practices and we follow them. But we also recognise that in a fast-changing field such as ours, where trends come and go, there can be no one-size-fits-all solution. Sometimes, processes ought to be tweaked to suit the client. This flexibility is something we at Calcey are proud of.

Once a client signs up with us, we hold a kickoff meeting of sorts. We use this meeting as a platform to get everyone to reach a common understanding about what the objective of the project is going to be, and what everyone’s responsibilities are.

With that out of the way, the UX team gets down to business.

Q: How so?

We hold a few days of workshops with the client to understand their product and their users. We will try to map the user’s journey across the product/interface. In certain cases, we will try to come up with what we call ‘User Personas’ for different types of users. What this helps us do is build a story around the user to understand where they’re coming from, what their mindset is, what they’re looking to achieve (by using the product), and what’s preventing them from enjoying a seamless user experience. This helps us identify how a user would interact with the interface, and decide on the design decisions which we ought to take.

We will then enter what we call the ‘First Impressions’ stage. During this stage, the onus falls on us to use the insights gathered during the workshops and create simple wireframes of what we believe the UI needs to look like.

Drawing on paper can be a good way of thinking about design

Next, we will move on to the ‘Lo-Fi Prototype’ stage which stands for ‘Low-Fidelity prototype’. The mock-ups which will be presented to the client at this stage would be improved and clickable versions of the bare-bones wireframes from the previous stage. Of course, depending on the feedback from the client (coupled with initial user testing) and the extent to which any changes are made, there can also be instances where the Lo-Fi prototypes look nothing like the wireframes they were based on, but that’s okay. That’s par for the course, and we wouldn’t have it any other way.

If the client is okay with the Lo-Fi prototypes, we will proceed to create a High-Fidelity version (or Hi-Fi prototype, as we call it). A Hi-Fi prototype will usually be very detailed, and will end up looking exactly like the final product. Hi-Fi prototypes are very good subjects for user testing purposes, and we’ve had instances where users thought the mock-up was actually a real app.

Not to brag or anything, but we’re that good.

Q: Are there any principles which you try to abide by while designing?

Not many really, but there are two principles which we try to follow at all times. One is to think ahead. I think it was Wayne Gretzky who said that he tries to skate to not where the puck is, but to where it is going to be. Similarly, we try to think about the usability and relevance of our UX two years down the line. After all, from the client’s perspective, whatever they’re paying us to do is an investment in the future of their business, and investments ought to have a good payback period. That is why we try to build tools which are useful today, but will also remain relevant tomorrow.

The second principle is research. The field of UX changes very fast, and trends come and go. Just look at how far we have come in terms of visual designs for apps. Not too long ago, skeuomorphic design was sweeping the world, only to be replaced by flat design inspired Microsoft’s Metro UI design language. Then, the pendulum swung the other way when Google introduced the material design philosophy which combined skeuomorphism with flat design. Tomorrow, it might be something else. For example, when we try to visualise information generated by a machine learning service, we need to make sure that when the end-user sees it, they are able to make sense of the information, perhaps through intuitive visual cues. As UX specialists, it is up to us to stay on top of these trends and separate the signal from the noise. It’s a skill that is built up over time, and keeping up with global trends and design philosophies through research is extremely important.

Ranga sometimes likes to dress up as Morpheus, a look which fits him perfectly

Q: Any advice for a budding UX specialist looking to join Calcey?

Stay curious, and be patient. UX is something you get better at over time. Rome wasn’t built in a day, neither are UX specialists.

Oh, and send us your CV and portfolio.

Cover image credits: Photo by Mika Novo on Unsplash
InterviewsStartupsTrendsUX

How To Grow Your Digital Agency Without Hiring Anyone

Ten years ago the tech industry was aggressive. Everyone wanted to own everything. If your company was involved in a project, that was it: it was your project. Your client, your pitch, your tech, your invoice, your fee.
Now, we are slowly starting to see that change.
For starters, tech has got so big. Not many agencies can truthfully say they can excel at everything. Yes, they can deliver exceptional website design, but can they build complex backend functionality? If one organisation’s tour-du-force is UX design, can their development skills really be that good too?
The smart agencies realise this. They know it’s better to really focus on their core offering. And then look for collaborating partners.
Or wait until they find you…

Meeting Of Minds
In 2017 a new London-based foodie startup wins seed capital. For their UX design they engaged locally renowned Profound. The startup’s CEO also recruits Calcey Technologies from Colombo, Sri Lanka, who have a great reputation for building platforms for Silicon Valley startups. He invites the South Asian techies over to the Profound’s Basingstoke office for a month of workshops.
Ten years ago this kind of organised chaos was unheard of.
But that’s when the magic happened.
“What surprised us most was how in sync we all were”, Matt Quinn, CTO of Profound, told me over a lunchtime lemonade during last week’s heatwave.
“Asela [Calcey’s Director of Product Engineering] was challenging the same assumptions that I was. I could see that the guys from Sri Lanka thought exactly same as I did!”
Clearly, being a tech enthusiast has a distinctly homogenising effect on the brain.

Calcey’s team with a client at Profound’s office in Basingstoke, UK. Photo credits: Matt Quinn (CTO, Profound)

The Breadth Of Tech
Profound are a specialised niche consultancy; the merging of one creative agency and another tech consultancy. Founding Director, Tim McMillen, has pedigree in the early 2000’s enterprise omni channel e-commerce revolution. To this day, Profound’s sweet-spot is Enterprise website design and build for international retailers and manufacturers.
Similar to many other agencies, they have a core proposition that demands deep focus: UX design and CMS implementation.
Increasingly, however, the breath of technologies required by their clients is proliferating so fast that to routinely diversify into new tech—then hire (and probably fire)—is costly, and too high risk.
It could derail their core proposition.

Working In Tandem
So when a client asked at the beginning of the year for a creative UX refresh on their website, plus the development of a mobile app, Profound thought let’s ask our pals in Sri Lanka to manage the tricky conversion to mobile .
“What impressed us most was their relentless pursuit of MVP’s (minimal viable product),” Quinn said about Calcey’s sprint performance philosophy.
“Their approach is to build the leanest product possible—day on day, week on week—so there is always something to continuously test in it’s real world context. It means the speed of progress is non-stop.”
“Another key driver for us was Calcey’s experience with React Native [app building software]. Calcey have quality developers building cross-platform mobile apps [on IOS and Android] with one code base. That allowed us to accelerate delivery, so the app was demo-stable before the client’s major international conference in June”.

Collaboration: Rebranded
Being an agency offering bespoke tech solutions, Profound were, like most out there, profoundly anti-outsourcing. After all, doesn’t it undermine your client needs, and devalue your own workforce? “Outsourcing” is like a swear word to many.
In our modern tech bubble, however, this somewhat outdated word needs a rebrand. Who works in an agency that can genuinely say they are experts across the technical-mix? Furthermore, who wants to give their clients less than anything other than the sharpest service possible?
So, as of today, let’s rebrand small-scale outsourcing.
How about “collaborating”?
Collaborating is when their is meeting of minds. And when two external parties, be it individuals or organisations, work in tandem.
Let’s keep collaborating.
It’s so much nicer.

Life at CalceyUX

Craft better UX with what you already have!

Moving from nice looking design to user centric experiences

With the smell of burning gun, the tube slowed down to another London Underground Station. I took my eyes away from the notebook to look around.

A fellow passenger, sitting next to me was trying to get my attention. Unusual, as all passengers are usually just sit and stare at their smart phones or drown in a daydream with plugged earphones.

“Hey mate, do you design Apps?”

Odd choice of a question to begin with. Maybe, he has seen the wire-frames (hand drawn sketches for my next project) through the transparent file in my hands and guesses what I’m doing.

“Mmm… yeah.”

He introduced himself with a brief description. Originally an artist, who had worked for advertising agencies, he had later become a self-taught graphic designer. He was having a hard time figuring-out designing for apps and asked;

“So… What’s really is this UX thingy?”

His tone is curious and I answered instantly;

“So, you know, UX is not just about designing apps or websites. User experience covers all the aspects of all end-users’ interaction with a product or service. And then in UX design, we are trying to enhance the user satisfaction with the product and or service by improving the usability, accessibility, and etc. UI is …”

He was listening intently, but just at that moment we were disturbed by the famous underground announcement;

“Please, mind the gap …”


TL;DR

Even though we prefer to use one thinking hat at a time, crafting great UX requires thinking both analytically and creatively at the same time


Earlier that day, I was at Google Campus London (now it’s Campus London) where we were given an opportunity to pitch our digital product designs and get feedback from industry experts. Thus, the subject was already on my mind. Even before the announcement ends, I realized, that I have to put that explanation in a fairly simple and straightforward way.

I took out my notebook and started sketching.

 

User Experience

“Ok, for starters, let’s look at this in this way…” I showed the sketch.

“Our end user uses a productand or service, to accomplish some goal. As you can see, the UI acts as the user-facing layer of the product. A common misconception is when people think that UI is the UX. It’s not, UX is not just UI. Even if the user interface looks great and usable, if users can’t accomplish their goals at the end, then the user experience needs work.”

“So, what about business goals?” He asked.

“Aha, good question!” I replied;

“As an entry point, let’s replace the user with a business owner and the user goals with business goals in this same diagram. So, now the owner needs to achieve his business goals through the same product. Then you can see how the owner’s experience would be. Depending on the product, there could be a UI for the owner as well.”

“So, when you are talking about the UX of a specific productand or service, you have to consider all the aspects of all the end-users’ interactions with it.”

Working with what you have

“Mm… Hmm, I see. But what’s wrong with me?” he asked.

“Of course, there is an UX design process and there is a range of techniques that you can master. But before stepping into that, you can use something you already have.”

“Analytical thinking and creative thinking.”

“Since you have been an artist for years, you already use your creative thinking hat most of the time. Just think about what you do when you get a design brief for a poster, you think about the campaign, colors, target audience, etc right? you analyze the problem, before going into the design process.”

“So, the same applies here. Just have to do little more work when doing the research. Practice blending both analytical thinking and creative thinking when doing UX design. Don’t get confused these two thinking hats with the two hemispheres of the brain, the myth of the creative-right vs analytical-left brain has already debunked.

It had become a longer conversation than expected. The tube was now less crowded, we were moving away from the Central London and at the next station, I switched to the London Overground.


Do you agree with my explanation? Or can you perhaps propose simpler way to explain UX to a novice? Eager to hear what you think.


 

UX

Web designing for a good user experience

Web designing is not only about creating a clean code-base and sharp graphics, or having bug free functionality, or even fulfilling the owner’s strategic objectives. These are essential requirements in a web design, but even the most sophisticated technology or the best-written content won’t hit the nail on the head, if the user experience is not consistent, cohesive and stress-free.

Creating such a user experience is not a trivial job, and involves addressing many issues such as usability, brand identity, information architecture and interaction design. Web user experience development, from strategy and requirements through information architecture and visual design is a process that needs input from the client, creative designers, end-users and software developers. These stakeholders might have different perspectives and expectations about the website.

Client expectations when designing and implementing a website is usually more about delivering the message to the maximum possible number of users. To be more specific, the website would:

  • Show as much information as possible
  • Attract users
  • Look great aesthetically (not just another website, but be THE website)

The users’ perspective when visiting a website may be drastically different when compared to the site owners, such as:

  • Grab some data (easy scanning through the pages)
  • Pleasant (good contrast and no harsh distractions)
  • Simple
  • Easy navigation

The challenge for designers is to come up with a website that addresses both these perspectives. This is why the concept of website direction  – Whiteboarding the concept and making adjustments to address the concerns of all stakeholders, including sample end users  –  is a key part of the web development process. The Whiteboarding process must be kicked off immediately after a clear set of written goals for the website are provided by the client.

A given functionality or content could possibly be presented to users in a hundred ways, and be accepted by them as a  “good”  experience. However it is possible to abstract atleast a few general principles for website design, based on numerous “usability testing” exercises conducted within the industry. Here are ten such important principles:

  1. Speed. The Website or page must appear to the user within a maximum of five seconds through reasonable Internet access (ideally less). There is nothing worse that a user could experience, than waiting for a website to load. Since loading speed is related to page-size, pages must be as lightweight as possible. We must avoid that 2 MB home page at all costs, even with today’s high-speed Internet connections.
  2. Simplicity. Present the core idea in a manner that the users could grasp it in the least possible time. Most usability experts say that if a given Web Page’s idea or functional purpose doesn’t register after five seconds, its poorly designed. It doesn’t mean the details could be read in five seconds, nor does it mean that any fields or user actions to be taken must be completed in five seconds. It just means we must “get it” in five seconds or less; for e.g. “this Website is about a social media marketing tool” or”this page is where I unsubscribe from my services, I have to give the service provider a reason for it”  etc.
  3. Focus. Present the idea or functionality in an uncluttered way, with a focus on the core message or function. Lots of white space is fine, especially when we are dealing with functionality. Google pioneered this concept with their legendary home page. Even when we want to provide the user with a multimedia experience, we must keep it clean. For example, having two or more scrolling images within the same screen-view, or littering the website with advertisements that are not demarcated as such, can be most confusing to the user.
  4. Readability. Whenever we present textual information, we must keep it as succinct as possible. There is a whole school of advice on how to write for websites. In addition to the simple writing style they all advocate, we must make the paragraph width smaller for lengthy texts (so the eye doesn’t tire when scanning). Contrast must be good (beware of those fancy background colors and textures). Paragraph spacing must be adequate so the text doesn’t look clumped. Over the years, typography  –  the presentation and arrangement of text –  has been considered a critical success factor in web design.
  5. Resolution-robust layout. There are a host of screen resolutions out there, and one must ensure that the web pages appear readable and pleasantly laid out to all these users. This does not mean that we design separate style sheets to cater to a dozen resolutions. It just means we should pick a minimum resolution (say 1024 X 768 pixels) and make sure that the site looks good in this resolution, and in any other resolution reasonably higher than this. Layouts must not be broken or look minute because of a higher resolution. One customary way of ensuring the latter is to have liquid layouts. In any case, all critical content should be above the fold –  an imaginary line at the bottom of a screen with the minimum supported resolution. The purpose that the website represents, for example, should be apparent above the fold, within a few seconds.
  6. Coherence. This simply means that the collection of styles applied throughout the website must be the same, and each style applied for similar purposes. If there are two types of paragraphs, then all page content must use these paragraph templates. The color scheme, font scheme, input field and labeling scheme etc must be consistent throughout. Also, the way we perform different functions must be consistent. If field validation messages are displayed just below the field, then it should be so in every field in the website.
  7. Accessibility. Depending on the website’s business goals, it must be made accessible to as many users as possible. Cross platform testing, cross-browser testing and loading custom style sheets for targeted mobile devices are the commonest measures that one can take to ensure accessibility.
  8. Navigability. This means that we must have a uniform way to navigate throughout the website, without functional complexity (e.g. “tree views”) or the presence of multiple navigation areas. The ideal website would have a simple link-based navigation, perhaps within a common header. Complex dynamic navigation (cascading menus and flash pop-ups) should be avoided, unless for very particular reasons.
  9. Searchability. This simply means that your site is properly tagged and ready for search engines and for textual search. Page headers, meta-tags, resource links and paragraph headings must reflect the search criteria of the target users. For example, the heading for this article is “web designing for a good user experience”. It is likely that the article would show up if the words “web designing” and “user experience” was to be searched on Google. If the title were “good design tips” , it is unlikely that someone searching for user experience or website design would end up seeing it.
  10. Interactive. The concept of promoting interactive websites was a key component of the “Web 2.0 revolution” some years ago. Technologies like Ajax frameworks emerged to handle the problem of posting little bits of server-side content to th
    e browser screen based on user actions, without refreshing the entire page and thus distracting the user. Anything ranging from enabling your website’s content to be posted on social media, to implementing an online chat function to support your business goals, would be advocated.

A concluding remark; people visit a Website to gain information or to perform a task (a function). Making sure we provide just this, and nothing more thatwould confuse the user, is the goal of user experience design. We could display our artistic skills in moderation, as we don’t make website designs today to merely showcase the artistic prowess of the designer, unless art has some special value to the core purpose of the website itself. What we do (or aught to do) is to capture the target audience by giving them exactly what they seek. A good website design is one that has as little design as possible, where the UI is clean, simple and unobtrusive.