Mobile App Screens

Mind the app

In Uncategorized by richardbarrettLeave a Comment

In light of the meteoric rise of mobile internet and the location relevance of its services, HarkHark knew that in order for the company to stay competitive and relevant to its customers, it needed to turn its products into a mobile app experience.


Lead the design of bringing HarkHark’s online services to mobile platforms and deliver a first class mobile user experience.

“The beauty of Richard’s UX process was that it allowed us to focus on the core ideas of the product and develop them to their full extent. He has an amazing and efficient prototyping process and is great at keeping us focused on what’s important. He’s simply a fantastic person to work with.”Luke Beacon, Operations Manager, HarkHark


Organisational goals

Due to the multifaceted aspect of HarkHark’s online consumer products, their app was not going to be quite like any other on the market. To begin with, HarkHark wanted to combine products that weren’t typically being delivered in a single app, namely online takeaway food delivery and online local deal coupons. I definitely had my work cut out for me and it was clear early on that the app was not going to be lightweight by any stretch of the imagination.

Before I could make a value judgement about how best to proceed with data collection, I needed to consider organisational goals for the product and how they could coincide with a journey mapping initiative. This required some initial research, a couple of substantive sessions with the company CEO, and interviews with key stakeholders. These sessions established goals, priorities, components, features, deadlines, a list of the customer touchpoints and the channels on which those touch points occur. Importantly, whiteboard wireframes were created during my sessions with the CEO to be referenced later on. Additionally, during the Stakeholder interviews I was made aware of WeChat Store analytics, a resource I had not known existed until then and one that would prove essential to this project.

WeChat analytics

WeChat is so big in China it is often the case that Chinese people will people ask for your WeChat ID before asking for your cellphone number. WeChat is a mobile text and voice messaging service and has approximately 600 million active users; over 70 million of these users reside outside of China. Covering WeChat’s many features would take up a whole article to itself but its most useful feature, from a UX perspective, is the store analytics, including metrics such as number of post views, post re-shares and user specific data (gender, location, devices used etc.), as well as survey tools and an analytics dashboard.

Competitor audit

With the aforementioned sessions complete, a competitor audit was up next. I really wanted to know who our competitors were, how they positioned themselves, what products and services they offered and what customers were saying about them. Plus, it was important to see what their mobile apps were like in terms of style, layout and language. I read their blogs, Facebook pages, websites and Twitter accounts. These activities helped me map out the terrain and understand how our app was different.

Collecting data

In terms of data collection, I looked at company transaction data going back 6 months by plugging the spreadsheet into a free version of Tableau. This yielded valuable insights into customer male/female ratios, popular categories and purchasing trends.

Charted customer data

Next, I pushed out a survey through our WeChat store channel compiled with bipolar and open-ended responses that would allow me to form a holistic understanding of how customers were interacting with existing products. The questions related to pain points, services used (and why they used them), how they viewed the company’s services and what they thought could be improved. I also made sure to look over the customer complaint logs for additional sources of customer pain points.

Empathy maps & personas

With all this data now in I was able to create the empathy maps, which in turn informed the creation of the customer personas. Once the personas were complete I presented them to the stakeholders and displayed them in the office.


Design & development


The original whiteboard sketches that were drawn up over a number of stakeholder sessions were scanned into Prototypes on Paper, a great little app owned by Marvel which makes prototyping sketches a breeze, and tested internally.


Once we had ironed out the bugs in the prototype so that it was flowing smoothly, I moved on to creating the high definition wireframes. The wireframes went through a couple of iterations with stakeholders before being signed off. It is important to note that the onboarding process was included in the wireframes. According to Swrve, 19% of all apps are used just once and only 55% are used more than five times, so my approach to onboarding is to understand that an app is going to be used at least once. Above that, there is no guarantee it is going to be used again. Onboarding is the the only shot you have to demonstrate the app’s value to the user, so it is important to think about your onboarding approach early on.


High definition design

Development of our app was contracted out to a private company, so it was imperative that we met our deadlines. As soon as the wireframes were ready they were given to the contractor who could then cost and plan the project. After the handover, I moved into high definition design, which had been broken into stages so I could stay one step ahead of the developers.


Additional notes

I advised that mobile analytics be built into the final product from the beginning. Given how essential our app’s success was to the future of the company, it was necessary that we had the capability to identify and resolve issues early on; this is especially so in the first few weeks after launch. My analytics services of choice were Countly and Google’s Analytics For Mobile Apps. Both were chosen for their cross-platform compatibility and feature set.

Share this Post