Candyland-
online store redesign

Project background

01
Bridging the Gap from Physical shop to Online Experience

Candyland mobile photos from homepage and shop view
Translating Pop-Art Vibes

The primary challenge in the user interface design was to integrate elements from phisical shop to online while preserving a clean and user-friendly appearance for the shop. We addressed this challenge by incorporating separation lines inspired by 90s-style web design, pop-art illustrations, substantial buttons, and a quirky hover effect on products.
User personas

02
Candyland potential customers

User persona number 1_mobPersona profile number 2
Persona profile number 2_mobPersona profile number 2
Persona profile number 3_mob
User-Centric Design

03
How do we mirror and fulfill the needs of these users?

Translating Physical Store's Pop Art Aesthetic to Digital Presence

The initial style for the online shop came from the pysical shop. Candyland has Pop Art elements on walls, so we added same style to online presence as well.

It was important to carefully balance the outline strokes and vivid colors to not make site look heavy and not usable. The inspiration for the outline strokes and 45-degree sharp shadows stemmed from the vibrant style characteristic of the 90s web era.
hover effect and Pop-Art element in shop view

Let's integrate the elements of 'cool,' 'nostalgic,' and 'creative' based on the user personas.

To counterbalance the vibrant hues, the primary color was maintained as off-white. Additionally, I introduced accent elements inspired by pop-art and utilized accent colors for buttons and Call-to-Action (CTA) sections, infusing a touch of creativity and visual appeal.

Interactive hover effects on products make a playful and contemporary feel, catering to our younger customers.

Selection of Photography for the Page.

To appeal to creative individuals, we chose light, fun, and playful imagery, fostering an engaging and dynamic visual experience that cultivates a sense of community. It's important to note that the webpage imagery aligns with the overall branding in terms of mood and colors, ensuring a cohesive and unified visual identity.
Pop-Art elements implemented in homepage
design process

03
Project overview

Our team
Haga Home team consisted of five members: a Project Manager, Art Director, Web Designer, Developer, and, of course, the client. Each person oversaw their areas of expertise, leading to a successful collaboration that resulted in an impressive website within a relatively short timeframe.
Research for website
During the research phase, we identified that residents at Haga Home may have unique study or work situations that necessitate longer stays and greater stability.

We found that eliminating unnecessary amenities could result in improved pricing options for longer-term tenants.

Emphasizing that clarity and transparency in the pricing policy is crutial to build trust in the overall brand and product.

To enhance the user experience and make long-term renting as straightforward as short-term, we implemented separate user flows, where the distinction lies in selecting amenities and signing the contract.
Consistency in brand
The brand stands for innovation, friendlyness. As per the brand guidelines, interface has Haga Home color palette, rounded buttons and fields to infuse youthfulness and playfulness in the design.
Finalize the design
I fine-tuned the typography to achieve optimal readability. Consistent spacing and alignment principles were applied to maintain a cohesive and polished look across all screens. Information was strategically separated into panels to keep focus and facilitate easier insertion of user data.

As for interaction design, I ensured that buttons, forms, and other interactive elements respond seamlessly to user inputs. This includes implementing features like the interactive calendar and incorporating guiding text on panels, as well as a progress bar at the top of the screen for enhanced usability.

The UI design for Haga Home thoughtfully reflects the brand's identity while placing a high priority on user needs.
Handoff to development
The project was on a tight timeline. While the final design and prototype were under client review, the developer had already started working on the back-end and front-end structure. We held regular one-on-one meetings to thoroughly discuss design decisions and reasoning. This format not only provided clarity but also offered an opportunity for the developer to ask any additional questions. Given the proximity of our workspaces, we maintained close communication and seamlessly implemented design changes as needed, especially if any feedback came in during the client review process. This collaborative approach ensured an efficient workflow and allowed for quick adjustments to meet both design and timeline requirements.
End product

04
final word

Through a strategic approach, the Candyland website now delivers a harmonious blend of visual creativity, usability, and a seamless connection to the brand's physical store style. The final design successfully bridges the gap between a custom e-commerce experience and the adherence to established usability standards, creating an inviting and immersive online environment for Candyland's diverse user base.

I participated in this project while working at Hak Agency. This case study is authored by me and reflects my insights and takeaways from the experience.