city creek center
MINI PROGRAM DESIGN & DEVELOPMENT
What is a Mini Program? WeChat Mini Programs are “sub-applications” within the WeChat ecosystem. Instead of accessing this “app” from the Apple App store or Google Play, you would find it through the WeChat App. All Mini Program must be submitted to Tencent for approval prior to it being launched.
BUSINESS PROBLEM.
City Creek Center (CCC) is world-class fashion and dining destination in the heart of Salt Lake City - popular attraction to the Chinese Tourism. The MVP of CCC’s Mini Program was originally developed by CLA’s Digital Developer and Account Manager, without any design aid. At the time of the launch, CLA team was still learning the ins and outs of the Mini Program ecosystem. It came to no surprise that the client, CCC, soon realizes their Mini Program was outdated and not reaching the target consumers. The MVP of the Mini Program (pictured below) had outdated content, overall look and feel was not on brand, and had zero user engagement.
MY ROLE.
As the UX/UI Designer on the CLA team, I was task to spearhead and take ownership of this Mini Program revamp. I conducted an UX audit on its existing Mini Program and made recommendations to ensure upgraded design and functionalities. Created client RFP detailing recommended design solutions and new user flow. Upon client approval, work directly with developers and provided final wireframe, assets, and style guide.
design solutions.
The below recommended design solution was submitted to client for approval:
Style Guide: Update to match the color scheme used on CCC’s website.
Sitemap: Proposed a new sitemap to incorporate interactive component, and bring in new features and functionality.
Splash Screen: Implement WeChat’s widescreen splash screen feature to drive visual.
New Home Feed: Develop a home feed to include promotions, branding, and sponsorship opportunity. Also a great avenue for common FAQs and to link to existing WeChat articles.
Interactive Mall Directory: Upgrade the mall directory maps to be interactive and sorted by floors. Add a carousel banner at the top of the directory page to drive visual. Bring in visual hierarchy and enhance brand listings so user can easily find brands based on store category.
Passport to Shopping (PTS): Augment the Digital Passport to Shopping - enhance usability and highlight offers and promotions . Add a secondary layer for the highlighted stores so users can click through for more details.
FINAL DESIGN.
All wireframes were created using Sketch and all assets and style guide was packaged for developer via Zeplin.
