Retale App
Mama shops in Singapore are gradually declining in the market. To be able to enhance how it's being received, we need to look into innovative ways to facilitate this decline and make a receptive change towards how the public shop at local mama shops.
Phase one teammates:
Syahidah, Givson,
Foxin
Roles
Research, Design, Prototyping (Wires)
%20Free-iPhone-X-App-Screen-Mocku.jpg)
Research phase
Phase one venue research was conducted before we ventured onto rethinking the Retale application. The in-depth process can be found here.
Heuristic mark-up, we used heuristic markup to audit the existing experience in self-servicing stores at Nanyang Polytechnic (Cheers) and Singpost Centre (Fairprice). Through this method, we can place ourselves in the user's shoes to get a jist of what the end-to-end process was like and how do the people feel when they are using the product.
.png)
.png)
.png)
User needs, business goals & technical feasibility, to understand the potential needs of the people better, we used the Venn diagram to visualise what our focal point should be. This is important because it helps the team to measure our priorities that can help to elevate the experience at the mama shop.
Fig 1 | This Venn diagram is to classify the technical feasibility, user needs and business goals identified
Fig 2 | Subset Venn diagram to classify the importance of each point generated
User flow, designing user flow based on each critical and important points helps to identify our targeted users, and think about WHY would they want to use the mobile application designed.
Part 1
_17.jpg)
Part 2
As a team, we managed to identify the flow for different personas targeted to use this mobile application in the store through a user flow mapping.
_1.jpg)
Part 3
We quickly moved onto reframing potential problems into opportunities.
We made use of the how might we exercise: Not too narrow, not too broad - But just right to give a clear definition to problems' opportunities.
Part 4
Crazy 8s is one of a core sprint method used to sketch quickly. The 8 represents 8 minutes (duration is given) while the crazy stands for the number of ideas that can be produced during that given amount of time.
_2.jpg)
Low-fidelity prototype, before diving into wireframing, we went on to prototype the entire user flow for each persona through paper prototypes by using the Marvel application to link all the scrap landing pages together.
a) Description of persona's user flow:
b) First iteration:
Prototype mock-up for:
-
Convenient Clarisa - https://marvelapp.com/72gf79h
-
Contented Charlie - https://marvelapp.com/76h5681
-
Active Andy - https://marvelapp.com/286jf1a
-
Loving Leticia - https://marvelapp.com/2e6dcf8
_6.jpg)
_8.jpg)
_10.jpg)
Mid-fidelity prototype, prototype the entire user flow using Axure RP with an applied grid system.
ia) Improvements to be made:
-
Some of the application screens did not work as intended in our user flow, we found the user stumbling
-
Some of the icon placement in our initial user flow was confusing to the user
-
Some actions in our user flow were not properly considered in totality, which we learnt during validating with our users
-
Buttons are not aligned
b) Wireframing:
For testing purposes, resolution & size is measured to fit iPhone 6 and 7 Plus
i) First iteration:
No. of columns: 10
Width: 25
Gutter: 15
Margin: 10
ii) Second iteration:
No. of columns: 10
Width: 25
Gutter: 15
Margin: 10
iia) Improvements to be made:
Process journal 1 | Application development
Prototype link: https://56mwry.axshare.com/
Process journal 2 | User testing & application iteration
Prototype link: https://rhxv37.axshare.com