ParadICE:
Website Design for
a Local Snowcone Business
ParadICE is a mobile and desktop website prototype project I did for my UX class project. In a team of four, we got contact with a real-life future snow cone business owner and helped him research, plan, and design a website for his business. The project extended from conceptualization to presentation and was well-received by the client.
Date
2022/1 - 2022/3, 10 weeks
Skills
UX research, UX design, Branding, User testing, UI design
Team
Hanyi Wang, Nikhil Mitra, Nour Yehia, Sharon Hu
Category
Class project (COGS 187B: Practicum in Pro Web Design), Group project, Real-life business, Website prototype
I. Research
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.
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.
2. User Interviews
3. Competitive Analysis & Mood Board
For the competitive analysis, we selected 5 successful snow cone/ice cream businesses as our competitors. Collaborating as a team, we took an in-depth look at the branding, functionality, site architecture, and content aspects of their websites' desktop and mobile ends.
Like the previous research, we wrote our takeaways after each section and collected some design highlights as inspirations.
We created 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.
II. Branding and Wireframing
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.
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.
III. Prototyping
6. 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.
7. Critique and Revisions
The first half of the presentation is our reviews of other groups’ projects and our thoughts on the feedback we received.
We then showcased the changes we made with “before” and “after” juxtaposed.
The last page of the slides is an update on our development plan, breaking down and assigning work for different individual(s).
IV. My Contribution Highlights
1. User Interviews
Interviewed client (business owner) with teammates
Interviewed 3 potential customers for user research
2. Branding
mood board by me
logo and branding style proposed by me
3. Prototyping with Figma
For the wireframing and prototyping work of the team, I was assigned to be in charge of the Menu and Product Detail pages: the largest and most informative part of the whole website.
With graphic design experience in layout and typography, I also helped with other sections including Home, Hours & Locations, and Meet the Owner.
As a group project, every page is a collaborative result of the group. Thus there are more or less some elements designed by my teammates.
Below are some mobile and desktop hi-fi prototype frames designed or edited by me:
V. Reflection
This is my first UX project working with real-life a business/organization, which brought me a new understanding of how to communicate with clients, plan out the workloads, and navigate through problems in reality.
Following the course guidance on user research methods, I learned truly dive into the situations of clients and customers, meticulously collecting and effectively interpreting the data. I also grew comfortable with interviewing people and conducting user testing - which helped me design and run my user research for future projects.
Being responsible for most of the branding and UI design of the team, I encountered the classical issue of discrepancy in design decisions. My original branding guide was greatly altered by others through the prototyping process. The complete change of the color palette was reasonable but have the visual style astray from the agreed branding I proposed. Having worked in the visual designer role for several projects, I am still on the way to refining my guiding and negotiation skills. It does take a lot of effort to ensure the branding style is consistent and on the right track.
