When I first joined Toro, which is a product team in Stampede (torotimer.com), the team was in the midst of a sprint. For those who are not familiar with sprint, it is a set period of time during which specific work has to be completed and made ready for review, usually involving the product owner, the design and development teams. The outcome is usually a prototype or solution to a problem, alongside valuable insights about customer needs and preferences.

In my case, the sprint focused on a freelancer product, which we internally called as Toro Freelancer. My colleague Luqman and I set out to build a new prototype for Toro, as well as being responsible for the testing research plan and participant recruitment.

Lesson 1: It’s okay to take a step back to solve the problem

From the ideas we had, the product owner selected a few viable ones, but also realised that they were skewed towards a known solution space. There are many solutions out there to help freelancers get paid easier, and beating this dead horse won’t really help our users in a meaningful way.

What we missed were strong ideas for helping our freelancer improve their productivity in a way that is sustainable for them. Realising this, we took a step back to shift our focus on the right problem.

Lesson 2: Standing out from the competition

Initially, I thought it was merely a minor issue to miss the step of having solid ideas for the right problem. But after the testing later on I realised one more lesson, which is that in making a product, we need to differentiate ourselves from the competitors, not just create another similar tool in the market.

Focusing on user’s problem in being productive sustainably really tested our product market fit. If we did not take a step back to focus on that opportunity, we might just waste our time creating another common quotation/invoicing tool, getting further from our goal of making freelancers subscribing for Toro.

Lesson 3: Be selective about what we want to test

One lesson that I learned from prototyping is that we need to be selective in what we want to test. Not everything has to be interactive in a product test. Sometimes we may want to keep a non-interactive item like a button that cannot be clicked, so we can ask the user to guess where it might lead. Test time is limited and this will help us to be more efficient and focused on the actual hypothesis we are testing.

Lesson 4: Be intentional in design

Another lesson is to be intentional in prototype design, to the small details. I learned this from a situation where I only randomised the variation height of bars in the chart, without any deep thought. However, during the testing, the users interpreted the bar chart in a certain way, like the chart was designed intentionally to show something. At that moment, it exposed my bias that some users actually do think and care about the tiny details.

Being intentional with the details is also another reason why we need to design the prototype with a smooth continuity so that users are not confused, surprised or distracted. For example: add a confirmation modal first to smoothen the flow, remove an existing CTA which can distract the user from the tested path etc.

Lesson 5: Ask the right questions to screen the right users

As I was taking the lead for user recruitment, initially I was thinking of an easy path: Edit an existing screening survey, spread it anywhere, pick the users and schedule the slots.

I did not expect it would be hard and time-consuming to find the right users. It was a moment of clarity for me as to why a certain UX agency has dedicated researchers only for user recruitment.

The screening survey attracted many scammers because of the monetary incentives, plus it was posted not in the right channels. We mitigated this by verifying through their LinkedIn profile or portfolio link.

Asking the right questions also means only asking the essential questions. I learned the hard way that sensitive questions, such as gender and marital status can be intrusive, especially when they do not carry any weight in finding the right users. Essential questions could make the screening form shorter, which would mean less friction for the users while providing enough info for designers to filter them.

Lesson 6: Be pragmatic, not dogmatic

Finding the right channel to funnel quality users was also important. What worked in the past might not work this time. After getting so many wrong users in the list, I started to think “If I were an established freelancer, where would I be to connect with like-minded people?”. I eventually hit a jackpot when I found a few Slack channels that vet the users to ensure a sustained professional community.

The benefits of getting the right users would later be manifested in the quality of the testing. The users could really relate well with the prototype especially when it was able to solve their pain points. I was super relieved when the right users stress-tested the prototype. Seeing what worked or did not work for them gave us some ideas on how we were gonna tackle the next step of the product.

Lesson 7: Making mistakes is a part of growth

Understanding different accents, handling internet connectivity issues, users being very prescriptive or just providing short simple answers, and managing time limits can be challenging to the facilitator. Having diverse users tested my ability to manage these sessions. As it was my first time handling a testing, having a more experienced designer observing me and providing detailed feedback improved my facilitation skills after each session.

I made the mistake of asking too many questions early on about what the user understood from the prototype. This consumed a lot of time and did not provide insight into whether the feature was useful (and how) or not (and why not). The reason we had testing in the first place was to test the prototype by understanding users’ thoughts on how the prototype would or would not solve their problem.

After conducting the testing, I feel more confident to do user interviews/testing. At the same time, I want to keep training those muscle memories until my interviewing skill becomes natural.

Another lesson that I learned is we sort of established rapport with the users. They could be a great resource if we have questions related to our product research, such as the reason they are using separate tools for invoicing and time tracking. Some of the users were so willing to help us, and they were just an email away 🙂

Lesson 8: On deciding what to ship

As a product designer, I had a sense of ownership to carry the product to success. However, I had a lot of uncertainty about how to nudge the team in the right direction when prioritising features for the minimum payable product (MPP).

During the testing, we tested a lot of features based on our research. However, in reality, achieving the ideal state of a finished product requires going through multiple release cycles, which can take months or even years.

So how do we prioritise certain features to ensure we are on the right path for users to start paying for Toro? What if our MYP is similar to all the other tools in the market? Will users be willing to pay for it?

The testing showed that we have a Unique Selling Proposition (USP) module that can differentiate us in the market, as it solves major pain points for users. However, shipping that module requires a lot of effort and other foundational features to be shipped first.

Since we do not want to release a half-baked product, should we build all those features, including our USP module, before releasing the subscription plan?

All of these questions were on our minds. After further reading and asking a few designers in the industry, we initially thought that a prioritisation workshop would provide more clarity on the path forward due to the inputs from the team. However, in our case, Shaza as the product owner, is well-versed in the feasibility, viability, and desirability, and this part is the product owner’s call to make, not the team’s. We learned that we should have discussed with the product owner first the best way this should be done.

Lesson 9: Learn from history

Later, I learned that Figma did not have the collaboration feature when it was first launched. There are many examples of successful startups that launched their products without their best-known features yet. What is more important is to ship, measure, and learn, rather than dwell in the uncertainty of which features to ship first.

Nobody can predict the future, but we can try to make the best decision at the time with the info that we have. If we fail, we need to fail fast and iterate. If the minimum viable product does not go the way we wish, at least it saves us from wasting our time and effort on the queued features. At least we learn what is working and what is not.

Lesson 10: Size the development effort carefully

I also learned that a feature might carry more complexities than I initially thought. If we overlook certain details, it might surprise us in the development phase. For example, can the user edit the invoice that has been sent? What if we allow the invoice to be edited if the client hasn’t seen the invoice on Toro platform? How sure are we that the client hasn’t seen the invoice?

Thus, it is important to collaborate with the developer to understand what the considerations and technical constraints are to build the feature and to be specific (to a certain extent) so that developers won’t undermine the actual efforts needed.

That concludes our 10 lessons. If you have any tips or best practices for designing valuable products, please share them in the comment section 👇

The post 10 Lessons from Designing A Product appeared first on Stampede: the strategic design & technology company.

In the first couple of months at Stampede, I was assigned to an intense training regimen. Instead of some run-of-the-mill online course, the team at Stampede came up with a personalised course that would help me sharpen my strengths while shrinking my weaknesses.

Currently, my training still continues, and is constantly being adjusted to what I need to improve the most; efficiency. This meant that I could not dwell too long on looking for a perfect solution every time for design problems. Instead, I had to look for the best solution in the allocated amount of time.

Rapid-fire design skills

To meet this goal, a training module was developed by Zana, who is in charge of our training. It was named ‘Rapid-fire Design Skills’, and was designed for me to complete a small design assignment every day within half an hour. These are one-off designs like a single screen mock for an app for website.

Within those 30 minutes, I needed to do as much as I could while delivering the best results as possible. There were times where I exceeded the limit because I could not muster up the willpower to stop working on those assignments.

That highlighted another reason why this training was relevant to me, because I’ve had trouble completing things until it felt perfect. The problem; it was never perfect to me.

When I got this assignment, it reminded me of the time where I started waitressing in my gap year and the management told me, soon I was going to learn to carry seven plates, when I could only carry three. I knew that I would never be able to carry seven, 500g plates and £200 worth of fancy dinner for them.

To explain it better, here’s a diagram.

When I told this to Shaza, our design lead — she said it was fine not to carry seven plates at the same time, but only if you can deliver them three by three in the same amount of time.

I realised that the point of this training was not so much delivering a perfect solution in a short burst, but rather what I could come up within that time. It focused on making me churn out drafts and ideas quicker, to increase my production speed and eventually get closer to the solution.

Understanding the brief

The first step is to read and fully understand the design brief. This is the most important step because the moment you misunderstand what needs to be done, it’s like setting yourself up for failure. At present, this step sits in my weak spot.

The Brief: A flight booking confirmation UI in desktop showing destination to and from, time of departure and arrival, flight time, class, price, and CTA to book this flight with at most three colour schemes.

Such a case was when one of the briefs I received, requested for a flight booking confirmation screen. I thought this was pretty straight-forward in the beginning but what happened was that I initially did not notice some of the elements that needed to be in the design. These elements were the flight and payment details, along with a ‘Book Now’ button on page. So the result of that mishap was a screen that users would see after they had placed a booking. The screen I needed to design was the one before that step.

Sample of the mock I designed.

The lesson I took from this was that, even with little time at my disposal, comprehending the brief is never a waste of time. In fact, this is the best time to ask questions to ensure that you fully understand the goal of the design.

Understanding the who and the why

Once I understand what needs to be designed, the next step would be to figure out who would be interacting with it. This step is where the UX part of my skills are tried and tested.

Users are varied, but understanding them is important.

Although the designs I’m working on are just a part of the training, I have to give it serious thought and empatize on who would be using this product. In the case of the flight booking website, the ‘who’ are the users looking to travel, and the ‘why’ is the reason they are booking tickets on the page. By repeatedly putting myself in the shoes of other people, I have gotten better at creating user-centric designs in a shorter span of time.

Research existing solutions and consider whether it works or otherwise

While it is great to come up with an original solution to solve a design problem, many times we do not need to reinvent the wheel. There are many common problems that have been solved in the past by someone else, and sometimes as an industry as a whole.

What I am trying to do at this step is to find out existing patterns that users are familiar with and would expect from it. Take for instance the hamburger menu. Mobile app users are highly familiar with this icon and the moment they see three parallel bars, it can only mean one thing; a menu.

Executing the design

Once these three steps above have been fulfilled, I can finally come out with a solution to the original problem statement. This step is the one others would consider as actual ‘designing’, where I arrange and manipulate elements of the design on the screen.

The most important factor is to make sure the design ‘functions’.

A large bulk of my time is spent here, and the goal of the training to speed through the assignment. I do not have the leisure to fine tune the visuals, so none of that pixel-perfect magic here. The most important factor is to make sure the design ‘functions’.

As this is an ongoing training for me, so far I have completed eight assignments (at the time of this post):

1. A mobile translation app screen
2. A desktop to do app
3. A mobile currency converter
4. An emoji keyboard web app
5. A colouring app
6. A flight confirmation screen
7. A Journal app
8. And a translation app screen

Did it pay off?

While the first few drafts can feel very unsatisfactory, continuous effort can help any designer to become more productive. The balance is coming up with something that meets your own quality standard while getting the solution out as fast as possible. Once you get the ball rolling, it’s only a matter of time where you’ll arrive at that quality of work you’re proud of, while staying on time.

Mark Zuckerberg, CEO of Facebook once said this,  “Move Fast and Break Things”.  As I work on this training more and more, I find myself gradually getting faster. Indeed I am also breaking things, but from there I know where I can improve and better myself as a designer.

The post Getting Up to Speed: Rapid-fire Design appeared first on Stampede: the strategic design & technology company.

Wan Shariff

• 

  This week I did a little painting. The medium I used was acrylic paint. It has been quite some times since last I paint with acrylic.

Recently I started painting just for fun and I found that it provides a good distraction to my mind after a very busy week. Not my best painting though, but the process was really relaxing.

It started out a few days back when I felt like painting right after work, before I went to bed. I even sleep better since.”

Shaza Hakim

• 

  Stampede is recently engaged by the team at Joota to introduce improvements to their existing user experience. Joota uses card interface and in doing my design research, I came across many examples of flat design and the subsequent argument against skeumorphism.

But what really interests me was colors. Take away the flatness and you will realize how heavily color-dependent flat designs are. Look at a flat design and you will immediately notice how they are made of palettes that you know shouldn’t have worked in traditional design sense. The rules we all learn about color pairing and matching seems to have taken a back seat in favour of barely-adolescent combination of colors. We are talking colors akin to unicorns galloping over saturated rainbow here!

DesignModo describes it as such in the article “Making it Work: Flat Design and Color Trends”:

“When it comes to color, flat design schemes often trend as super-saturated and bright, more retro or monotone. That’s not to say these are the only options, but as the trend has evolved they are the most popular.”

Popular flat design colors in flatuicolors.com

There also seems to be more constraints introduced in this trend compared to its predecessors. You either go flat or you don’t. And because flat design is often expected to perform the double duty of being responsive as well, every interactive surface is designed in generous proportions. The average size of a human finger pad is now the defining factor of next-gen web design.

Taking this line of thought one step further, I wonder how the limitations of flat design affect my workflow. In my down time, I do design practice on Graphene WordPress theme. We are thinking to explore other web services in the future so for this burst, I did a mockup of a Graphene mobile store.

Color restraint seems to be one of the key consideration when designing flat interface, so I prepared two versions of the same interface to see how the color works. I found that it forced me to think harder about space. Whereas previously I could do away with miniscule link text, now I can no longer afford having my user miss their first tap. How this spatial consideration correlates with colors and the lack of depth perception is quite an enjoyable puzzle to figure out.”

p/s: If you’re interested, Behance, in my opinion, has one of the best showcase of flat user interface design. They also sometimes feature the best work from Dribble and other design galleries so you’ll be pretty much covered.”

Zana Fauzi

• 

  I travel a lot these days, and some of friends back home often asked me to send postcards from the places I have visited to them.

The problem is I never really did, because here’s what I found out: holiday postcards are littered with generic stock images. Although they can be personalised with our own handwriting, I still think they are bland, and my friends deserve more than that.

Brainstorming and association

I own a Polaroid camera, and back when filmpacks were easy (though not cheap) to obtain, I often took pictures and sent them in the post as postcards. E.g I sent this Polaroids to my favourite advertising planner, Russell Davies many many years ago. As you can see, the handwriting is unmistakably mine.

I bought this too before leaving for London and ran out of them already.

I also own one of these Scratch Maps too:

I had a conversation with Wan yesterday about there should be balance between digital and analogue. And although I instagram-ed a lot during my travels of which I consider my way of sending ‘postcards’, I figure out one thing should be kept analogue and highly personal – sending physical letters & postcards.

Solution

A postcard with a scratch map of the areas/provinces/districts etc. of the city. When the traveler goes to the certain part of the city e.g. Joordaan in Amsterdam, they will scratch that part and it will reveal a photo of a landmark in Joordaan. Of course, they can scratch the whole map if they have visited the whole city. I was also thinking if there should be a personalised service where travelers’ own photos can be turned into scratch map postcards. That would be nice.”

The post Creative Burst #22 appeared first on Stampede: the strategic design & technology company.

Wan Shariff

• 

  For this week, I made a mock-up user interface in GIF for better presentation.

The original idea is from the old neon signage that changes light creating a movement.

From that, I applied in on mobile user interface for better presentation, making it more functional rather than just plain image and text.

By having the GIFs of this interface as well, I think users are able to see a interactive sample of how the user interface works.”

Shaza Hakim

• 

  I have always wanted to do typographic poster, but didn’t have an original material to post. People usually use famous quotes, so I look at the closest inspiration material – Things Stampede Says.

I immediately saw potential in many of the quotes (thank you, Zana for keeping this list updated).

Here’s what I have learned when designing a typography poster:

1. Choosing font is a hassle – I referred to a lot of other posters for this step alone
2. In the second poster, for example, using an austere, non-nonsense sans serif font for “just unzip” would not have the same seductive effect achieved using a script font
3. You also need to be careful when using illustration, because quotes can be very generic and doesn’t refer to an object, or worse, talks about an idea that cannot be communicated easily through illustration.”

Zana Fauzi

• 

  I was not such a big fan when Instagram introduced video posting option, because I thought a platform should focus on what they are good at and improvise on it, but this is certainly not the case with LinkedIn. Let me elaborate.

Problem definition

1. I have had my LinkedIn account since 2007, and only recently active these past few months due to the fact that I need to connect with a couple of people in the network for my MA.
2. Due to some distance factors, there are some of them of which I would have to conduct interviews through Skype.
3. However, as easy as it is already, Skype only allows you to call people who is already in your list. That means, you need to find out your interviewee’s Skype ID, you need to add him/her, he/she needs to approve, then you need to set up time etc. etc.
4. I am talking about this within the reign of contacting someone via LinkedIn and then had to move on to make the call through Skype, or any other conference softwares available. There can be some disconnection going on here.

Brainstorming and association

1. I was inspired by this article by Sacha Greif about integrating Twitter handles into one platform for an event, so it acts as a repository for business cards itself (and face it, Twitter profiles are much better than business cards because we get more insight about a person by reading his tweets)
2. Ziggeo.com is a video platform where one gets to screen potential roommates or hire before you decide to have them onboard.
3. Airbnb also has the option to add videos to your profile so both potential hosts/guests could screen you before allowing you to stay at their house or you can decide if you want to stay at their house.
4. Skype. Pretty much self-explanatory.
5. Google Hangout.
6. GoToMeeting.

Solution

1. LinkedIn needs a platform within the networking itself that allows two people to connect with each other through video or voice chat.
2. This is to minimise the number of steps having if one were to have a video chat with a fellow LinkedIn-er (is that how you call it?)
3. This could also be used by companies who chose to advertise their job vacancy through LinkedIn to video interview potential hires within the network itself without worrying about the distance and privacy constraint.”

The post Creative Burst #21 appeared first on Stampede: the strategic design & technology company.

Wan Shariff

• 

  I recently prepared a high-res PSD template for iPhone 5. In my work, I found it useful to have a working version of iPhone 5 that I can use to present my design concepts convincingly.

This template was made fully in Photoshop and available for download here. All effects are controlled via layer styling. It can also be modified – you can adjust the lighting angle where you see fit. This is going to be useful for me when presenting mobile app or responsive designs.”

Shaza Hakim

• 

  Stampede’s clients are the reasons why we never had to do any marketing. They are the best, and they spread the word for us. In return, I wanted to extend them our spirit of sharing.

I have never looked at email newsletters as an avenue of sharing. Digging in deeper, I realize what’s missing is this question:

How does your email marketing benefit your audience?

Most traditional email marketing is exactly that – marketing. It tells your audience what you are selling, but it doesn’t address what’s in it for them. Stampede’s message must be different. We want to provide more value to our clients and we want to share with them things that matters to them.

To achieve that, I must start with this perspective: The newsletter must be about our clients, not us. What excites them? What are the new trends or technologies that can bring value to their website? What can improve their website’s conversion? What can get them excited? Can they get both at half the cost? Can Stampede make that happen?

The Copy

The copy must be personalized, just like us sending them from our inbox. An ideal tone would be informal and conversational, just like when we have discussions with clients over Skype or voice conference.

Every client has different needs – we have clients who run e-commerce business, SEO services, professional consultation, travel businesses and many more. A good mix will consist of a general web news as well as specific niche articles that are relevant to their business. We need to cover the macro and micro for every client. It might seem unattainable or inefficient at first but human factor is one of our core assets, so maintaining that level of personalization is important and necessary.

The Design

The design should be simple enough to be built into a responsive newsletter template. Many people read email on the go now and losing this edge is going to cost us the readership. The newsletter should contain images that are not crucial to the message even when not loaded. Sections can be clearly arranged in their own containers.

I would highlight Stampede blog because it’s an excellent place for our clients to discover new design and interactive ideas, especially with the weekly creative burst editions. When there are new project launches, we can include it as well so clients can refer to the latest trend and recognize the benefit behind new web technologies.

I noticed that while responsive web design has been circulating for years among web developers, many end-users are still in the dark. We often get questions like “What is responsive design?” from clients. The web community should always remember that we are not building websites for another web designer or developer. We are building websites for our end user. Some clients prefer to see a working prototype in order to visualize how the moving elements will work on their website. Launches are great opportunities for them to do just that.

Relevant Resources

This is where we share curated, fresh and useful roundup of articles, tools or trends. Imagine how this simple section can open up new ideas and possibilities. The idea is to bring news relevant to their website goals. Example, I once mentioned this cool animated jQuery slider to an e-commerce client in passing. It has never been done by any of his competitors and it brings extra shine to his products. He was excited to have it on his website and Stampede was available to get it done for him.

Rate Us

I begin to conduct quick customer survey once every 6 months with Stampede clients this year and I have learnt so much from it. I recommend every service-oriented agency to do similar survey. If you have built a strong relationship with your clients, they’re just as invested as you are to see you succeed, to become better at what you do.

So at the bottom of the newsletter, I have included three universally-understood icons: a happy face, a “meh” face and a sad face. I drew this inspiration from the popular accounting app, Xero.

Clients can rate our current customer service with just one click/tap. We’re sending them a message that “We want to be better at this. Tell us what you think.”

I hope you have found my (elaborate) thought process useful. As always, I’m excited to learn new ways of bringing real values to our clients. Come on people, share up!”

Zana Fauzi

• 

  I read academic journals a lot for my dissertations and due to the amount of papers, I prefer to read these journals in e-book format. However, I’m limited by the formats available.

The university offers these journals only in pdf format, and what I would do is I would download these pdfs into my computer and sync them to my Kindle. The problem with pdfs in Kindle is they do not work the way the proper file format for Kindle would, which is .prc and .mobi. Hence, I could not change the font size, I could not highlight and make notes while reading. It is also a hassle to download the pdfs into computer and then sync to Kindle.

The Current Situation

Instead of focusing on the question, “Why don’t I just convert the pdf to .mobi or .prc to make my life easier?” I decided to focus on, “Why don’t we improve the user experience for students preferring e-books, straight from the root?”

In my university, every device needs to be registered on the university network before being allowed to use its internet. This includes the Kindle. But what good would it be if I am not allowed to download the journals wirelessly from the library? As for Kindle e-books in general, Amazon allows every purchased e-book to be sent wirelessly in .mobi format to the Kindle soon after checkout.

My Solution

For every pdf journal featured in the library, it would be good to have them in .mobi and .prc format too for Kindle. There will be a user interface to emulate Amazon’s when the journal is sent wirelessly to the Kindle. Because the e-book is in .mobi format, it preserves the convenience such as font resizing, highlighting and the ability to write notes which will make it much easier for students.

Also, because every electronic device needs to be registered with the university before using the internet network, the university can track which journals were downloaded to prevent or track security breach – if there is any, or plagiarism.

I actually sent this suggestion to the university, so let’s see how this goes.”

The post Creative Burst #19 appeared first on Stampede: the strategic design & technology company.

Wan Shariff

• 

  Shaza designed an e-book reader app few weeks ago and I decided to give mobile app design a try. I love listening to music so I designed a simple yet direct music player app.

As a regular user, I find most music player have many features that are unnecessary and unused. My idea of a good music player app is one that has only the necessary features but does the job well. Less is more.

I also wanted to design an interface that appeals to people like me. Since I’m into rock ‘n’ roll, I gravitated towards black as the base color. The subtle light effects is used to imply interactivity, e.g. increase/decrease volume, play/pause, next track and so on. This burst also served as my hands-on experience working on mobile app designs.”

Shaza Hakim

• 

  Working with colors is something I truly enjoy. All those experimenting different color combinations, using them to set design mood and trusting your gut feelings on what works.

How you arrive at a decision when choosing colors is difficult to explain. To some designers, it’s pure intuition, honed by many years of experience. So I try to simplify it to two basic principles: the relational position within the color wheel and the amount of contrast you need.

I used three different color modes: complementary high contrast, complementary low contrast and monotone. For each burst, I began with a starting color and then run the hex value on Color Scheme Designer to identify its complementary or monotone counterpart.

In the first burst, the strong contrast between dark grey/blue and yellow instantly draw attention to the text. The leather texture adds a little dramatic flair to contrast the background from my rigid typography.

With this color pairing, at first I toyed with the idea of making the box Tiffany blue and placing Chinese Red text on it – more on color names here – but contrast between the two is so poor that it will render the text illegible. Instead, I switched direction to using white as base and the two colors for text and UI elements. I also included a cool UX bit of complimenting user on their name as they fill the form. Zana shared this feature with me a few weeks back and I think it’s genius.

We’re now back to my familiar ground: slider, navigation and content area. The colors used on this design are all different tones samples from the original green. Light textures are used – the brushwork in the upper-half signifying chaos and movement and grid in the lower-half for establishing order and structure. The blog post copy is taken directly from this brilliant article from Happy Cog.

Every designer have their own style and preferences. As a designer, what is your thought process when working with colors?”

Zana Fauzi

• 

  My dissertation is mostly what I think about now, so I decided to make a poster/flyer documenting the essence of my topic.

The dilemma: my Macbook Pro’s – where my Photoshop is – battery is kaput and my MacBook Air is without Photoshop.

So what I did was download bits and bobs of clipart online (e.g the paper plane & the map) as well as images and texture from Google. I then fire up Powerpoint (gasp!) and did my best imitation of a flat design. As a replacement for Photoshop, I use Pixlr to edit images.

Hey, a woman’s gotta do what a woman’s gotta do.”

The post Creative Burst #18 appeared first on Stampede: the strategic design & technology company.

Wan Shariff

• 

  This week, I did a mock infographic. With so many discussions out there about skeumorphism vs flat design, I realized that I have been comfortable doing flat design. I wanted to go out of my comfort zone and try to make a graph that is as realistic and appealing as possible. The bigger goal is of course to make better design through practice.

Shaza Hakim

Graphene Theme homepage design

Graphene, deconstructed.

• 

  One of my favourite tumblr sites is Things Organized Neatly where everyday objects are organized and arranged in grid and orderly perfection.

Recently I also came across a similar post by Wan on Stampede:Curated and seeing a machine gutted down to its smallest part is strangely inspiring and calming. I see deconstruction as an attempt to understand things and I like the appeal of simplifying complicated stuffs.

I also think that design is not limited by tools. When we were in school, all of us took craft and art classes. We used pen, paper, scissors, paint, scraps of things to express ourselves. My Malaysian childhood memories include buying color papers every school terms, innocently smelling exorbitant amount of paper glue and smuggling my mom’s potatoes and lady’s fingers to art classes and use them to stamp heart and star shapes.

So this week’s burst is a culmination of the two ideas. I recently redesigned the Graphene brandsite in collaboration with my brother, Syahir Hakim who is the developer of the immensely popular Graphene WordPress theme.

In this burst, I took a closer look at the homepage design and began deconstructing it. I started by asking myself : What would I do to produce a similar design on paper, without using any digital tool? Then I went lo-tech.

For example, the cloud background on Graphene can probably be recreated by dabbing a ball of cotton on wet paint. Not terribly artsy, but it’s a start. A screenshot could actually be a magazine cutout glued on an iPhone blueprint. We can also look at things as metaphors. There are scissors, glue and scotch tape for cutting and pasting, a Facebook keychain for enthusiastic fans of the page and badge buttons as replacements to the website’s call-to-action.

This has been a more challenging burst than usual. Only after reading Wan’s burst have I realized that we share a similar goal this week – to design outside of our comfort zone. Comments welcomed.

Zana Fauzi

• 

  This week, I went and explore better design through sense of inclusion.

Tribalism/sense of inclusion

• Generally, people are subjected to tribalism, or sense of inclusion where everyone want to belong to some kind of groups one way or another.
• Gen Y, or milennials are more highly guilty of this due to the rise of technological advancement where people can easily get connected.
• Sense of inclusion probably leads to social media, where everybody has the chance to self-promote themselves in order to be included.
• It also inspired me of the feedback form idea.

The idea

• I looked around my room and try to see the most boring thing ever – then I saw my heater fan.
• And then it struck me, hey Argos, the online website for electrical appliance is a pretty functional e-commerce website, but how about enhancing it?
• For your information, Argos is closing down most of its physical outlets in order to focus on their online medium – this website – along with long-time competitors like Amazon.
• In order to compete with Amazon, whose website, although fully functional and intuitive, can be really bland on UI aspect. I figured out they need a less conservative idea to get through in this challenging online business landscape.
• What better way to do this through a sense of inclusion. How about a section of electronic appliances where customers submit tips in a form of text or videos on how they use the appliance
• E.g. pots and pans – people submit recipes, vacuum cleaner – tips on cleaning, washing machine – homemade tips on how to take stains off laundry effectively etc.

Examples of apps using sense of inclusion

• Living with Dementia researchers found that the reason carers often are taken aback to share their experience taking care of dementia patients is due to the sentiments they received, and and they feel isolated. Hence DesignCouncil developed an app to promote sharing between the carers to record the patients’ progress.
• Sugru is a brand of self-setting rubber that can be formed by hand. Users can submit tips and videos on how they use Sugru to fix, modify and enhance items in their daily lives.”

The post Creative Burst #17 appeared first on Stampede: the strategic design & technology company.

Wan Shariff

• 

  While browsing for inspiration for my burst, I came across music-related poster designs that caught my attention. Since I haven’t done any poster design for my burst before, I gave it a try. I always liked Blues music. I use Robert Johnson’s picture because he was a Blues legend back in the early 30’s. I chose these typefaces because they look old and bring up the aesthetic values of the 30’s. The vintage feel was made from a old paper texture, image of Robert Johnson — where I applied various kind of grunge brushes to make it look aged. I wanted to evoke the same feelings on the types but it didn’t work out the way I wanted. So, I used the same texture, made it darker than the background and applied it onto the types.

Shaza Hakim

Login screen. View original version.

Account Overview screen. View original version.

• 

  I felt like working on user interface this week so I looked at my browser’s history and realized that I pretty much abused my Maybank2u‘s bookmark. Maybank is one of the biggest banks in Malaysia and its Maybank2u service was the earliest adopter of online banking in Malaysia. So I designed a new interface for Maybank2u. I had sufficient time to design the Login and Account Overview pages. As a regular user, I focused on tasks I tend to use most: checking my account balance, transferring money and paying bills. Some of these simple information are buried deep into the existing Maybank2u website and require 4-5 clicks to get to. My favourite function of this new design is the Quick Transaction panel. It will allow me to do transaction from anywhere on the site. I can also add recipient on the fly by clicking on the +Add New link. What about you? Would you use this interface? Comments welcomed.

Zana Fauzi

• 

  Libraries have always been one of my favourite places but unfortunately for some people, unless if it is for studying or revising, libraries would be the last place they go to. I have always been looking for ways to make libraries interesting to people – aside from renovating the interior, I thought maybe we could explore the unconventional ways of learning e.g. if you want to learn a new language, you watch movies in that language. Back to libraries and learning in general:

Our mistakes so far:

• Most of the times we do not delve far into the real issue of why people are not interested in learning
• We always try to solve the problems by putting technology first as a solution instead of a medium
• So we have all these touchscreens, we have all these devices to get people interested in learning

Why is that people are not interested in learning?

• Subject is way too boring
• No time
• No motivations – BIGGEST ISSUE – if we can boost their motivation, the subject will no longer be found boring, and people will make time for it.

How to boost their motivations?

Take one scenario as an example: Libraries are mostly made of shelves and shelves of books

• People who go there mostly who are really interested in reading
• Or they have to be there because they have to study

Let’s inject a bit of gamification

• people like a bit of competition
• people like to be seen as important and to have an authoritative view over something

Based on IKEA – you see how IKEA is always made up of a maze where you have a choice – you can go through the entire maze and complete it and along the way you would pick up something anyway, also you would have a choice to exit it if you don’t want to complete the whole journey. We can also add up a bit of spice where people can participate in this storytelling journey – if you remember during your childhood days there are these books of which you are presented with choices and every choice lead to something else, that’d be one way to get people to participate with learning. E.g every week, one book would take a turn to be presented through the hallways of the libraries where people can also participate in this story. It would be really interesting to have Victor Hugo’s The Hunchback of Notre Dame in one week where people can decide the fate of Quasimodo (of course, without affecting the original storylines the way some films are made) and experience the ambience of the streets of Barcelona in the library’s very own rendition of Carlos Ruiz Zafon’s Prisoner of Heaven the next. P/s: I also attach some photos of Amsterdam’s public library which had me ogling when I was there in the city.

The post Creative Burst #16 appeared first on Stampede: the strategic design & technology company.

Hello, Meet Your Average Crazy Book Person

I am a huge fan of Jules Verne’s Around the World in Eighty Days. Back when I was a kid, I remember it as an animated cartoon series that I used to watch every Saturday morning on our national TV. When I could afford to buy my own books, this was the very first book that I had to get hold of. Now, I read this book at least once a year.

I have also recently discovered Librivox, where you can listen to audiobooks. There’s a huge collection of works by Jules Verne and the story is so wonderful to listen to, especially when I’m cooking (cough) or exercising (cough cough).

But most importantly, I love books. Anyone who comes to my house knows that. Anyone who ever go on vacation with me will learn that I carry half empty luggage to fill with books bought in foreign cities. I don’t use iPhone, but while Android has many excellent e-book readers, they’re still lacking in the user experience department.

I am, most decidedly, not a delighted user.

So today I wanted to see if I could design an e-book reading app for myself. My goals were to keep the app simple, use existing e-book reader conventions and most importantly, design to delight your average crazy book person. Me.

The Cover

A crazy book person loves book cover, and yet, many e-book readers out there give very little thought about the cover page. A classic like Jules Verne’s often come with illustrative, intricate book covers — e-book readers can capitalize on this and delight their readers by making the cover the screen’s focus point.

The most important function when you get to the cover is to start reading. The second important function is to provide a summary or annotation of the book. In my design, pulling the Annotations bar up will bring up the Annotations section. The book cover, title, author and Read link will remain visible even as user scrolls down to view the rest of Annotations.

The Chapters

The chapter dividers are yet another overlooked part of an e-book. Many e-books have elaborate chapter title and yet typical reader lumps them into the first page of every chapter instead of giving them the attention that the author intended.

In Around the World’s case, I have featured each chapter and its title into a distinct page. To a reader, a chapter is the dramatic pause before the next event unfolds. An author artfully arranges his work with care. We should respect that.

The Interface

Bookmarking is so very important. The moment you start reading, it becomes the most used interface in your e-book reader. So I designed a bookmark icon on the top left of every page. Instead of pressing the hardware key on your phone to bookmark a page, you can now tap on the icon and it will turn to blue and extend a few pixels more into the screen.

The next time you open this book, the app will take you to your bookmark. You can then undo the bookmark or continue reading and set another bookmark. It’s similar to dog-earing your favourite book. I find that this simple gesture evokes a strong emotional response. I must have this.

The home, book and search icons are all regular conventions in an e-book reader app. Home will take you to the app dashboard, book will take you to your library and search will allow you to find another book in your digital library. The lower bar shows your current reading progress in terms of percentage and number of page.

There’s an opportunity here to calculate the estimated time for you to finish the book if you keep reading. I will keep that in mind.

Day vs Night

Night mode is especially useful for conserving battery and reading in low light condition. Let’s face it – how many of us read before sleep and then woke up startled when we dropped the phone/iPad on our face, right?

Okay fine, maybe just me and Zana.

Color choice is an important consideration here. I chose bright blue because it gives superb contrast when paired with both white and black.

Sharing Quotes

We’re all sharing nowadays but when I come across a good quote from an e-book, it’s such a pain to share it in the simplest format to another app. So in my design, long-pressing a row of quote in the reader will trigger a sharing window. Quotation marks are already appended to the text so now you can share to the usual suspects or to another app like Gmail or Pocket.

I’ve had a really great time with this. The 2-hour time constraint actually helped narrow my focus. By letting practicality take a back seat for once, I was able to look at the problem differently and design something that feels good to use.

That’s what I find so refreshing about creative bursts. It’s quite the mental sprint so you have to time it well to be able to execute your design vision within the allocated time.

What started as an initiative to learn something new, quickly transformed into an avenue for us to refuel our inspiration tank and let our creative muses go nuts. There are no other constraints except time. It’s as liberating as it is daunting.

Now if you will excuse me, I will go and start planning my own Around the World in oh So Many Days.

Au revoir!

The post Creative Burst: e-Book Reader appeared first on Stampede: the strategic design & technology company.

When we started Stampede, Dov and I were still cringing at our share of bad workplace experience. Our goal then was to create a working environment where people not unlike us can do stuffs they really like while actually enjoying each others’ company. My litmus test when I wake up every morning is almost always – “Do I want to go to work today?”

You cannot underestimate the power of working with people you like. If you are an entrepreneur and have the choice, this should be high on your list. Not profit, not product. People.

Which brings me to my next point. So you found a person who is a perfect fit to your company culture. What next?

The Education of Failure

I think that it is crucial to build a company culture that allows employee to fail and fail fast. Everyone fails. You shouldn’t tiptoe and delay the inevitable. Only by throwing away your reservations and trying things and risking failure, you are able to learn new things. The key point here is moving forward – not to dwell on your failures or repeating the same mistakes. The former is denying yourself of further greatness (and I mean this in every sense of the word) and the latter is just, well, plain lazy. We abhor lazies.

At the speed in which this industry thrives, failing and moving on is a ubiquitous advantage. Never before an outcome of failure can be rectified almost immediately. If it’s beyond repair, be genuine and honest about it. Clients appreciate transparency and only know too well that everyone is fallible to some degree. Get it out of your system, step back and think of another way around it. Nip the negativity in the bud and move the project, and yourself, into positive territory again.

My take – everyone should be permitted to fail. I fail on daily basis, as few dozens half-finished artworks can testify. Dov’s intensity of hacking at his keyboard multiplies when he couldn’t get some code to work. Failure is an acceptable by-product of actually doing something. A good team is built to weather, nay encourage, the education of failures. People will be too scared to try new things if they’re too busy dodging toes.

On the other side of the coin, a company should have a failure-handling mechanism well-oiled and ready. Assure employees that failure is acceptable, help them get their bearing back, send them out there again, then get the hell out of the way.

So fail and fail fast. Then dust yourself off and move on. Rinse and repeat.

The post Fail and Fail Fast appeared first on Stampede: the strategic design & technology company.