About Project
Our Client, The Beer-store is a Canadian owned chain of retail selling beers and other malt beverages. They have a wide database of 450 retail stores, 20k+ customers and 800+ brands. They approached Ironlogic to improve their Mobile Apps and there by engage more customers to buy beer online.
Problem
-
The current digital platforms including web, mobile and Kiosk are not driving sales as Beer-store expecting.
-
Customers are not satisfied with the current Beer-store user experience comparing other competitors like LCBO, Runner, etc. (based on App Store/google play comments).
-
Current Beer-store UI is way too old and required a minimalistic approach.
"We expect 70% of Sales through our digital platforms
- Manager, Digital Strategy & eCommerce. The BeerStore"
My Role
-
Attend On-site and Off-site meetings with the client.
-
User research and Interviews.
-
Competitive Analysis
-
Developing Information Architecture.
-
Wire-framing.
-
Prototyping.
-
UI Design.
-
Asset transfer to developers.
-
Testing and Iteration.
-
UI Testing.
Timeline
Duration - March 8, 2019 to April 5, 2019
​​
-
Week 1 - Initial Client Meeting to obtain client business requirements.
-
Week 2 - Understanding users using User interviews, competitive analysis, User personas and Creating Wireframe.
-
Week 3 - Testing the wireframes and low fi prototypes with Users and obtain feedback from them. And creating UI get approved and provide to developers.
Design Process
Understand Business Requirement
This session was on beer store headquarters ,along with Lead developers ,project managers and digital strategy managers from
beer-store. Below are the insights they provided to us.
-
Bring more users to digital platforms ranging from web, mobile and KIOSK.
-
Boost the sales to 70%. (As of now its 10% sales).
-
Apply new rebranded colours in BeerExpress Website, Mobile app and KIOSK to make consistency in Beer-store digital platforms.
-
Improve the look and feel of beer store to more of a minimalistic approach.
Discovery Phase
The Discovery phase opened up what the real users thought on the product. The discovery phase break down into 3 sections.
User Interviews
User groups
Surveys
1. User Interviews
Beer-store arranged a set of users to interview and we interviewed them.In order to find a solution we need answers for these questions for our stakeholder (Beer-store),
1. Why People hesitant to use the Beer-store digital platform?
2. What’s make them use our competitors' digital platform.
3. What's lacking and what needs to improve?
We interviewed and listed some questions, to pick the pain point users are facing.
-
How do you usually buy beer, In-store or Online?
-
Have you ever used a beer-store app/website before?
-
Have you tried other apps to buy beer? If yes which one and why that?
-
Given a smartphone with the beer-store app and told them to try to beer from it.
2. User Groups
-
Gone to beer-store in the nearby locality.
-
Talked with people who came to buy in-store and asked about their experience buying beer online.
-
Talked about their experience in buying beer using KIOSK. Suggestions on KIOSK experience.
3. Surveys
-
Tried Google forms for survey.
-
Open ended questions to gain wide user perspective.
User Research Conclusion
Insights based on the user comments research
-
Navigational issues.
-
Inefficient Homepage/Landing page.
-
Data Overload
-
Skeuomorphic Design
-
Minimal/Modern design of competitor platforms.
User Flow
Before our research, With lot of in-house discussion we come up with the user flow provide below.
Sketches
User flow give the idea to generate the sketches. Major task here was to make a simpler yet faster process for users to buy a beer.
The sketches above has been developed after quite a lot of iteration from Clients ,Users, Developers and project managers.
Wireframe
Even-though the deadline was quite near, I have gone to Lo-fi Wireframes which will help us to save time when we procedd to real UI and Creating Design Libraries.
Design Library
When the wireframes got approved. My next step is to create a design library which provide information about Color, Typo and
Re- usable components. The tool I used for creating UI is Adobe Xd. The BeerStore already had a new refreshed brand color which has been provided to us. I build everything based on the brand colors. BeerStore Black & BeerStore Yellow was the primary and Secondary colors.
User Interface
Tool Used: Adobe XD, Adobe Photoshop & Illustrator, Jira for UI Tickets
Prototype
Due to confidentiality i cannot provide the exact prototype link. But Adobe XD Provide the option to record the screen prototype.Given
below video provide the basic functionality of Beerstore app.
Developer HandOff
-
Using Adobe XD, Shared design and assets to developers using cloud URL. Providing the Developer Link interface of Xd.
-
Sit along with developers to check whether everything in the design is conveyed in right manner and made UI testing, when each UI portions are developed.
-
Supervised throughout the developing phase when a design help required.
Conclusion
-
Got appreciation from Client and Users for new refreshing web, mobile, and KIOSK.
-
Based on analytics from the beer-store, there is an increase in sales from digital platforms and it kept on increasing.
Live Product URL
Take Away's
-
Improved skills to tackle business requirements and advocate for user needs.
-
Introduced UI testing as part of the design process which promises the final product and interface designed is same.