Chikalicious: Deliciously Fast UX/Web Developer Collaboration
My Role: UX Designer | Duration: 2 Weeks
Project Status: Complete
Designers and developers are a sweet combination. We partnered with emerging developers to immerse ourselves in the Agile methodology and chose to redesign our favorite restaurant’s website. We picked Chikalicious as our theoretical client to boost our motivation as we sprinted toward our MVP.
Current Site
Problem space
Chikalicious has a website with 90’s UX that doesn’t reflect their brand.
How might we convey the dessert bar’s principles of elegant joy with only 24 hours to design?
Our Solution
We created a site that was simple and refreshing, utilizing their cream yellow and signature egg logo. Key information such as location, hours, delivery, and reviews are immediately available and the site has a modern, timeless energy.
Design Goals
Improving access to key information.
Conveying the restaurant’s brand.
We made:
An interactive hero image suitable for the city’s current policy of delivery-only dining.
A paged, embedded food menu.
Featured reviews.
A live, interactive Instagram gallery.
Links that mirror the modern diner’s decision process: Yelp, Instagram, & Grubhub
Revised Landing
Research
We started by putting users at the core of our design.
We learned diners’ demographics and priorities and summarized them as the persona “Social Sidney.” For her, menu and allergen information is crucial when it comes to satisfying herself and her friends.
Their insights became our design
They told us that they loved to find and visually explore new restaurants and knowing which subways they’re near, but hated incomplete menu, payment, and hours information.
Design
1: Low Detail
We brainstormed how we’d address each feature.
As an Agile UX team, we ran a design studio with our developers and improved on each others’ ideas so that we committed to the best solution.
We picked the best idea for each feature, revised it, and made it part of our MVP.
Initial Layout Design
Revised Layout Design
2: High Detail MVP
Having collaborated, we sprinted to our high fidelity MVP and developer hand-off.
24 hours later, our design had been finalized and realized
We created a spec doc and worked in Zeplin to ensure consistency.
The nature of the project meant that we were only able to check in with our development team twice over the next week.
Preparing a redline in Zeplin
Takeaways
Perspectives on feasibility vary widely between designers and developers. We learned a lot of empathy for our developers during planning poker.
Details matter (see above). Using a component design system is essential as you refine details and hand off to developers.
Communication is key- a lot of details went unnoticed by the developers and more scheduled and ad hoc communication could have saved a lot of time.
Compromise is at the core of any good relationship, especially with developers ♡
