Problem statement
The Goal
Research
Understanding the user
One of the key elements in the design thinking process is to understand the real needs that users have, which they may or may not know, in a given scenario or product. For this, research tools and processes can provide us with information that allows us to obtain insights and, ultimately, design a better solution.
SweetCinemas is a conceptual design project and although there was some real research regarding the market and possible competition, there was no real user research. I still did simulate the processes, which allowed me to develop and learn about the whole process and the valuable implications it has on design.
Market research
How about a macro perspective?
Competitive analysis
What are they doing good & bad?
To reveal this, a good starting point is to conduct a competitive audit that explores competitors' strengths, weaknesses, opportunities and threats. The information gained can inform the design process and help save time, money and energy.
Some of the analysed companies, although not focused on mobile devices, have been tagged as direct competitors while others are indirect. The e-commerce and candy-related fields provide similarities in design patterns, promotion and sales formats, as well as ideas to adapt or avoid.
User research
Let's get to know them
To keep the design focused and create a user-centered product, data collection is one of the most valuable stages of the process. One of the simplest and effective ways to gather information is through primary research, it will help validating design ideas and concepts early on the design process.
The source of this information for Sweetcinemas was interviews with participants chosen from a broad demographic group. Through this qualitative research technique, users were categorized into common groups based on their situations, related to their activity, location, age and marital status:
People who go to watch films on a regular basis.
People located in urban or suburban areas nearby to movie theaters.
Ages between 12 to 55.
Parent with kids, couples and singles.
Pain points
Where does it "hurt"?
Flow diagrams
Where do decisions lead?
After listing many of the main screens and processes that SweetCinemas needs to provide its service, it was time to connect the dots and create the flows that outline all the different paths the users can take. They must be a living document, ready to support for possible corrections and necessary updates as the design progresses and testing is carried out.
These diagrams can represent a general view or go deep down to the smallest details, helping depicting complex systems or workflows. Here is the flow diagram of the main processes of the application:
Wireframes
First ideas and blueprints
The main goal at this stage was to quickly draw multiple design versions where I could find out concepts, elements and screens that I would like to have or avoid in the final app design.
And then I draw a more accurate and refined version of those screens I found suitable for the app and that I would digitalize into wireframes.
Splash Screen
Onboarding Screen
Home Screen
Overlay GPS Location-Cinema Screen
Products Grid Screen
Products List Screen
Cart Screen
Checkout Screen
Product Card Screen
Search Bar Overlay
Settings
Click & Collect QR Code Screen
Low Fidelity
Let's get to know them
With everything on mind, the flow diagram, the generated ideas with the sketches, the wireframes, first iterations of low-fidelity prototype and an early usability study, a proper base prototype to take into the next steps.
Here you can see some of those screens with explanations of how specific elements address user needs.
High Fidelity
Up to 44 screen designs
Candy pink was the go-to accent color to start this design style guide, giving the proper mood of sweetness. The font family was another important factor to imprint character on the service, and Nunito is such a good modern match delivering information in a sweet and soft manner.
The screen creation process continued generating new ideas through the iterative cycles of the design process, including different product lists views and product details patterns that could be used for A/B testing in further design stages.
Color palette
Font family & styles
