SWIQ App—local listings management, on the go
UX Lead
Alix vander Elst
UX Research
Andrew Larbi
Testing & UI Design
Fanny Vassilatos
Company
SweetIQ
One of my first mandates starting at SweetIQ was to design an abridged mobile version of our main product to complement our desktop web-based app. The business objectives of the app were to provide a 2-way communication protocol between corporate and store managers to collect and transmit data to the SweetIQ platform and for them to visualize the performance of their stores via well-tailored analytics.
It was decided very early-on not to include all features, and to focus on what we knew our users were wanting to be able to do on-the-go. Clients had manifested the desire for this tool so we could start gathering insight from them.
Smart network of
63
directories
Currently running
3,343,599
listings
Trusted by over
200
brands
User interviews
We interviewed our clients to figure out the use they would make of this new format, helping us give direction to this mobile app project.
Over a series of about ten phone calls, we had learned a lot about our clients; who in their company would use it, what they were expecting to see in there, the problems it would help them solve on the daily, specific usecases for different verticals, as well as some of the operational red flags that implementing new processes raised for them. Overall, the general agreement was that the app idea was definitely added value for them.
Writing user stories
Then, we selected which ones of our preexisting personas we would need to focus on. We chose Allen, Digital Marketing & Innovation Manager at Best Pizza and his employee Frank, a store manager. Now, it was time to write as many user stories as we could think of to make sure we accounted for all possible usecases.
Wireframing
We were now ready to jump in and sketch some proposals for the app's architecture. We thought of the user flow, the arborescence of screens, the general information architecture that would define how the features link together.
Continuously confirming each decision with key stakeholders, we ended up with a satisfactory proposal and decided to go on with mockups.
High fidelity mockups + prototyping
Since we had decided to stick to Material Design's guidelines and I was basically translating our web-desktop features to a native-mobile interface, tackling the high fidelity mockups went pretty smoothly. Assembling screen after screen, creating hotspot after hotspot, it was very exciting to see the prototype come alive. After a couple of iterations, I had a—somewhat—interactive prototype to share using Invision. Here are some notable interactions.
Filtering your locations
This feature needed to be quickly accessible throughout the app. We gave it the main part of the header so the user can quickly reduce the breadth of data available.
Responding to reviews
With push notifications, store managers can easily respond to a review that was just posted and increase engagement.
Filtering reviews by rating
This quick filter helps users find exactly what they’re looking for. Depending on their brand’s priorities, they can analyze negative ratings or choose to focus on thanking positive reviewers.
Usability testing
We sent the prototype to our clients, told them to play with it and set up calls to gather their feedback. We simultaneously ran remote usability tests through UserTesting.com's integration with Invision.
Over weeks of conference calls, screen sharing, session viewing and collecting testers' data, we kept iterating the design until what we got was predominantly positive comments.
24 remote testing sessions over 4 rounds of iterations
Conclusion
Throughout this project, the feedback we got was great. Unfortunately, at the time, the app development ended up not fitting in our roadmap or budget.
I'm thankful for my team lead Alix's support in this project. She guided me in preparing the user interviews and gave me the autonomy to just jump in and run them myself. This helped me become more accountable for my actions.
I'm also glad our UX specialist Andrew was involved in this project. He had just recently joined the company at the time so many of the features and concepts were fairly new to him. Turns out, this can be a very positive thing! It made us constantly zoom out and consider the bigger picture before deciding on anything.
What I learned
Since this was my first UX/UI project of this size, I was pretty stressed to be sending out my creation to strangers and hearing what they thought of it. Turns out, listening to user feedback and watching users interacting with something that came out of your head is pretty effin cool. I was amazed by how quickly the users got around, navigating the prototype as they would a freshly installed app from the AppStore! What I learned is to not be afraid to send something out in the world even when you don't feel ready, (making my receptionist or IT specialist use my designs is my go-to icebreaker for testing) the worst you're going to get back is constructive criticism and an accelerated path to your even better umpteenth iteration.