TOKOMOTO (ONGOING)
WHAT IS
Developing the wireframe for an online analogue photography accessories mobile shop app
MY ROLE
UX Designer
TIME FRAME
5 weeks
TEAM PROJECT?
Yes
TOOLS
Adobe XD, Invision
My first idea was to show the sample image after clicking the "see user photos". However this add another click to see the photo sample. Not only that, does user really need to see the product image that much on the main square?
There was a discussion as well with my lecturer, do we need additional icon for notification from the shop, shown on the bottom? Since we can merge it with message, I decided to remove the icon. In addition, looking at the importance of message and cart, I decided to move up cart icon to the to and message icon to the bottom. The top bar will always shown, while the bottom bar is set to not shown in some pages.
HOW DID YOU DEVELOP THE WIREFRAME?
The overall process looks like this:
Initial Activities
Before we designed app, a number of in-class activities were conducted to formulate information needed such as:
-
Scoping, which includes:
-
What are the products in the shop?
-
What are the functions in the app?
-
What is user the user flow?
-
-
How can user find certain products in the shop?
-
Initial user testing with fellow classmates
After these activities conducted, a flowchart was developed, followed with wireframe.
The initial user testing was conducted to see whether the information showed in the app are easy to be find or easy to navigate by our user.
Flowchart
Flowchart was developed to see how user will navigate our app. Where does our user start, what are the screens that the users will face, what are the options for our users, and what are the goals within these process.
I developed the flow based on how our user will find the products, which is why I think the categorisation of the product is important. I also understand when people buy film, they wanted to know how the photo will look like, so I added photo sample in the product page with review from other users.
Wireframe
The wireframe development is where all the screens on the flowchart became alive. During my time developing this wireframe, I revised the wireframe a few time incorporating the input that I received from my lecturer. Let's take sample of the product page. This is my first wireframe version.
WHAT IS THE BRIEF?
This mobile store app was done as an assignment for Advanced Information Architecture course at Vancouver Film School. This five weeks project was developed from scratch, starting with the prompt of “create a mobile store app, what would you like to sell, how can people find the stuffs there?”
WHAT IS TOKOMOTO?
TOKOMOTO is shop where photography enthusiast can find films and accessories for analogue photography. TOKOMOTO name was taken from Bahasa Indonesia, toko means shop, and moto is a colloquial of memfoto, means taking pictures.
WHY ANALOGUE PHOTOGRAPHY?
Analogue photography is coming back, can be seen from the increase sales of film products. Moreover, the demography majority of people who do the analogue photography are under 35 years old, people who are comfortable with online shops, mobile apps, etc.
Looking at present shops, most of analogue photography accessories are sold in the same place as digital photography. The sheer amount of products sold in one place might be a bit overwhelmed for beginner or even serious analogue shooters, thus this mobile app was proposed.
Final Look... for now
After a number of iteration, this is the final look of the wireframe...for now. Please find the interactive wireframe here.
Moving Forward
This project is one of my earlier project where it push me to think, what information that I want user to see, where should I put this icon, is it easy to navigate for user, etc. Now that I finished my study, I am planning to continue this work and make a real looking prototype of the app. I started to revisit the wireframe and start to think again.
My plan forward is:
-
rethinking about navigation. Should I remove the hamburger menu and incorporate it on the bottom bar?
-
rethinking the icon and the function of each icon
-
user test of the navigation
-
develop it into real looking app
-
redo the interactive prototype
There are still heaps to do but I am excited and looking forward to share the progress of this project!
Cheers!
