Designing a Social location-based app for professionals.

It has become a trend for people to use cafés to spend their daily worktime. Doing a research around internet will show us that people’s motivation can be found in

  1.  Social advantages of working around other people
  2. Avoiding repetitive daily routines that emerge from working from home or office
  3. Increased creativity triggered as a result of changes in the work environment.

Despite these seemingly widely accepted advantages, people do not seem to actually use these potentials to their benefit, and at the same time they are negatively affected by some of the disadvantages of working in cafés. This includes:

  1. Resources that are wasted while  spending time in a new workplace (time to find a new place + money spent on buying drinks/food) that were otherwise to be saved by working from home or office.
  2. Challenges in opening up a conversation with strangers even though there are many of them around.

By consolidating these five points, I came up with three main solutions:

Solution1:  A platform that can facilitate the process of finding the ‘right’ coffee-place.  The definition of the ‘right’ place, is subjective to each individual and can be affected by factors such as proximity to home, quality of the place in terms of beverages and work atmosphere, etc.

Solution2: A platform that facilitate the provision of discounts for regular customers.

Solution3: A platform that allows individuals to find more about the people who are working in their proximity, and set an spontaneous or preplanned appointment with them.

Personas and Scenarios

To building the concepts into a digital platform, I started with identifying the target users of the platform. This was done through existing online research and my insights of few interviews that I conducted with 5 customers working in different cafés.

At this step, three main personas were created to reflect the users that would actively use the app :

User flow diagram and Sitemap

User flow

Knowing the scenarios that our main personas will likely to experience, I continued to plan out the User Flow through the application.. Unlike a Task Flow, a User Flow does not need to be linear, and can branch out to represent different user journyes .

User flow is a way to share the site vision with everyone on the team. When everyone has a map, they’ll feel more comfortable about where they’re going. Nevertheless, by using such user flows,  it will become easier to determine the sitemap, and set off the wireframing process.


In order to get a good understanding of how many pages need to be designed to accommodate the different user journeys in our flow, a sitemap proved to be necessary. Using  open card sorting technique, and a few participants, the different user tasks that had been identified from the persona development phase, were sorted into different categories.

Creating low fidelity Wireframe

After sketching the initial design using pen & paper (not included in this article), I transfered the sketches into a basic low-fi mockup. I used a wireframing tool called MockPlus for this purpose.

Pixel-perfect prototypes

Before moving on to create high-fidelity mockups, several adjustments were made to the flow and the wireframes. At the end, I used Sketch to translate the low-fidelity screens into design that resembled the final product.

For this final design, I employed  Material Design principles to create a pixel-perfect design.