Spek
An online community for and by the business traveler: honest peer-to-peer reviews, helpful tips while on the road, travel-related news, opportunities for new connections, and discounted shopping.
Embedded Files
Project Overview
Project Overview
Duration: 20 weeks
Sponsors: Ted Cullen & Mike Ivey
Tools: Figma, Ionic, Trello, Google Suite, GitHub
Programming Languages: Typescript, HTML, CSS, Git
Problem: How do we foster a community of business travelers?
Problem: How do we foster a community of business travelers?
Solution: Designing a system that consists of community features that allow users to interact, communicate, and connect with other business travelers on the Spek application.
Solution: Designing a system that consists of community features that allow users to interact, communicate, and connect with other business travelers on the Spek application.
The Team
The Team
Our team consists of 6 UC Irvine undergraduates majoring in Human Computer Interaction or Software Engineering. A majority of our team has experience in UX/UI design as well as application development. Working together allowed us to hone in on not only our communication and collaboration skills, but also our design and technical skills.
Desmond Garrido
Derek Song
Maika Marin
Carlos Guzman
Nathan Nagata
Dayanara Melara
Where We Started
Where We Started
When we first met with our sponsors, they came to us with a mobile application that had basic functionalities for searching, viewing, and reviewing a hotel in addition to a user profile page. However, they needed help in designing a system that would also incorporated a user feed, more enhancements and personalization to the user profile, and ways for users to connect and communicate with each other.
Initial Screens from the Spek app
Initial Screens from the Spek app
Agile Methodology
Agile Methodology
After learning more about the goals and expectations of our sponsors, we needed a system that our team would utilize to efficiently manage our tasks and milestones. Adopting an agile methodology helped our team the most in:
Scheduling productive meetings with both the team and with our sponsors each week
Gathering feedback for our deliverables and updating prototypes when needed
Keeping everyone on the same page when making design decisions
Increasing productivity through each design iteration
Have a Team and Sponsor Review after every feature to verify completion and satisfaction
USER RESEARCH
USER RESEARCH
Persona
Persona
Based on the different articles and resources provided by our sponsors concerning business travel, we went identified the key goals, needs, and frustrations of our users. With this design artifact at hand, we were able to keep the user in mind when designing different solutions.
User Journey
User Journey
We created a User Journey map in order to identify major touchpoints for when and how a user will be using the Spek application. We identified that the most common times a user would be using the Spek app would be:
Prior to going on a business trip
During their business trip (including when they check-in to a hotel)
After their business trip.
Based on this user journey map, we suggested 3 features to implement that would enhance the user experience of Spek.
Wireframes
Wireframes
Based on our research and weekly meetings with our sponsors, we decided to focus on designing 3 new features that would be integrated within the Spek application to provide more of a community aspect:
User feed
User profile enhancements such as badges
Eco-footprint dashboard and calculator.
When creating these designs, we wanted to keep the wireframes as barebones as possible in order to understand the skeleton our designs would be built on top of. We started with creating the base features of what we wanted the app to have, which included the three tabs at the top as well as our navigation bar on the bottom.
Mockups and Prototypes
Mockups and Prototypes
Eco Footprint
Eco Footprint
Eco footprint tutorial screens
Introduce users to Eco Footprint features and surveys
Eco Footprint score and breakdown
Average score is calculated based on responses to questionnaire with a breakdown of each category's significance to a user's score.
Initial iteration of questionnaire surveys
Different categories with corresponding questions to track user's Eco activity: Travel, Shopping, Sustainability
History of previous Eco Footprint questionnaires
Users can view their previously submitted questionnaires and view their correponding Eco score based on their responses.
Save questionnaire drafts and complete it later
Allows users to save their progress and complete surveys later
User Feed
User Feed
Post to feed
Upload photos, reviews, articles, hotel check-ins and badge achievments
Save and edit post as draft
Users can save their posts as drafts to edit and upload on another occasion
View articles in addition to connections' posts and activity
The home feed consists of a variety of different posts from a user's connection with the ability to filter by categories: reviews, social, and articles.
Articles can be shared and viewed all without navigating away from the app
Like, share, and comment on your favorite posts
All posts are able to interacted with as well as be reported/flagged if any community guidelines are violated
Search the feed
Users can search for connections, relevant articles, and other information that may be useful for their next business trip.
View a connection's reviews on their hotel stays
User Profile
User Profile
History of user's posts
Users can see the different types of posts that they've previosly uploaded as well as their Eco Footprint score
Edit Profile Information for better connections
View list of connections and any incoming requests to connect with other users
View previously liked posts
Access to previously liked posts
View history of reviews from previous hotel stays
Communicate with others through direct messaging
Achieve new badges to display and share with others
Figma
Figma
Implementation
Implementation
The initial plan was to integrate code into the existing codebase, but we were unable to run it due to the lack of documentation
After talking with our sponsors and our professor, we figured that it would be better to not try and code out the whole application, but rather, focus on one aspect and implementing that.
We did this because we realized there might not be enough time to properly code, develop, and test each respective segment. So instead we just focused on one.
We chose to actually implement the Eco Footprint part of the application because we felt that it was one of the most complex features, and hardest to show statically through Figma.
Final Deliverables
Final Deliverables
Figma Prototypes and Demos
Eco Footprint - Ionic Prototype [Github Repository]
Design Artifacts: Personas, User Journey Map, Spek Design Document, User Flow Diagram, Wireframes
Ethics Review
Requirements and Design Document
Page updated
Report abuse