HYPER-REALITY_A2.gif

Animation of Keiichi Matsuda TO HIS WEBSITE


Stripe.png
 

Why
Ar
city

Arcity-Mockup_3_no-shadow.png

Often people are not aware of the history that is surrounding them. That means not that they are not interested to know more about it. It might just not be in their focus of attention. We want to offer city tours as easy as possible. Arcity will be a marketplace for city tours. Creator can sell their tours to users around the world. The tours can be done in two ways. First are in-person tours like you have them already, but just that you have to know where they will be. Maybe they are not that interesting for you why you want to search for others. So you have to spend some time to find the right one. But beside to the in-person tours arcity will offer as well AR-city tours that will experience you the history at the original places supported by your phone or tablet to bring together 3D-effects of the digital world to our physical world.

 
 
 
 
 
Background_JT_22.jpg
 

Stripe10.png
 
 
 

Interactive Prototype

TOOLS Figma, Photoshop, Indesign

For design process please scroll down.

 
 
 
 
Background_black.png

Stripe4.png
 
?_2.jpg

arcity is your Airbnb & Pokémon Go for city tours that turns your phone to your touring guide.

 
 
Icons.jpg

Share & Meet

Share tours and split the costs with your friends & meet people to join the tours together.

Icons3.jpg

Edit & Sell

Be an in-person tour guide and host your own tours or edit your own AR tours and sell them online.

 
Icons2.jpg

Multiple Platforms

Phone? Laptop? No problem! We are there for you on all platforms.

 
 
Background_black.png

Stripe.png
 
 

Competitors

 

TOOLS App Store, Firefox, Speaking, Photoshop, Indesign

 
Background_black.png
 
 
Nummerierung 1.png

Who are my competitors?

Nummerierung 2.png

What might had been the reason of their decisions?


REGARDING Design, Coding, Marketing, Sales

 
Nummerierung 3.png

Do I see opportunities?

Nummerierung 4.png

Do I see risks?

 
Background_black.png
 

ANALYZE & UNDERSTAND - THEIR PROBLEM

TOOLS Indesign, Photoshop

First of all it is about to know your competitors. I found 7 apps that are partly familiar with city tours, hiking and AR. After some research I picked 3 apps that could work as the sum like arcity. During the hole process of making I kept always those 4 topics in my mind.

 
Background_black.png

Stripe2.png
 
 

Research

 

TOOLS Skype, Typeform, Realtime Board, Indesign, Photoshop

 
 
Background_black.png
 
Nummerierung 1.png

Hard Facts

TOOLS Firefox, Indesign, Photoshop

By doing research to get some hard facts about tourism it was possible to develop some thoughts and deliver numbers as well for who might be the user group.

 
Black Background.jpg
 
Nummerierung 2.png

Preparing Survey & Interview

TOOLS Typeform, Indesign, Photoshop

By understanding the user’s situation you will be able as well to frame the problem and find solutions for this. Starting by asking yourself who might be the user. How he/she might travel? Has he/she kids? What’s the age?
Users answer differently for any reasons and I sorted them in groups for open questions and those that are simple to answer.

 
Black Background.jpg
 
Nummerierung 3.png

Survey & Interviews & Conclusion

TOOLS Firefox, Skype, Typeform, Realtime Board, Indesign, Photoshop

After the interviews and surveys I did the research analysis. I wrote post-its to every statement that I found and grouped them by topics.
Those insights brought me lots of ideas how the service should be. Also the interview partner came up with some very great ideas.

 
Black Background.jpg

Stripe3.png
 
 

Personas

 

TOOLS App Store, Firefox, Speaking, Photoshop, Indesign

 
Background_black.png
 
Nummerierung 1.png

Proto Personas
to
Mental Models

TOOLS Photoshop, Illustrator

To support my researches I used fictional proto personas. Those are great to create mental models that I used to imagine situations and circumstances how a user might need the app.
A couple with some kids might want to have tours without lots of traffic. In comparison, the young couple might to enjoy crowded places.

 
Background_black.png
 
Nummerierung 2.png

Mental Models
to
User Flows

TOOLS Realtime Board, Photoshop, Illustrator

For those mental models I used user flows. For all those needs that my real interview partners did not reflect or those I had to bring more clarity.
The app should be for everybody. What means it should be convenient for people in their 20th, for pensioners the end of their 50th as also the young family with two kids.

 
Background_black.png

Stripe5.png
 
 

Prototyping

- Creating the Structure

 

TOOLS Realtime Board, Optimal Workshop, Photoshop, Indesign

 
Background_black.png
 
02_Low Fidelity Wireframe_1.PNG
Nummerierung 1.png

FULL STACK DESIGNER

So Many Interests…So Many Ideas

TOOLS Brain, Cross Disciplinary Interests

As a good designer you have to have always more questions than answers. It is very important that you are willing to learn. Especially as an ux-designer I see my role as someone who is sitting between all professions and needs. Not only because of my entrepreneur background I would describe my profession as a full stack designer.

 
Black Background.jpg
 
Nummerierung 2.png

Information Architecture & Wireframes

TOOLS Realtimeboard, Optimal Workshop, Photoshop, Indesign

After doing the research I started with prototyping. The user flows and proto personas became the base for creating the information architecture (IA) and the wireframes. Tools like optimal workshop I used for testing my decisions by users with closed card sorting.

 
Black Background.jpg

Stripe5.png
 
 

Prototyping

Building the Prototype

Low to Mid Fidelity Prototype for Mobile & Desktop

 

TOOLS Realtime Board, Optimal Workshop, Photoshop, Indesign

 
Background_black.png
 
 
Nummerierung 1.png

Low Fidelity Wireframes - Mobile

TOOLS Balsamiq, Photoshop, Indesign

After building the structure with the IA I went deeper to create the first steps to design the interface. Findings and conclusions of all the researches that I did before found their first locations with the low and mid fidelity wireframe.

 
Black Background.jpg
 
 
 
Nummerierung 2.png

Mid Fidelity Wireframes - Desktop

TOOLS Balsamiq, Figma, Photoshop, Indesign

Also I began to implement the findings from the mobile to the desktop version. I imagined user journeys to find examples of usage.
To create the desktop version means not to copy just the mobile to the desktop. It is important to keep in mind how the user might act with the different device. The desktop gives the user obviously more space to create some content or communicate with other while the mobile offers to collect fast information and content for tours.

 
 
 
Black Background.jpg

Stripe7.png
 
 

Test Methods

USability TESTING

What Might Be The Right Usability Test Method

 

TOOLS Figma, Skype, Usability Hub, Photoshop, Indesign

 
Background_black.png
 
Nummerierung 1.png

Preparing The Usability Tests

TOOLS Indesign, Photoshop

After having a clickable prototype I could run through the hole methods depending on the question that I would like to have answered.
I started with some moderated interviews. For sure interviews are very time-consuming but you get the most of it as well.

 
Background_black.png
 
Nummerierung 2.png

Usability Tests

TOOLS Figma, Skype, Indesign, Photoshop

After having a clickable prototype I could run through the hole methods depending on the question that I would like to have answered.
I started with some moderated interviews. For sure interviews are very time-consuming but you get the most of it as well.

 
Background_black.png
 
Nummerierung 3.png

Results & Conclusion

TOOLS Figma, Skype, Indesign, Photoshop

After having a clickable prototype I could run through the hole methods depending on the question that I would like to have answered.
I started with some moderated interviews. For sure interviews are very time-consuming but you get the most of it as well.

 
Background_black.png

Stripe8.png
 
 

Test Methods

A/B TESTING

 

TOOLS Figma, Usability Hub, Photoshop, Indesign

 
Background_black.png
 
Nummerierung 1.png

A/B Tests

TOOLS Usability Hub, Figma, Indesign, Photoshop

I did smaller tests like A/B Tests while I was designing the app. It is a very fast way for less complex decisions.

 
Background_black.png

Stripe9.png
 
 

High Fidelity Prototype

 

TOOLS Figma, Your Camera, Photoshop, Indesign

 
Background_black.png
 
Nummerierung 1.png

Further Design Decisions

TOOLS Figma, Your Camera, Photoshop, Indesign

In design processes the work is never done. Always you are looking for improvements. So never expect to deliver something perfect than to deliver something great in digital products.

 
Background_black.png
 

Stripe10.png
 
 
 

Iterating & Define new goals

TOOLS Figma, Photoshop, Indesign

From now on the circle of developing and testing begins. In cross disciplinary teams and fast sprints it is about to make fast tests and iterations.

 
 
 

 
 
Background_black.png