Product Designer
Innovative Design at USC client project
Jan 2022 - May 2022
Figma
Prototyping
User Research
Branding
@Nikisha Roberts
@Ivan Peng
@Natalie So
@Kyle Ang
As a member of the web team for Innovative Design at USC (a student-run design agency), we took on Wolf Suit Games as one of the organization's first paid client. The client is a game startup, looking for a UX design for their new game, Otherworld. Otherworld is a game where the player travels to different locations in real life in order to complete a narrative. The client wanted a design that matched the uniqueness of the game itself, but flexible enough to accommodate a variety of different storyline styles.
The unique bubble style paired with a sleek dark mode and unconventional icons gives Otherworld a truly otherworldly feeling, while still being easily approachable and understandable to new users.
.gif)
Otherworld already had an existing working prototype that we tested in the field. It had one storyline set in Venice, California where we were able to go around the city, collecting clues and characters. Through this prototype trial, we were able to determine a few areas for improvement that we can address in our new designs.
It was difficult to navigate the map feature because it did not function like familiar map platforms. For the sake of unique design, the game sacrificed a smooth user flow.
There were multiple panels that included a large amount of text that made it difficult to gauge important information. This is especially detrimental to this game since it is story-focused.
The prototype attempted to be unique with iconography and other aspects of the design which led to a design that was unintuitive because it deviated from existing app norms.
In order to create design with the three aspects that were lacking from the existing prototype, we conducted some competitor research to look at what other location-based games are designed and what aspects of those designs are successful or not.
Our client had a very particular vision for the Otherworld design and it was imperative that our designs were able to match his vision. His vision could be summarized into three components.
It was difficult to navigate the map feature because it did not function like familiar map platforms. For the sake of unique design, the game sacrificed a smooth user flow.
There were multiple panels that included a large amount of text that made it difficult to gauge important information. This is especially detrimental to this game since it is story-focused.
The prototype attempted to be unique with iconography and other aspects of the design which led to a design that was unintuitive because it deviated from existing app norms.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Our process was very systematic, consisting of the moodboard stage, low fidelity, mid-fidelity, high fidelity and final design stages. In the middle, we also established a design system to keep the designs of each team member consistent.
One of the first challenges we ran into was creating a moodboard. The client had a very specific vision for his game and that included creating a design that is unconventional and never seen before. This made it especially difficult to pinpoint what direction our designs should go in. My preliminary moodboard consisted of images from various animated media and font aesthetics to try to capture a unique and colorful feel. My teammates also created a number of different Moodboards for our client to choose from. In the end, our final design went in a vastly different direction than any of our moodboards but at least it provided us directions not to go in.
While created much later in the process, the user flow is useful to look at in order to understand which screens needed to be made. The reason why this was created later for this specific project is because the client had already given us a few screens to design. It was only later that we created a user flow to connect all the separate screens into a cohesive game.
We also created a far more detailed interactions user flow for Otherworld developers to reference. As the legend details, filled in boxes are full screens, filled in rounded boxes are buttons and menus, filled in triangles is a user decision, empty box is user action, and empty rounded boxes is a backend action. This way developers can easily determine what happens on each page and with each user action.
Our low-fidelity drafts were wireframes that outlined the layout for each page. I was tasked with creating the main menu page and so I created multiple iterations, playing with different layouts. I also experimented with different main map layouts.
The most challenging aspect of this project was likely trying to establish a design system for Otherworld, including branding, color, typography, and iconography. The client wanted a design system that was versatile for a number of different storylines, but also unique, unconventional and energetic.
Because the client could not really specify what concrete design elements would satisfy his criteria, we needed to do multiple different iterations of design systems.
As shown below, very early on, I played with a number of different main menu designs, incorporating circles, diamonds, blurs and gradients. All of these were since scratched because it didn't match the energy of Otherworld.
Below is another example of an early iteration that I created, utilizing abstract lines and shapes to denote different button usages. This was paired with contrasting colors and interesting fonts to create a more alien look. This iteration was scrapped because it did not feel modern enough.
These iterations were much closer to the final design. I utilized black background blur, semi transparency, simple but unique iconography, and semi-3D circles to build the buttons for the main menu. I also created a unique shape to place on the main menu page that holds the three main buttons. This interesting shape gives a bit more uniqueness to the main menu design.
Utilizing elements from my previous designs, we were able to create a design system. Major elements of this system include the icon designs, color usage, and iconography. This design system was extremely successful in that it provided the "otherworldly" feeling by being different from other games, but also was simple and recognizable enough to be easily understood by new players.
For our final product prototype, we included a number of features, including an extensive tutorial for simple onboarding, discover feature to find new businesses, and an innovative live feature to bring a personal aspect to online business. View our final prototype here.
After five months on this project, we finally finished the final designs for Otherworld. We were tasked with designing over twenty unique screens and a full design system, including over thirty unique icons.
On the main map page, players can interact with the map by panning and pinching the map directly to navigate. If the map is uncentered, the main icon will open up. When clicked, the icon will close up again and recenter the player.
Players can easily access quick item menu by clicking the items button. Through this, they can add more quick items from inventory or go straight to inventory. Within the inventory, players are able to view or use their items.
One of the major features of Otherworld is the story. Otherworld has a number of different storylines set in different locations for players to discover. In the story panel, users can look at the stories they are currently working on, the ones that haven't completed yet, and the ones that they have.
In order to complete stories, players can identify characters on their journey that they can interact with through the character dialogue and player responses.
One of the most difficult aspects of this project was attempting to establish a design system. Tasked with creating a design system that was both unconventional yet still easily understood by new players. Otherworld was envisioned to feel alien but modern, without stepping into fantasy. This proved difficult and we had to go through numerous iterations in order to find one the client was satisfied with. Many moodboards were created, and a lot of research was done not only on existing games but also game concepts developed by individual creatives.
An issue that came along with the difficulty in establishing a design system was maintaining consistency among designs made by different teammates. Even when a design system was established, there were still slight inconsistencies between different members' designs. In order to mitigate this issue, we met as a team very often and worked on designs together to smooth any inconsistencies across screens. It was also imperative that we were very detailed in our design system so that every aspect of the designs were covered.
Above are a few screens created by different members of our team midway through the design process. These designs are clearly very different in their styles which demonstrated our different styles and indicated the lack of consistency without a detailed design system.
The work was split evenly among my teammates. Each of us were tasked with different screens and we worked together to develop a design system. I was tasked with the main menu screen but I also ended up building the main map screens. I also created the design that was later adapted into a full design system which included the blurred dark mode and the clay-morphic style for the button designs and the main map blob-like button holder.
Admittedly, this project did not go as smoothly as it could've mainly because of the issues we had with establishing a design system. It was difficult for us to understand the client's vision and transform it into tangible designs. Thus, something I can do in the future when working with clients is to categorize designs into abstract concepts. For example, one could characterize designs into multiple different moods and styles such as "fantasy", "mysterious", "sketch," etc. in order to help me design in accordance to a client's vision.
As a team, our designs were highly inconsistent especially at the beginning of the process. While it's okay and actually encouraged to showcase different styles early on, we were inconsistent far into the process which warranted a bit of concern from the client. It got a lot better when we changed our meeting agendas to include more time to work together on the same screens rather than simply splitting the work. This is something that I will do more in the future with my teams in order to ensure consistent designs.
