The Framework
Following a process is how we are able to stay on track, and help up move through the project seamlessly, keeping our momentum always moving forward
01 Learn Research, observe, understand user needs
02 Define Identity goals, objectives and challenges
03 Ideate Brainstorm, brainstorm, brainstorms
04 Design Sketching, creating prototypes
05 Test Evaluating real user feedback, validation
We asked our focus group:
What word comes to mind when you hear 'bill splitting'?
Focus group questions
The goal was to learn about how people split their bills, what forms of payment are being used and to validate our ideas on how to ease the bill splitting process.
Best-in-class
While we did our research, we also did a competitive analysis to learn about strengths and weaknesses of other products on the market.
10 Bill splitting applications
We did our research on the top bill splitting applications and mobile websites and learned about their features. Some were not available on mobile web, some were only available on iOS.
1 Point Of Sale competitor
We also researched a point of sale competitor who also uses QR codes and receipts for restaurant bills and discovered that they only accept Apple Pay which would limit Android users or users who don't normally use Apple pay.
Audit — Food delivery applications
We looked at a few food delivery applications to learn how they create UI elements for selections.
2 Google surveys — 224 responses
We created two surveys using google forms to gather feedback from potential users.
Personas
We defined who our users are based on information we gathered from our surveys. It's important to get information about the needs and experiences of our users.
Feature Ideation Session and Key Performance Indicators
For features we used Hyper Island Methodology and discussed How Might We's.
Minimal Viable Product: Must haves (Do it now)
Then we prioritized our Minimum Viable Product using the MoSCoW prioritization method. We decided on our Must haves, Could haves, Should haves and Won't have.
Flows
Flows are paths a user will follow in order to complete a task.
Layla's log in and checkout flow
Sitemap
With features and flows in mind we planned our information architecture. Keeping it as simple and streamlined as possible we created our sitemap - a high level list of pages.
Where we make, create and build. We enter a loop to welcome feedback, test, and validate our ideas.
Hand drawn sketches
Wireframes
Wireframe prototype testing
Moodboard
I looked at color theory for inspiration in this project. I wanted to convey a feeling of calmness for something that many users considered chaotic.
Design System
Mock ups
Mock up prototype testing
The homepage
IXD
Microinteractions in our mobile website.
Persistent navigation and CTA
Persistent Navigation lessens the amount of clicks and scrolls making this easier for our users to take action when they are ready.
Onboarding carousel
Daily Stand Up Meetings with Developers
Following Agile methodology we met every day during our sprint with our web development team for stand up meetings to discuss progress and any blockers! They showed us what they were working on and we showed them wireframes too.
Handoff Meeting
We met with our team for a final hand off meeting, we walked them through our Figma file, flows, and other assets.
Cuenta
