MENU

<aside> <img src="/icons/info-alternate_brown.svg" alt="/icons/info-alternate_brown.svg" width="40px" /> ParadICE is a mobile & desktop website prototype project I did for my group project of COGS 187B: Practicum in Pro Web Design. In a team of four (Hanyi Wang, Nikhil Mitra, Sharon Hu, Nour Yehia), we got contact with a real-life future snow cone booth owner and helped him research, plan, and design a website for his business. The project took us a quarter (10 weeks) from conceptualization to presentation, and was well-received by the instructor and the business owner.

</aside>

https://www.figma.com/file/uHqK0TVREPrZngLw9AFK9y/Final-Prototypes?node-id=0%3A1

Process

1. Client Proposal & Initial Requirements Gathering

• After comparing the pros and cons of several potential clients brought up by the group members, we chose our teammate's friend, Emmett, who was planning to start a local snow cone business in St. Louis.
• After having Emmett sign the Client Agreement, we had a zoom interview with him, asking a series of questions related to his business, target customers, and design requests.
• We summarized the Q&A of General, Business, Users, Brand, Competition, and Web Specifics, with our analysis attached below. We also created a priority list based on his feedback, which was an important guide to our future work focus:
  1. Construct clean, simple website with little scrolling
     1. Navigation bar consists of home, menu, about us
  2. Convey tropical theme with happy vibes that gives feelings of wanting to hang out
  3. Use unique, creative art style and memorable photos
     1. Kid friendly
     2. Personable
  4. Emphasize customer service
  5. Minimize text and use mainly pictures
  6. Clean and informative menu
  7. Include Google Maps and Instagram integration
  8. Include XXL snow cone

A1.pdf

2. User Interviews

• Collaborated as a team, we interviewed a total of 12 people aged between 11 and 50. Based on their responses, we created 3 personae: the Viber, the Sweet Tooth, and the Cheap and Quick.
• We listed 2-3 scenarios for each persona with a total of 10+ use cases each.
• We compiled the collected data into Use Case Summary Table gaining a direct understanding of the “popularity” of different function needs. Then we summarized the mentioned functions in the Feature and Functionality Table, together with the reference of whether the client has also requested the feature.

A2.pdf

3. Competitive Analysis & Mood Board

• For the competitive analysis, we selected 5 successful snow cone / ice cream businesses as our competitors. Collaborated as a team, we took an in-depth look at the branding, functionality, site architecture, and content aspects of the desktop and mobile end of their websites.
• Similar to the previous research, we wrote our takeaways after each section and also collected some design highlights as inspirations.
• We each came up with 4 mood boards (1 by each person) based on the client’s requests and our understanding of the snow cone brand, with images, keywords, colors, etc.

A3.pdf

4. Creative Brief

• At this stage, we switch from research and analysis to conceptualization and creation. By defining the end product and creating the summary of content and the estimation of total program size, we set a specified goal to work on.
• We also defined 3 audience groups: high school students (primary audience), locals, and families.
• We also defined the objectives for our client and the audience: it is a good reference for our working directions and a measurement for the success of the product.
• For Personality and Tone, we provide a branding guide with font styles, brand colors, and a unique logo.
• We did foresee some obstacles for our design process: as the business was still at the preparation stage, we did not have an existing site to build on, nor did we have real-life materials such as photos to use in our end product.
• In the end, we designed mobile end wireframes based on our content plan. We chose the mobile-end as the main focus as it will be the main platform users interact with the business website - the desktop end would be developed based on the mobile end.

A4 Creative Brief.pdf

5. Wireframes & Functional Specification

• Our team proceeded into the low-fi prototyping stage, building site architecture and prototype for mobile and desktop end with Figma.
• In the attached slides, we presented the functional specifications for each page, describing the function and configuration of each component.
• With the low-fi prototype done, we conducted our first user tests with tasks and questions. We listed out several issues from the feedback which will be addressed in the hi-fi prototype.

A5.pdf

6.1 Prototype One & Content Inventory

• We wrote a one-page content inventory to summarize our prototype works and listed the potential issues in the current version.
• This is part of the course assignment request, aiming to have project groups learn and comment on each other’s work.

A6 Part 1_ Prototype One and Content Inventory.pdf