Mobile App for shopkeepers

UI/UX and Brand Designer

My Client

My client is from France and he is a businessman. He is helping small shopkeepers to compete with big marts.

 

The Problem

While helping small shopkeepers and small businesses through various methods, he realized that they are facing a lot of problems in running their businesses. Like they are not able to record their purchases, invoices, incomes and expenses, employees record, etc. They are using old methods while big businessmen are using costly software. Small businessmen are frustrated by these issues. They can’t afford costly tools and a special employee to keep all records. They are of 45+ age, they were not educated enough, especially most of them are not using this kind of apps, except most popular social media apps. So the challenge was to create an app for these people.

 

My Role

I was hired to solve these problems with perfect UX and UI designing. So I was a generalist, who was doing research, architecting information, designing a style guide, visualizing the design,  There were some constraints too, I had to complete the whole project in 6 months max. The budget was not a big issue but still has some limits, and was discussed. The client was not much educated about UX and has some knowledge of UI.

 

The Solution

I completed UX and UI within 5 and a half months including all the revisions and user testings. I am explaining the whole process in the below section but here I am quickly sharing that it was an awesome experience and I connected with many shopkeepers online, of course, most of them were my client’s clients, who were actually facing problems. I took few interviews and created initial low-fidelity wireframes for initial testing.

 

I created the best logical structure of the task flows and created user journeys according to their lifestyle and way of doing business. The final prototype was liked by 98% of the shopkeepers, yes we had an online survey on a prototype with 65 shopkeepers. This was my first experience of testing and surveys with this huge number of shopkeepers and small business owners.

 

My Process

User research


I started with few meetings with my client. Collected project objectives, did some SWOT study. We decided to follow the agile methodology to proceed. I mined some ideas from my mind and a huge list from users. Users have already researched a lot but I refined more ideas because ideas and needs should be differentiated.  Ideas can be many but they must be funneled down to more important needs, specific needs are like GEMS for the app. We cant implement all the ideas, people are very creative btw.

Early research findings

  • 84% (32 out of 38) of people are aged between 45 – 65 years old, and 60% out of them are not tech-savvy. So challenging part was to create a UX that resembles their traditional method of keeping records. So that they can easily learn how to use the app.
  • Most of them agreed that they face challenges using this kind of apps just because they have lots of features, and small fonts, and microelements on the designs.
  • Many were worried because most of the apps have many features that can be used by very big companies only and not much use for their medium or small businesses. So they don’t use those apps.
  • Most of them are recording not only the products purchased but income, expenses, invoices, employees’ attendance in their old methods like recording them on notebooks or saving on mobile notes app.
  • They forget to record invoices or product purchases on time.
  • They mostly forget to record employees’ attendance and salary records.
  • Unorganized rent, loans, water, and electricity bills.
  • Not easy to keep safe all the record books with years of records.

Card Sorting

Once all the problems/findings are collected, I created few cards and send them to few users for sorting. I used www.miro.com for this. Here I added my unsorted cards and then multiple users sorted them category-wise or in a way whatever they were thinking about those cards. This method enabled me to build an app that makes sense to its users. It helped me to know how users are thinking about the content and how they are feeling about it. And finally, we got the users’ mental model. without this method, we only get our team’s or client’s point of view. We are not the users so we can’t decide what should be on the app LOL, yes! it’s the truth.

 

what is card sorting

 

Affinity Diagram and Empathy map

The next steps were creating an Affinity diagram and an Empathy map. I used www.miro.com for these. It was fun to see the results 🙂 Yeah! really.

Affinity Diagram

 

what is affinity diagram

 

Empathy map

 

Empathy map by graphics guruji

All of these studies helped me to create a better architect of the information. Now the app’s picture was a bit clear to me, where will go which place.

 

User personas


Now it was the time to create Personas. We had a semi-fictional character Mr. Denis based on our ideal customer. We get this persona after talking with lots of users and segmented it by many demographic and psychographic data. So throughout the project, my team will now focus on this targeted user so we must not add our feelings and desires to the app features. Of course, we are not the users, but Denis is 🙂

 

how to design user persona

 

Ideation


I used the “I Like, I Wish, What If” method to brainstorm ideas. Now I was ready to meet my client and the team again to get feedback about the ideas we have below.

 

 

We selected high-impact and high-priority features only to be built, after considering the vision of the team, time, and budget.

 

 

Story Boarding


It helped us in identifying the key points of Denis managing his small shop by visualizing the actual scenes. I created these stories through an iPad and an apple pencil.

 

story boarding using ipad

story boarding in UX

Screens analysis

Now I have started sorting out how many and which screens we need. I made a list.

 

 

User flow

I sorted out the best user flow based upon the screens analysis. I am not sharing a detailed user flow chart with micro TASK FLOWS because the app is still not completed and it’s in the development phase.

 

 

Low fidelity sketches/wireframes

Finally, I started creating the decided screens but for now on paper, low fidelity sketches.

 

Then I created low-fidelity wireframes on Adobe XD.

 

Usability test

Before going further with all the screens, we run usability testing with 5 users. I found some issues in understanding the UX at some places, so I resolved those at this level.

 

Hi-fidelity theme V1


Those low-fidelity wireframes took less time to decide the screen features and how all our user stories can be played out on screens. Now, after finalizing the screens, I started high-fidelity wireframes. It was time to introduce colors 🙂 But it was a challenging thing. See below to check why 🙂

 

But as per the team, something was not correct, maybe a character or the layout, color selection is the thing for later, not at this time.

So tried version V2 with some screens:

 

Again the layout and colors both were rejected and it was time to brainstorm something new. At this time I was working as a UI designer, so I had to think like a UI designer more along with UX to impress clients. After some more layouts and style guide creation we got something very minimal, see:

 

 

Yeah! There were lots of screens:




 

Final Prototype

After finalizing all the screens, it was time to have a prototype. The prototype was built to give a real app feel and to check each micro-task flow of the app. The team got some issues and then I made updates for a better UX. See, it looks like a huge network. but yessss! these are all the connections between screens in Adobe XD.

 

 

Conclusion

This was a long journey of 5 months, I met with new people and new challenges. I always welcome the new challenges that come with a new topic for UX and UI.  I am still helping the team during the development phase occasionally.

My role will be used again after the beta launch and I am very excited about it.

Do you have a mobile app project to discuss? Please contact me.